From 81f54040c2cb65537c6c6e1db8358a39a57dea0d Mon Sep 17 00:00:00 2001
From: mayisheng <admin>
Date: Mon, 15 Aug 2022 16:14:01 +0800
Subject: [PATCH] 1
---
src/components/leftNav/index.vue | 396 ++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 295 insertions(+), 101 deletions(-)
diff --git a/src/components/leftNav/index.vue b/src/components/leftNav/index.vue
index 9d8337d..3febdc5 100644
--- a/src/components/leftNav/index.vue
+++ b/src/components/leftNav/index.vue
@@ -22,12 +22,26 @@
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' // 传送关闭编辑窗口，刷新标签数据
+ 'addIconsLayerIconPopup', // 传送关闭编辑窗口，刷新标签数据
+ 'calenderShow',
+ 'twoOrThree'
])
},
data () {
@@ -39,7 +53,7 @@
img: '/img/leftnav/tag-checked.png',
normal: '/img/leftnav/tag.png',
checked: '/img/leftnav/tag-checked.png',
- layer: 'tagLayer'
+ layer: 'leftTagLayer'
},
{
flag: false,
@@ -47,7 +61,7 @@
img: '/img/leftnav/way.png',
normal: '/img/leftnav/way.png',
checked: '/img/leftnav/way-checked.png',
- layer: 'wayLayer'
+ layer: 'leftWayLayer'
},
{
flag: false,
@@ -55,31 +69,31 @@
img: '/img/leftnav/scene.png',
normal: '/img/leftnav/scene.png',
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: 'monitorLayer'
+ layer: 'leftSceneLayer'
},
// {
// flag: false,
- // label: '活动',
- // img: '/img/leftnav/activity.png',
- // normal: '/img/leftnav/activity.png',
- // checked: '/img/leftnav/activity-checked.png',
- // layer: 'activityLayer'
+ // 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: 'aedLayer'
+ // layer: 'leftAedLayer'
// },
{
flag: false,
@@ -87,7 +101,7 @@
img: '/img/leftnav/park.png',
normal: '/img/leftnav/park.png',
checked: '/img/leftnav/park-checked.png',
- layer: 'parkLayer'
+ layer: 'leftParkLayer'
},
{
flag: false,
@@ -95,17 +109,9 @@
img: '/img/leftnav/come.png',
normal: '/img/leftnav/come.png',
checked: '/img/leftnav/come-checked.png',
- layer: 'comeLayer'
+ layer: 'leftComeLayer'
}
- ],
- tagLayer: null,
- wayLayer: null,
- sceneLayer: null,
- monitorLayer: null,
- activityLayer: null,
- aedLayer: null,
- parkLayer: null,
- comeLayer: null
+ ]
}
},
created () {
@@ -119,14 +125,55 @@
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 (this.tagLayer) {
- this.tagLayer.clear()
+ if (LeftNavLayer.leftTagLayer) {
+ LeftNavLayer.leftTagLayer.clear()
}
+
getTagList().then((res) => {
res.data.data.forEach((item) => {
const divIcon = new global.DC.DivIcon(
@@ -137,7 +184,7 @@
${item.mechanismname}
</div>
<div class="tag-angle-content">
- <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
+ <img src="/img/icon/tarrow_xq.png">
</div>
</div>
`
@@ -153,13 +200,23 @@
item: item
})
})
- this.tagLayer.addOverlay(divIcon)
+ LeftNavLayer.leftTagLayer.addOverlay(divIcon)
if (!this.leftNavData[0].flag) {
- this.tagLayer.show = false
+ LeftNavLayer.leftTagLayer.show = false
}
})
})
},
+
+ coordinate (item) {
+ const arr = item.split(',')
+
+ return {
+ lng: arr[0],
+ lat: arr[1]
+ }
+ },
+
addIcons () {
if (this.closeMapClick) {
// 若正在加标签，退出
@@ -179,6 +236,7 @@
}
})
},
+
generatePosition (num) {
const list = []
for (let i = 0; i < num; i++) {
@@ -188,90 +246,158 @@
}
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
+ }
+
+ 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
- this.tagLayer = new global.DC.HtmlLayer('tagLayer')
- global.viewer.addLayer(this.tagLayer)
- this.wayLayer = new global.DC.HtmlLayer('wayLayer')
- global.viewer.addLayer(this.wayLayer)
- this.sceneLayer = new global.DC.HtmlLayer('sceneLayer')
- global.viewer.addLayer(this.sceneLayer)
- this.monitorLayer = new global.DC.HtmlLayer('monitorLayer')
- global.viewer.addLayer(this.monitorLayer)
- this.aedLayer = new global.DC.VectorLayer('aedLayer')
- global.viewer.addLayer(this.aedLayer)
- this.parkLayer = new global.DC.HtmlLayer('parkLayer')
- global.viewer.addLayer(this.parkLayer)
- this.comeLayer = new global.DC.VectorLayer('comeLayer')
- global.viewer.addLayer(this.comeLayer)
+
+ 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(item.jd), Number(item.wd), 0),
+ 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="https://map.hit.edu.cn/images/tarrow_xq.png">
- </div>
- </div>
- `
+ <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
}
+
+ if (that.twoOrThree == '三 维') {
+ that.openPopups({
+ lng: Number(obj.lng),
+ lat: Number(obj.lat),
+ item: item
+ })
+ } else {
+ that.openPopups({
+ lng: Number(item.jd),
+ lat: Number(item.wd),
+ item: item
+ })
+ }
// console.log(item, "see11111");
- that.openPopups({
- lng: e.overlay.position.lng,
- lat: e.overlay.position.lat,
- item: item
- })
})
- this.tagLayer.addOverlay(divIcon)
+ LeftNavLayer.leftTagLayer.addOverlay(divIcon)
})
- // this.tagLayer.show = false
+ // 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(item.jd), Number(item.wd), 0),
+ 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="https://map.hit.edu.cn/images/roadsign3.png">
- </div>
- </div>
- `
+ <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>
+ `
)
- this.wayLayer.addOverlay(divIcon)
+
+ divIcon.attr.params = item
+
+ LeftNavLayer.leftWayLayer.addOverlay(divIcon)
})
- this.wayLayer.show = false
+ 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(item.jd), Number(item.wd), 0),
+ new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
`
<div class="monitor-entitys-box">
<div>${item.vrname}</div>
@@ -279,8 +405,11 @@
</div>
`
)
+
+ divIcon.attr.params = item
+
divIcon.attrParams = item
- this.monitorLayer.addOverlay(divIcon)
+ LeftNavLayer.leftMonitorLayer.addOverlay(divIcon)
divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
global.viewer.flyToPosition(
@@ -319,13 +448,25 @@
})
})
- this.monitorLayer.show = false
+ 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(item.jd), Number(item.wd), 0),
+ new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
`
<div class="scene-entitys-box">
<div>${item.vrname}</div>
@@ -333,8 +474,11 @@
</div>
`
)
+
+ divIcon.attr.params = item
+
divIcon.attrParams = item
- this.sceneLayer.addOverlay(divIcon)
+ LeftNavLayer.leftSceneLayer.addOverlay(divIcon)
divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
global.viewer.flyToPosition(
@@ -376,15 +520,28 @@
})
})
- this.sceneLayer.show = false
+ 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(item.jd), Number(item.wd), 0),
+ 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,
@@ -393,47 +550,79 @@
font: '14px sans-serif',
pixelOffset: { x: 0, y: -24 }
})
- this.aedLayer.addOverlay(label)
+
+ label.attr.params = item
+
+ LeftNavLayer.leftAedLayer.addOverlay(label)
const billboard = new global.DC.Billboard(
- new global.DC.Position(Number(item.jd), Number(item.wd), 0),
+ new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
'/img/leftnav/map-aed.png'
)
billboard.size = [20, 20]
- this.aedLayer.addOverlay(billboard)
+ billboard.attr.params = item
+
+ LeftNavLayer.leftAedLayer.addOverlay(billboard)
})
- this.aedLayer.show = false
+ 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(item.jd), Number(item.wd), 0),
+ 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="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="${item.mechanismname}" title="${item.mechanismname}">
+ <img src="/img/icon/p-biao.png" width="14" height="14" alt="${item.mechanismname}" title="${item.mechanismname}">
</div>
<div>
- <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
+ <img src="/img/icon/roadsign.png" width="5" height="21">
</div>
</div>
</div>
`
)
- this.parkLayer.addOverlay(divIcon)
+
+ divIcon.attr.params = item
+
+ LeftNavLayer.leftParkLayer.addOverlay(divIcon)
})
- this.parkLayer.show = false
+ 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(item.jd), Number(item.wd), 0),
+ new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
item.mechanismname
)
label.setStyle({
@@ -444,10 +633,13 @@
font: '14px sans-serif',
pixelOffset: { x: 0, y: -40 }
})
- that.comeLayer.addOverlay(label)
+
+ label.attr.params = item
+
+ LeftNavLayer.leftComeLayer.addOverlay(label)
const billboard = new global.DC.Billboard(
- new global.DC.Position(Number(item.jd), Number(item.wd), 0),
+ new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
'/img/leftnav/map-activity.png'
)
billboard.size = [20, 20]
@@ -455,11 +647,14 @@
pixelOffset: { x: 0, y: -16 }
})
- that.comeLayer.addOverlay(billboard)
+ billboard.attr.params = item
+
+ LeftNavLayer.leftComeLayer.addOverlay(billboard)
})
- this.comeLayer.show = false
+ LeftNavLayer.leftComeLayer.show = false
})
},
+
openPopups (value) {
var popup = new global.DC.DivForms(global.viewer, {
domId: 'divFormsDomBox',
@@ -473,7 +668,6 @@
)
]
})
- // console.log(value, "see");
this.$store.dispatch('setOurDataInPoput', value)
this.$store.dispatch('pcFlyView', {
jd: value.lng,
--
Gitblit v1.9.3