<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>
|
<li class="addIcons" @click="addIcons">
|
<!-- <img :style="[imgStyle]" :src="item.img" alt="" /> -->
|
<span>+</span>
|
</li>
|
</ul>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getLifeList,
|
getMonitorList,
|
getSceneList,
|
getWayList,
|
getTagList
|
} from '@/api/pc/leftNav/index'
|
import { mapGetters } from 'vuex'
|
|
const LeftNavLayer = {
|
leftTagLayer: null,
|
leftWayLayer: null,
|
leftSceneLayer: null,
|
leftMonitorLayer: null,
|
leftActivityLayer: null,
|
leftAedLayer: null,
|
leftParkLayer: null,
|
leftComeLayer: null
|
}
|
|
export default {
|
name: 'leftNav',
|
computed: {
|
...mapGetters([
|
'closeMapClick', // 关闭地图点击，防止新增标签误触
|
'addIconsLayerIconPopup', // 传送关闭编辑窗口，刷新标签数据
|
'calenderShow',
|
'twoOrThree'
|
])
|
},
|
data () {
|
return {
|
leftNavData: [
|
{
|
flag: true,
|
label: '标签',
|
img: '/img/leftnav/tag-checked.png',
|
normal: '/img/leftnav/tag.png',
|
checked: '/img/leftnav/tag-checked.png',
|
layer: 'leftTagLayer'
|
},
|
{
|
flag: false,
|
label: '道路',
|
img: '/img/leftnav/way.png',
|
normal: '/img/leftnav/way.png',
|
checked: '/img/leftnav/way-checked.png',
|
layer: 'leftWayLayer'
|
},
|
{
|
flag: false,
|
label: '实景',
|
img: '/img/leftnav/scene.png',
|
normal: '/img/leftnav/scene.png',
|
checked: '/img/leftnav/scene-checked.png',
|
layer: 'leftSceneLayer'
|
},
|
{
|
flag: false,
|
label: '监控',
|
img: '/img/leftnav/monitor.png',
|
normal: '/img/leftnav/monitor.png',
|
checked: '/img/leftnav/monitor-checked.png',
|
layer: 'leftMonitorLayer'
|
},
|
{
|
flag: false,
|
label: '活动',
|
img: '/img/leftnav/activity.png',
|
normal: '/img/leftnav/activity.png',
|
checked: '/img/leftnav/activity-checked.png',
|
layer: 'leftActivityLayer'
|
},
|
// {
|
// flag: false,
|
// label: 'AED',
|
// img: '/img/leftnav/aed.png',
|
// normal: '/img/leftnav/aed.png',
|
// checked: '/img/leftnav/aed-checked.png',
|
// layer: 'leftAedLayer'
|
// },
|
{
|
flag: false,
|
label: '停车',
|
img: '/img/leftnav/park.png',
|
normal: '/img/leftnav/park.png',
|
checked: '/img/leftnav/park-checked.png',
|
layer: 'leftParkLayer'
|
},
|
{
|
flag: false,
|
label: '出入',
|
img: '/img/leftnav/come.png',
|
normal: '/img/leftnav/come.png',
|
checked: '/img/leftnav/come-checked.png',
|
layer: 'leftComeLayer'
|
}
|
]
|
}
|
},
|
created () {
|
},
|
mounted () {
|
// 初始化新增标签图层
|
// this.$store.commit("createAddIconsLayerIconLayer", { viewer: global.viewer });
|
},
|
watch: {
|
addIconsLayerIconPopup () {
|
if (!this.addIconsLayerIconPopup) {
|
this.reself()
|
}
|
},
|
calenderShow: {
|
handler (newData, oldData) {
|
if (newData == false) {
|
this.leftNavData.forEach(item => {
|
if (item.label == '活动') {
|
item.flag = false
|
item.img = item.normal
|
}
|
})
|
}
|
},
|
immediate: true
|
},
|
twoOrThree: {
|
handler (newData, oldData) {
|
if (newData == '三 维') {
|
for (const key in LeftNavLayer) {
|
if (LeftNavLayer[key] != null) {
|
LeftNavLayer[key].eachOverlay((item) => {
|
if (item.attr.params.x && item.attr.params.x != '') {
|
const position = this.coordinate(item.attr.params.x)
|
item.position = new global.DC.Position(Number(position.lng), Number(position.lat), 0)
|
} else {
|
item.position = new global.DC.Position(Number(item.position.lng), Number(item.position.lat), 0)
|
}
|
})
|
}
|
}
|
} else {
|
for (const key in LeftNavLayer) {
|
if (LeftNavLayer[key] != null) {
|
LeftNavLayer[key].eachOverlay((item) => {
|
item.position = new global.DC.Position(Number(item.attr.params.jd), Number(item.attr.params.wd), 50)
|
})
|
}
|
}
|
}
|
},
|
immediate: true
|
}
|
},
|
methods: {
|
reself () {
|
const that = this
|
if (LeftNavLayer.leftTagLayer) {
|
LeftNavLayer.leftTagLayer.clear()
|
}
|
|
getTagList().then((res) => {
|
res.data.data.forEach((item) => {
|
const divIcon = new global.DC.DivIcon(
|
new global.DC.Position(Number(item.jd), Number(item.wd), 0),
|
`
|
<div class="tag-entitys-box">
|
<div class="tag-content">
|
${item.mechanismname}
|
</div>
|
<div class="tag-angle-content">
|
<img src="/img/icon/tarrow_xq.png">
|
</div>
|
</div>
|
`
|
)
|
// 订阅事件
|
divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
|
if (that.closeMapClick) {
|
return
|
}
|
that.openPopups({
|
lng: e.overlay.position.lng,
|
lat: e.overlay.position.lat,
|
item: item
|
})
|
})
|
LeftNavLayer.leftTagLayer.addOverlay(divIcon)
|
if (!this.leftNavData[0].flag) {
|
LeftNavLayer.leftTagLayer.show = false
|
}
|
})
|
})
|
},
|
|
coordinate (item) {
|
const arr = item.split(',')
|
|
return {
|
lng: arr[0],
|
lat: arr[1]
|
}
|
},
|
|
addIcons () {
|
if (this.closeMapClick) {
|
// 若正在加标签，退出
|
return
|
}
|
// 加标签
|
this.$store.dispatch('chouseAddIconsLayerIcon', {
|
// 新增标签 选定位置
|
viewer: global.viewer,
|
fn: (lnglat) => {
|
// 返回选定坐标
|
// 添加空白标签
|
this.$store.dispatch('addIconsLayerIcon', {
|
lnglat: lnglat,
|
viewer: global.viewer
|
})
|
}
|
})
|
},
|
|
generatePosition (num) {
|
const list = []
|
for (let i = 0; i < num; i++) {
|
const lng = 115.86271917 + Math.random() * 0.01
|
const lat = 28.73615593 + Math.random() * 0.02
|
list.push(new global.DC.Position(lng, lat, 0))
|
}
|
return list
|
},
|
|
leftNavClick (item) {
|
item.flag = !item.flag
|
if (item.flag == true) {
|
item.img = item.checked
|
} else {
|
item.img = item.normal
|
}
|
|
if (item.label == '活动') {
|
this.$store.commit('SET_CALENDERSHOW', item.flag)
|
} else {
|
if (item.flag == true) {
|
LeftNavLayer[item.layer].show = true
|
} else {
|
LeftNavLayer[item.layer].show = false
|
}
|
}
|
},
|
|
initialize () {
|
var that = this
|
global.viewer.scene.globe.depthTestAgainstTerrain = false
|
|
LeftNavLayer.leftTagLayer = new global.DC.HtmlLayer('leftTagLayer')
|
global.viewer.addLayer(LeftNavLayer.leftTagLayer)
|
|
LeftNavLayer.leftWayLayer = new global.DC.HtmlLayer('leftWayLayer')
|
global.viewer.addLayer(LeftNavLayer.leftWayLayer)
|
|
LeftNavLayer.leftSceneLayer = new global.DC.HtmlLayer('leftSceneLayer')
|
global.viewer.addLayer(LeftNavLayer.leftSceneLayer)
|
|
LeftNavLayer.leftMonitorLayer = new global.DC.HtmlLayer('leftMonitorLayer')
|
global.viewer.addLayer(LeftNavLayer.leftMonitorLayer)
|
|
LeftNavLayer.leftAedLayer = new global.DC.VectorLayer('leftAedLayer')
|
global.viewer.addLayer(LeftNavLayer.leftAedLayer)
|
|
LeftNavLayer.leftParkLayer = new global.DC.HtmlLayer('leftParkLayer')
|
global.viewer.addLayer(LeftNavLayer.leftParkLayer)
|
|
LeftNavLayer.leftComeLayer = new global.DC.VectorLayer('leftComeLayer')
|
global.viewer.addLayer(LeftNavLayer.leftComeLayer)
|
|
getTagList().then((res) => {
|
res.data.data.forEach((item) => {
|
let obj = {}
|
if (item.x && item.x != '') {
|
const position = that.coordinate(item.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: item.jd, lat: item.wd
|
}
|
}
|
|
const divIcon = new global.DC.DivIcon(
|
new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
|
`
|
<div class="tag-entitys-box">
|
<div class="tag-content">
|
${item.mechanismname}
|
</div>
|
<div class="tag-angle-content">
|
<img src="/img/icon/tarrow_xq.png">
|
</div>
|
</div>
|
`
|
)
|
|
divIcon.attr.params = item
|
|
// 订阅事件
|
divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
|
if (that.closeMapClick) {
|
return
|
}
|
// console.log(item, "see11111");
|
that.openPopups({
|
lng: Number(obj.lng),
|
lat: Number(obj.lat),
|
item: item
|
})
|
})
|
LeftNavLayer.leftTagLayer.addOverlay(divIcon)
|
})
|
// LeftNavLayer.leftTagLayer.show = false
|
})
|
|
getWayList().then((res) => {
|
res.data.data.forEach((item) => {
|
let obj = {}
|
if (item.x && item.x != '') {
|
const position = that.coordinate(item.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: item.jd, lat: item.wd
|
}
|
}
|
|
const divIcon = new global.DC.DivIcon(
|
new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
|
`
|
<div class="way-entitys-box">
|
<div class="way-title" style="border: white 1px solid; font-size: 0.875rem; background: #0066ff; width: 18px; line-height: 14px; padding: 6px 2px 6px 2px; color: white; text-align: center;">
|
${item.roadname}
|
</div>
|
<div class="way-sign-box">
|
<img src="/img/icon/roadsign3.png">
|
</div>
|
</div>
|
`
|
)
|
|
divIcon.attr.params = item
|
|
LeftNavLayer.leftWayLayer.addOverlay(divIcon)
|
})
|
LeftNavLayer.leftWayLayer.show = false
|
})
|
|
getMonitorList().then((res) => {
|
res.data.data.records.forEach((item) => {
|
let obj = {}
|
if (item.x && item.x != '') {
|
const position = that.coordinate(item.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: item.jd, lat: item.wd
|
}
|
}
|
|
const divIcon = new global.DC.DivIcon(
|
new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
|
`
|
<div class="monitor-entitys-box">
|
<div>${item.vrname}</div>
|
<img class="monitor-entitys-box" src="/img/leftnav/map-monitor.png" alt="">
|
</div>
|
`
|
)
|
|
divIcon.attr.params = item
|
|
divIcon.attrParams = item
|
LeftNavLayer.leftMonitorLayer.addOverlay(divIcon)
|
|
divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
|
global.viewer.flyToPosition(
|
new global.DC.Position(Number(item.jd), Number(item.wd), Number(300), Number(0), Number(-90), Number(0)),
|
function () { },
|
2
|
)
|
|
this.$store.commit('SET_PANORAMAPOPUP', false)
|
this.$store.commit('SET_DETAILSPOPUP', false)
|
this.$store.commit(
|
'SET_STATENAME',
|
e.overlay.attrParams.vrname
|
)
|
this.$store.commit('SET_MONITORURL', e.overlay.attrParams.vrurl)
|
// eslint-disable-next-line new-cap
|
var positions = global.DC.Transform.transformWGS84ToCartesian(
|
// eslint-disable-next-line new-cap
|
new global.DC.Position.fromArray([
|
Number(item.jd),
|
Number(item.wd),
|
0,
|
0,
|
-90,
|
0
|
])
|
)
|
global.viewer.scene.globe.depthTestAgainstTerrain = false
|
// eslint-disable-next-line no-unused-vars
|
var monitor = new global.DC.PanoramaBox(global.viewer, {
|
domId: 'MonitorBox',
|
position: [positions]
|
})
|
|
this.$store.commit('SET_MONITORPOPUP', true)
|
})
|
})
|
|
LeftNavLayer.leftMonitorLayer.show = false
|
})
|
|
getSceneList().then((res) => {
|
res.data.data.records.forEach((item) => {
|
let obj = {}
|
if (item.x && item.x != '') {
|
const position = that.coordinate(item.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: item.jd, lat: item.wd
|
}
|
}
|
|
const divIcon = new global.DC.DivIcon(
|
new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
|
`
|
<div class="scene-entitys-box">
|
<div>${item.vrname}</div>
|
<img src="/img/leftnav/map-panorama.png" alt="">
|
</div>
|
`
|
)
|
|
divIcon.attr.params = item
|
|
divIcon.attrParams = item
|
LeftNavLayer.leftSceneLayer.addOverlay(divIcon)
|
|
divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
|
global.viewer.flyToPosition(
|
new global.DC.Position(Number(item.jd), Number(item.wd), Number(300), Number(0), Number(-90), Number(0)),
|
function () { },
|
2
|
)
|
|
this.$store.commit('SET_DETAILSPOPUP', false)
|
this.$store.commit('SET_MONITORPOPUP', false)
|
this.$store.commit(
|
'SET_STATENAME',
|
e.overlay.attrParams.mechanvrnameismname
|
)
|
this.$store.commit(
|
'SET_PANORAMAURL',
|
e.overlay.attrParams.vrurl
|
)
|
// eslint-disable-next-line new-cap
|
var positions = global.DC.Transform.transformWGS84ToCartesian(
|
// eslint-disable-next-line new-cap
|
new global.DC.Position.fromArray([
|
Number(item.jd),
|
Number(item.wd),
|
0,
|
0,
|
-90,
|
0
|
])
|
)
|
global.viewer.scene.globe.depthTestAgainstTerrain = false
|
// eslint-disable-next-line no-unused-vars
|
var panorama = new global.DC.PanoramaBox(global.viewer, {
|
domId: 'PanoramaBox',
|
position: [positions]
|
})
|
|
this.$store.commit('SET_PANORAMAPOPUP', true)
|
})
|
})
|
|
LeftNavLayer.leftSceneLayer.show = false
|
})
|
|
getLifeList({ lifetype: 9 }).then((res) => {
|
res.data.data.forEach((item) => {
|
let obj = {}
|
if (item.x && item.x != '') {
|
const position = that.coordinate(item.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: item.jd, lat: item.wd
|
}
|
}
|
|
const label = new global.DC.Label(
|
new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
|
item.mechanismname
|
)
|
|
label.setStyle({
|
fillColor: global.DC.Color.CRIMSON,
|
style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
|
outlineColor: global.DC.Color.WHITE, // 边框颜色
|
outlineWidth: 8, // 边框大小，
|
font: '14px sans-serif',
|
pixelOffset: { x: 0, y: -24 }
|
})
|
|
label.attr.params = item
|
|
LeftNavLayer.leftAedLayer.addOverlay(label)
|
|
const billboard = new global.DC.Billboard(
|
new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
|
'/img/leftnav/map-aed.png'
|
)
|
billboard.size = [20, 20]
|
|
billboard.attr.params = item
|
|
LeftNavLayer.leftAedLayer.addOverlay(billboard)
|
})
|
LeftNavLayer.leftAedLayer.show = false
|
})
|
|
getLifeList({ lifetype: 11 }).then((res) => {
|
res.data.data.forEach((item) => {
|
let obj = {}
|
if (item.x && item.x != '') {
|
const position = that.coordinate(item.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: item.jd, lat: item.wd
|
}
|
}
|
|
const divIcon = new global.DC.DivIcon(
|
new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
|
`
|
<div class="park-entitys-box">
|
<div class="park-title" alt="${item.mechanismname}">
|
</div>
|
<div class="park-sign-box">
|
<div>
|
<img src="/img/icon/p-biao.png" width="14" height="14" alt="${item.mechanismname}" title="${item.mechanismname}">
|
</div>
|
<div>
|
<img src="/img/icon/roadsign.png" width="5" height="21">
|
</div>
|
</div>
|
</div>
|
`
|
)
|
|
divIcon.attr.params = item
|
|
LeftNavLayer.leftParkLayer.addOverlay(divIcon)
|
})
|
LeftNavLayer.leftParkLayer.show = false
|
})
|
|
getLifeList({ lifetype: 12 }).then((res) => {
|
res.data.data.forEach((item) => {
|
let obj = {}
|
if (item.x && item.x != '') {
|
const position = that.coordinate(item.x)
|
obj = {
|
lng: position.lng, lat: position.lat
|
}
|
} else {
|
obj = {
|
lng: item.jd, lat: item.wd
|
}
|
}
|
|
const label = new global.DC.Label(
|
new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
|
item.mechanismname
|
)
|
label.setStyle({
|
fillColor: global.DC.Color.FUCHSIA,
|
style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
|
outlineColor: global.DC.Color.WHITE, // 边框颜色
|
outlineWidth: 8, // 边框大小，
|
font: '14px sans-serif',
|
pixelOffset: { x: 0, y: -40 }
|
})
|
|
label.attr.params = item
|
|
LeftNavLayer.leftComeLayer.addOverlay(label)
|
|
const billboard = new global.DC.Billboard(
|
new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
|
'/img/leftnav/map-activity.png'
|
)
|
billboard.size = [20, 20]
|
billboard.setStyle({
|
pixelOffset: { x: 0, y: -16 }
|
})
|
|
billboard.attr.params = item
|
|
LeftNavLayer.leftComeLayer.addOverlay(billboard)
|
})
|
LeftNavLayer.leftComeLayer.show = false
|
})
|
},
|
|
openPopups (value) {
|
var popup = new global.DC.DivForms(global.viewer, {
|
domId: 'divFormsDomBox',
|
position: [
|
global.DC.Transform.transformWGS84ToCartesian(
|
new global.DC.Position(
|
Number(value.lng),
|
Number(value.lat),
|
Number(value.alt || 0)
|
)
|
)
|
]
|
})
|
this.$store.dispatch('setOurDataInPoput', value)
|
this.$store.dispatch('pcFlyView', {
|
jd: value.lng,
|
wd: value.lat,
|
viewer: global.viewer
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.left-nav {
|
position: fixed;
|
top: 160px;
|
right: 30px;
|
// bottom: 20px;
|
// left: 0;
|
z-index: 1;
|
ul {
|
// display: flex;
|
li {
|
// margin: 0 8px;
|
margin-bottom: 12px;
|
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;
|
}
|
}
|
}
|
}
|
.addIcons {
|
position: absolute;
|
top: 0;
|
left: -60px;
|
width: 50px !important;
|
span {
|
font-size: 25px !important;
|
}
|
}
|
.avtiveAddIcons {
|
background-color: aqua;
|
}
|
</style>
|
