<template>
|
<div class="left-nav">
|
<ul>
|
<li v-for="(item, index) in leftNavData"
|
:key="index"
|
@click="leftNavClick(item)">
|
<img :src="item.img"
|
alt="">
|
<span>{{item.label}}</span>
|
</li>
|
</ul>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: 'leftNav',
|
computed: {},
|
data () {
|
return {
|
leftNavData: [
|
{
|
flag: false,
|
label: '标签',
|
img: '/img/leftnav/tag.png',
|
normal: '/img/leftnav/tag.png',
|
checked: '/img/leftnav/tag-checked.png',
|
layer: 'tagLayer'
|
},
|
{
|
flag: false,
|
label: '道路',
|
img: '/img/leftnav/way.png',
|
normal: '/img/leftnav/way.png',
|
checked: '/img/leftnav/way-checked.png',
|
layer: 'wayLayer'
|
},
|
{
|
flag: false,
|
label: '实景',
|
img: '/img/leftnav/scene.png',
|
normal: '/img/leftnav/scene.png',
|
checked: '/img/leftnav/scene-checked.png',
|
layer: 'sceneLayer'
|
},
|
{
|
flag: false,
|
label: '活动',
|
img: '/img/leftnav/activity.png',
|
normal: '/img/leftnav/activity.png',
|
checked: '/img/leftnav/activity-checked.png',
|
layer: 'activityLayer'
|
},
|
{
|
flag: false,
|
label: 'AED',
|
img: '/img/leftnav/aed.png',
|
normal: '/img/leftnav/aed.png',
|
checked: '/img/leftnav/aed-checked.png',
|
layer: 'aedLayer'
|
},
|
{
|
flag: false,
|
label: '停车',
|
img: '/img/leftnav/park.png',
|
normal: '/img/leftnav/park.png',
|
checked: '/img/leftnav/park-checked.png',
|
layer: 'parkLayer'
|
},
|
{
|
flag: false,
|
label: '出入',
|
img: '/img/leftnav/come.png',
|
normal: '/img/leftnav/come.png',
|
checked: '/img/leftnav/come-checked.png',
|
layer: 'comeLayer'
|
}
|
],
|
viewer: null,
|
DC: null,
|
tagLayer: null,
|
wayLayer: null,
|
sceneLayer: null,
|
activityLayer: null,
|
aedLayer: null,
|
parkLayer: null,
|
comeLayer: null
|
}
|
},
|
created () {
|
this.DC = global.DC
|
},
|
mounted () {
|
|
},
|
methods: {
|
generatePosition (num) {
|
const list = []
|
for (let i = 0; i < num; i++) {
|
const lng = 121.44405783 + Math.random() * 0.5
|
const lat = 31.19480456 + Math.random() * 0.5
|
list.push(new this.DC.Position(lng, lat, 0))
|
}
|
return list
|
},
|
leftNavClick (item) {
|
item.flag = !item.flag
|
if (item.flag == true) {
|
item.img = item.checked
|
this[item.layer].show = true
|
} else {
|
item.img = item.normal
|
this[item.layer].show = false
|
}
|
},
|
initialize (viewer) {
|
viewer.scene.globe.depthTestAgainstTerrain = false
|
this.viewer = viewer
|
this.tagLayer = new this.DC.HtmlLayer('tagLayer')
|
viewer.addLayer(this.tagLayer)
|
this.wayLayer = new this.DC.HtmlLayer('wayLayer')
|
viewer.addLayer(this.wayLayer)
|
this.sceneLayer = new this.DC.VectorLayer('sceneLayer')
|
viewer.addLayer(this.sceneLayer)
|
|
this.aedLayer = new this.DC.VectorLayer('aedLayer')
|
viewer.addLayer(this.aedLayer)
|
|
this.parkLayer = new this.DC.HtmlLayer('parkLayer')
|
viewer.addLayer(this.parkLayer)
|
this.comeLayer = new this.DC.VectorLayer('comeLayer')
|
viewer.addLayer(this.comeLayer)
|
|
const positions1 = this.generatePosition(50)
|
positions1.forEach((item, index) => {
|
const divIcon = new this.DC.DivIcon(
|
item,
|
`
|
<div class="tag-entitys-box">
|
<div class="tag-content">
|
南门口
|
</div>
|
<div class="tag-angle-content">
|
<img src="https://map.hit.edu.cn/images/tarrow_xq.png">
|
</div>
|
</div>
|
`
|
)
|
this.tagLayer.addOverlay(divIcon)
|
})
|
|
const positions2 = this.generatePosition(50)
|
positions2.forEach((item, index) => {
|
const divIcon = new this.DC.DivIcon(
|
item,
|
`
|
<div class="way-entitys-box">
|
<div class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff; width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
|
工建街
|
</div>
|
<div class="way-sign-box">
|
<img src="https://map.hit.edu.cn/images/roadsign3.png">
|
</div>
|
</div>
|
`
|
)
|
this.wayLayer.addOverlay(divIcon)
|
})
|
|
const positions3 = this.generatePosition(50)
|
positions3.forEach(item => {
|
const billboard = new this.DC.Billboard(item, '/img/leftnav/map-panorama.png')
|
billboard.size = [16, 16]
|
this.sceneLayer.addOverlay(billboard)
|
})
|
|
const positions4 = this.generatePosition(10)
|
positions4.forEach((item, index) => {
|
const label = new this.DC.Label(item, '建筑AED')
|
label.setStyle({
|
fillColor: this.DC.Color.ORANGERED,
|
font: '10px sans-serif',
|
pixelOffset: { x: 0, y: -16 }
|
})
|
this.aedLayer.addOverlay(label)
|
|
const billboard = new this.DC.Billboard(item, '/img/leftnav/map-aed.png')
|
billboard.size = [16, 16]
|
|
this.aedLayer.addOverlay(billboard)
|
})
|
|
const positions5 = this.generatePosition(120)
|
positions5.forEach((item, index) => {
|
const divIcon = new this.DC.DivIcon(
|
item,
|
`
|
<div class="park-entitys-box">
|
<div class="park-title" alt="校外街路侧停车场">
|
</div>
|
<div class="park-sign-box">
|
<div>
|
<img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="校外街路侧停车场" title="校外街路侧停车场">
|
</div>
|
<div>
|
<img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
|
</div>
|
</div>
|
</div>
|
`
|
)
|
this.parkLayer.addOverlay(divIcon)
|
})
|
|
const positions6 = this.generatePosition(10)
|
positions6.forEach((item, index) => {
|
const label = new this.DC.Label(item, '数字视觉')
|
label.setStyle({
|
fillColor: this.DC.Color.PURPLE,
|
outlineColor: this.DC.Color.WHITE, // 边框颜色
|
outlineWidth: 2, // 边框大小，
|
font: '10px sans-serif',
|
pixelOffset: { x: 0, y: -16 }
|
})
|
this.comeLayer.addOverlay(label)
|
|
const billboard = new this.DC.Billboard(item, '/img/leftnav/map-activity.png')
|
billboard.size = [16, 16]
|
|
this.comeLayer.addOverlay(billboard)
|
})
|
|
this.tagLayer.show = false
|
this.wayLayer.show = false
|
this.sceneLayer.show = false
|
this.aedLayer.show = false
|
this.parkLayer.show = false
|
this.comeLayer.show = false
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang='scss'>
|
.left-nav {
|
position: fixed;
|
top: 15%;
|
right: 6%;
|
z-index: 1;
|
li {
|
margin-bottom: 8px;
|
font-weight: 400;
|
display: block;
|
width: 98px;
|
height: 33px;
|
line-height: 33px;
|
background-color: #fff;
|
border-radius: 17px;
|
text-align: center;
|
font-size: 0;
|
cursor: pointer;
|
|
img {
|
width: 24px;
|
height: 24px;
|
vertical-align: middle;
|
margin-right: 10px;
|
image-rendering: -moz-crisp-edges;
|
image-rendering: -o-crisp-edges;
|
image-rendering: -webkit-optimize-contrast;
|
image-rendering: crisp-edges;
|
-ms-interpolation-mode: nearest-neighbor;
|
}
|
|
span {
|
display: inline-block;
|
vertical-align: middle;
|
font-size: 14px;
|
color: #2f2f2f;
|
}
|
}
|
}
|
</style>
|
