From e7c6c4eecddae9515b0cd1be68335690843df3d1 Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Wed, 02 Mar 2022 15:19:23 +0800
Subject: [PATCH] +自定义标签的添加和删除
---
src/components/leftNav/index.vue | 140 ++++++++++++++++++++++++++++++++++------------
1 files changed, 103 insertions(+), 37 deletions(-)
diff --git a/src/components/leftNav/index.vue b/src/components/leftNav/index.vue
index 9468241..c828f40 100644
--- a/src/components/leftNav/index.vue
+++ b/src/components/leftNav/index.vue
@@ -14,7 +14,7 @@
<script>
-import { getAEDkList, getParkList, getComeList, getSceneList, getWayList, getTagList } from '@/api/pc/leftNav/index'
+import { getLifeList, getMonitorList, getSceneList, getWayList, getTagList } from '@/api/pc/leftNav/index'
export default {
name: 'leftNav',
@@ -23,9 +23,9 @@
return {
leftNavData: [
{
- flag: false,
+ flag: true,
label: '标签',
- img: '/img/leftnav/tag.png',
+ img: '/img/leftnav/tag-checked.png',
normal: '/img/leftnav/tag.png',
checked: '/img/leftnav/tag-checked.png',
layer: 'tagLayer'
@@ -46,14 +46,14 @@
checked: '/img/leftnav/scene-checked.png',
layer: 'sceneLayer'
},
- // {
- // flag: false,
- // label: '监控',
- // img: '/img/leftnav/monitor.png',
- // normal: '/img/leftnav/monitor.png',
- // checked: '/img/leftnav/monitor-checked.png',
- // layer: 'sceneLayer'
- // },
+ {
+ flag: false,
+ label: '监控',
+ img: '/img/leftnav/monitor.png',
+ normal: '/img/leftnav/monitor.png',
+ checked: '/img/leftnav/monitor-checked.png',
+ layer: 'monitorLayer'
+ },
// {
// flag: false,
// label: '活动',
@@ -62,14 +62,14 @@
// 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: 'AED',
+ // img: '/img/leftnav/aed.png',
+ // normal: '/img/leftnav/aed.png',
+ // checked: '/img/leftnav/aed-checked.png',
+ // layer: 'aedLayer'
+ // },
{
flag: false,
label: '停车',
@@ -92,6 +92,7 @@
tagLayer: null,
wayLayer: null,
sceneLayer: null,
+ monitorLayer: null,
activityLayer: null,
aedLayer: null,
parkLayer: null,
@@ -132,12 +133,12 @@
viewer.addLayer(this.tagLayer)
this.wayLayer = new this.DC.HtmlLayer('wayLayer')
viewer.addLayer(this.wayLayer)
- this.sceneLayer = new this.DC.VectorLayer('sceneLayer')
+ this.sceneLayer = new this.DC.HtmlLayer('sceneLayer')
viewer.addLayer(this.sceneLayer)
-
+ this.monitorLayer = new this.DC.HtmlLayer('monitorLayer')
+ viewer.addLayer(this.monitorLayer)
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')
@@ -158,9 +159,10 @@
</div>
`
)
+
this.tagLayer.addOverlay(divIcon)
})
- this.tagLayer.show = false
+ // this.tagLayer.show = false
})
getWayList().then(res => {
@@ -169,7 +171,7 @@
new that.DC.Position(Number(item.jd), Number(item.wd), 0),
`
<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 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">
@@ -183,16 +185,81 @@
this.wayLayer.show = false
})
+ getMonitorList().then(res => {
+ res.data.data.forEach(item => {
+ const divIcon = new this.DC.DivIcon(
+ new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+ `
+ <div class="monitor-entitys-box">
+ <div>${item.mechanismname}</div>
+ <img class="monitor-entitys-box" src="/img/leftnav/map-monitor.png" alt="">
+ </div>
+ `
+ )
+ divIcon.attrParams = item
+ this.monitorLayer.addOverlay(divIcon)
+
+ divIcon.on(that.DC.MouseEventType.CLICK, e => {
+ this.$store.commit('SET_PANORAMAPOPUP', false)
+ this.$store.commit('SET_DETAILSPOPUP', false)
+ this.$store.commit('SET_STATENAME', e.overlay.attrParams.mechanismname)
+ this.$store.commit('SET_MONITORURL', e.overlay.attrParams.videourl)
+ // eslint-disable-next-line new-cap
+ var positions = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position.fromArray([Number(item.jd), Number(item.wd), 0, 0, -90, 0]))
+ this.viewer.scene.globe.depthTestAgainstTerrain = false
+ // eslint-disable-next-line no-unused-vars
+ var monitor = new this.DC.PanoramaBox(this.viewer, {
+ domId: 'MonitorBox',
+ position: [
+ positions
+ ]
+ })
+
+ this.$store.commit('SET_MONITORPOPUP', true)
+ })
+ })
+
+ this.monitorLayer.show = false
+ })
+
getSceneList().then(res => {
res.data.data.forEach(item => {
- const billboard = new this.DC.Billboard(new that.DC.Position(Number(item.jd), Number(item.wd), 0), '/img/leftnav/map-panorama.png')
- billboard.size = [20, 20]
- this.sceneLayer.addOverlay(billboard)
+ const divIcon = new this.DC.DivIcon(
+ new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+ `
+ <div class="scene-entitys-box">
+ <div>${item.mechanismname}</div>
+ <img src="/img/leftnav/map-panorama.png" alt="">
+ </div>
+ `
+ )
+ divIcon.attrParams = item
+ this.sceneLayer.addOverlay(divIcon)
+
+ divIcon.on(that.DC.MouseEventType.CLICK, e => {
+ this.$store.commit('SET_DETAILSPOPUP', false)
+ this.$store.commit('SET_MONITORPOPUP', false)
+ this.$store.commit('SET_STATENAME', e.overlay.attrParams.mechanismname)
+ this.$store.commit('SET_PANORAMAURL', e.overlay.attrParams.panoramaurl)
+ // eslint-disable-next-line new-cap
+ var positions = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position.fromArray([Number(item.jd), Number(item.wd), 0, 0, -90, 0]))
+ this.viewer.scene.globe.depthTestAgainstTerrain = false
+ // eslint-disable-next-line no-unused-vars
+ var panorama = new this.DC.PanoramaBox(this.viewer, {
+ domId: 'PanoramaBox',
+ position: [
+ positions
+ ]
+ })
+
+ this.$store.commit('SET_PANORAMAPOPUP', true)
+ })
})
+
this.sceneLayer.show = false
})
- getAEDkList().then(res => {
+ getLifeList({ lifetype: 9 }).then(res => {
res.data.data.forEach(item => {
const label = new this.DC.Label(new that.DC.Position(Number(item.jd), Number(item.wd), 0), item.mechanismname)
label.setStyle({
@@ -213,7 +280,7 @@
this.aedLayer.show = false
})
- getParkList().then(res => {
+ getLifeList({ lifetype: 11 }).then(res => {
res.data.data.forEach(item => {
const divIcon = new this.DC.DivIcon(
new that.DC.Position(Number(item.jd), Number(item.wd), 0),
@@ -237,7 +304,7 @@
this.parkLayer.show = false
})
- getComeList().then(res => {
+ getLifeList({ lifetype: 12 }).then(res => {
res.data.data.forEach(item => {
const label = new that.DC.Label(new that.DC.Position(Number(item.jd), Number(item.wd), 0), item.mechanismname)
label.setStyle({
@@ -246,21 +313,20 @@
outlineColor: that.DC.Color.WHITE, // 边框颜色
outlineWidth: 8, // 边框大小，
font: '14px sans-serif',
- pixelOffset: { x: 0, y: -24 }
+ pixelOffset: { x: 0, y: -40 }
})
that.comeLayer.addOverlay(label)
const billboard = new that.DC.Billboard(new that.DC.Position(Number(item.jd), Number(item.wd), 0), '/img/leftnav/map-activity.png')
billboard.size = [20, 20]
+ billboard.setStyle({
+ pixelOffset: { x: 0, y: -16 }
+ })
that.comeLayer.addOverlay(billboard)
})
this.comeLayer.show = false
})
-
- this.tagLayer.show = false
- this.wayLayer.show = false
- this.sceneLayer.show = false
}
}
}
@@ -269,8 +335,8 @@
<style scoped lang='scss'>
.left-nav {
position: fixed;
- top: 100px;
- right: 20px;
+ top: 160px;
+ right: 30px;
// bottom: 20px;
// left: 0;
z-index: 1;
--
Gitblit v1.9.3