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/mobileLeftNav/index.vue | 298 +++++++++++++++++++++++++++++++----------------------------
1 files changed, 155 insertions(+), 143 deletions(-)
diff --git a/src/components/mobileLeftNav/index.vue b/src/components/mobileLeftNav/index.vue
index 136fa1c..43ae1cc 100644
--- a/src/components/mobileLeftNav/index.vue
+++ b/src/components/mobileLeftNav/index.vue
@@ -33,15 +33,16 @@
getListcat // 出入-AED-停车场
} from '@/api/mobile/piont/index'
import { getListVideo } from '@/api/mobile/monitor/index'
-
-window.tagLayer = null
-window.wayLayer = null
-window.sceneLayer = null
-window.videoLayer = null
-window.activityLayer = null
-window.aedLayer = null
-window.parkLayer = null
-window.comeLayer = null
+const layers = {
+ mobileTagLayer: null,
+ wayLayer: null,
+ sceneLayer: null,
+ videoLayer: null,
+ activityLayer: null,
+ aedLayer: null,
+ parkLayer: null,
+ comeLayer: null
+}
export default {
name: 'mobileLeftNav',
watch: {
@@ -63,22 +64,22 @@
if (this.seeRight) {
this.leftNavData[0].flag = false
this.leftNavData[0].img = this.leftNavData[0].checked
- window[this.leftNavData[0].layer].show = true
+ layers[this.leftNavData[0].layer].show = true
} else {
const lnd = this.leftNavData
for (const k in lnd) {
- if (window[this.leftNavData[k].layer]._show) {
+ if (layers[this.leftNavData[k].layer]._show) {
// console.log(lnd[k].label, "所有开启");
this.leftNavData[k].flag = false
this.leftNavData[k].img = this.leftNavData[k].normal
- window[this.leftNavData[k].layer].show = false
+ layers[this.leftNavData[k].layer].show = false
}
}
}
}
},
computed: {
- ...mapGetters(['iconHide', 'dimensionData', 'seeRight'])
+ ...mapGetters(['iconHide', 'dimensionData', 'seeRight', 'pinchFlag'])
},
data () {
return {
@@ -97,9 +98,9 @@
img: '/img/leftnav/tag-checked.png',
normal: '/img/leftnav/tag.png',
checked: '/img/leftnav/tag-checked.png',
- layer: 'tagLayer',
+ layer: 'mobileTagLayer',
methods: getListarchitecture1,
- imgSrc: 'https://map.hit.edu.cn/images/tarrow_xq.png'
+ imgSrc: '/img/icon/tarrow_xq.png'
// imgSrc: "img/mobile/pink.png",
},
{
@@ -166,7 +167,7 @@
layer: 'parkLayer',
methods: getListcat,
type: 11,
- imgSrc: 'https://map.hit.edu.cn/images/p-biao.png'
+ imgSrc: '/img/icon/p-biao.png'
// imgSrc: "img/mobile/popcorn.png",
},
{
@@ -183,7 +184,7 @@
}
]
// viewer: null,
- // tagLayer: null,
+ // mobileTagLayer: null,
// wayLayer: null,
// sceneLayer: null,
// videoLayer: null,
@@ -210,24 +211,24 @@
// console.log(lnd[k].label, "当前点击");
continue
}
- if (window[this.leftNavData[k].layer]._show) {
+ if (layers[this.leftNavData[k].layer]._show) {
// console.log(lnd[k].label, "所有开启");
this.leftNavData[k].flag = false
this.leftNavData[k].img = this.leftNavData[k].normal
- window[this.leftNavData[k].layer].show = false
+ layers[this.leftNavData[k].layer].show = false
}
}
item.flag = !item.flag
if (item.flag == true) {
item.img = item.checked
- window[item.layer].show = true
+ layers[item.layer].show = true
// console.log("飞入");
// this.flyTo(item);
this.$store.dispatch('closeMobileWindowsDom') // 关闭弹窗
} else {
item.img = item.normal
- window[item.layer].show = false
+ layers[item.layer].show = false
}
},
// flyTo(item) {
@@ -257,172 +258,183 @@
// noOpen: true,
// });
// },
+ overlayClick (data, billboard, label, k, ourD) {
+ const that = this
+ billboard.on(global.DC.MouseEventType.CLICK, (e) => {
+ if (that.pinchFlag == true) {
+ return
+ }
+ const d = {
+ name:
+ data[k].mechanismname ||
+ data[k].roadname ||
+ data[k].vrname ||
+ (ourD.label == '监控' ? '监控' : '无显示名字'),
+ bgImg: data[k].tpurl,
+ video: ourD.label == '监控' ? data[k].vrurl : '',
+ from: 'labels',
+ introduce: data[k].introduce,
+ panoramaurl: ourD.label == '实景' ? data[k].vrurl : ''
+ }
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.overlay._position._lng, e.overlay._position._lat],
+ d
+ )
+ })
+ label.on(global.DC.MouseEventType.CLICK, (e) => {
+ if (that.pinchFlag == true) {
+ return
+ }
+ const d = {
+ name:
+ data[k].mechanismname ||
+ data[k].roadname ||
+ (ourD.label == '监控' ? '监控' : '无显示名字'),
+ bgImg: data[k].tpurl,
+ video: data[k].videourl || '',
+ from: 'labels',
+ introduce: data[k].introduce,
+ panoramaurl: data[k].panoramaurl
+ }
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.overlay._position._lng, e.overlay._position._lat],
+ d
+ )
+ })
+ },
initialize () {
var that = this
global.viewer.scene.globe.depthTestAgainstTerrain = false
- window.tagLayer = new global.DC.HtmlLayer('tagLayer')
- global.viewer.addLayer(tagLayer)
+ layers.mobileTagLayer = new global.DC.VectorLayer('mobileTagLayer')
+ global.viewer.addLayer(layers.mobileTagLayer)
- window.wayLayer = new global.DC.HtmlLayer('wayLayer')
- global.viewer.addLayer(wayLayer)
+ layers.wayLayer = new global.DC.VectorLayer('wayLayer')
+ global.viewer.addLayer(layers.wayLayer)
- // sceneLayer = new global.DC.VectorLayer("sceneLayer");
- window.sceneLayer = new global.DC.HtmlLayer('sceneLayer')
- global.viewer.addLayer(sceneLayer)
+ layers.sceneLayer = new global.DC.VectorLayer('sceneLayer')
+ global.viewer.addLayer(layers.sceneLayer)
- window.videoLayer = new global.DC.HtmlLayer('videoLayer')
- global.viewer.addLayer(videoLayer)
+ layers.videoLayer = new global.DC.VectorLayer('videoLayer')
+ global.viewer.addLayer(layers.videoLayer)
- // activityLayer = new global.DC.VectorLayer("activityLayer");
- window.activityLayer = new global.DC.HtmlLayer('activityLayer')
- global.viewer.addLayer(activityLayer)
+ layers.activityLayer = new global.DC.VectorLayer('activityLayer')
+ global.viewer.addLayer(layers.activityLayer)
- // aedLayer = new global.DC.VectorLayer("aedLayer");
- window.aedLayer = new global.DC.HtmlLayer('aedLayer')
- global.viewer.addLayer(aedLayer)
+ layers.aedLayer = new global.DC.VectorLayer('aedLayer')
+ global.viewer.addLayer(layers.aedLayer)
- window.parkLayer = new global.DC.HtmlLayer('parkLayer')
- global.viewer.addLayer(parkLayer)
+ layers.parkLayer = new global.DC.VectorLayer('parkLayer')
+ global.viewer.addLayer(layers.parkLayer)
- // comeLayer = new global.DC.VectorLayer("comeLayer");
- window.comeLayer = new global.DC.HtmlLayer('comeLayer')
- global.viewer.addLayer(comeLayer)
+ layers.comeLayer = new global.DC.VectorLayer('comeLayer')
+ global.viewer.addLayer(layers.comeLayer)
const ourNum = that.leftNavData.length
for (let n = 0; n < ourNum; n++) {
const ourD = this.leftNavData[n]
const d = ourD.type ? { lifetype: ourD.type } : {}
ourD.methods(d).then((res) => {
- let dom
- const data = res.data.data
+ let imgUrl = null
+ let sateName = null
+ let data = null
+
+ if (ourD.label == '监控' || ourD.label == '实景') {
+ data = res.data.data.records
+ } else {
+ data = res.data.data
+ }
+
const position = that.changePoiton(data)
const num = data.length
for (let k = 0; k < num; k++) {
+ sateName = data[k].mechanismname
if (ourD.label == '标签') {
- dom = `
- <div class="tag-entitys-box">
- <div class="tag-content">
- ${data[k].mechanismname}
- </div>
- <div class="tag-angle-content">
- <img src="${ourD.imgSrc}">
- </div>
- </div>
- `
+ imgUrl = '/img/icon/m-t.png'
} else if (ourD.label == '道路') {
- // <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;">
- // ${data[k].mechanismname}
- // </div>
- dom = `
- <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;">
- ${data[k].roadname}
- </div>
- <div class="way-sign-box">
- <img src="https://map.hit.edu.cn/images/roadsign3.png">
- </div>
- </div>
- `
+ imgUrl = '/img/icon/m-w.png'
+ sateName = data[k].roadname
} else if (ourD.label == '实景') {
- // <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;">
- // ${data[k].mechanismname}
- // </div>
- dom = `
- <div class="scene-entitys-box">
- <div>${data[k].mechanismname}</div>
- <img src="/img/leftnav/map-panorama.png" alt="">
- </div>
- `
+ imgUrl = '/img/icon/m-s.png'
+ sateName = data[k].vrname
} else if (ourD.label == 'AED') {
- dom = `
- <div class="mobiletag-entitys-box">
- <div class="tag-content">
- ${data[k].mechanismname}
- </div>
- <div class="tag-angle-content">
- <img src="${ourD.imgSrc}">
- </div>
- </div>
- `
+ imgUrl = null
} else if (ourD.label == '停车') {
- dom = `
- <div class="park-entitys-box">
- <div class="park-title" alt="${data[k].mechanismname}">
- </div>
- <div class="park-sign-box">
- <div>
- <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="${data[k].mechanismname}" title="${data[k].mechanismname}">
- </div>
- <div>
- <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
- </div>
- </div>
- </div>
- `
+ imgUrl = '/img/icon/m-p.png'
} else if (ourD.label == '出入') {
- dom = `
- <div class="mobiletag-entitys-box-pink">
- <div class="tag-content">
- ${data[k].mechanismname}
- </div>
- <div class="tag-angle-content">
- <img src="${ourD.imgSrc}">
- </div>
- </div>
- `
+ imgUrl = '/img/icon/m-c.png'
} else if (ourD.label == '监控') {
- dom = `
- <div class="monitor-entitys-box">
- <div>${data[k].mechanismname}</div>
- <img class="monitor-entitys-box" src="/img/leftnav/map-monitor.png" alt="">
- </div>
- `
+ imgUrl = '/img/icon/m-v.png'
+ sateName = data[k].vrname
}
- const divIcon = new global.DC.DivIcon(position[k], dom)
- // 订阅事件
- divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
- // console.log(data[k]);
- const d = {
- name:
- data[k].mechanismname ||
- data[k].roadname ||
- (ourD.label == '监控' ? '监控' : '无显示名字'),
- bgImg: data[k].tpurl,
- video: data[k].videourl || '',
- from: 'labels',
- introduce: data[k].introduce,
- panoramaurl: data[k].panoramaurl
- }
- // 定制化窗体
- that.openPopupS(
- e.position,
- [e.overlay._position._lng, e.overlay._position._lat],
- d
- )
+
+ const billboard = new global.DC.Billboard(position[k], imgUrl)
+
+ const label = new global.DC.Label(
+ position[k],
+ sateName
+ )
+
+ label.setStyle({
+ fillColor: global.DC.Color.RED,
+ style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
+ outlineColor: global.DC.Color.WHITE, // 边框颜色
+ outlineWidth: 8, // 边框大小，
+ font: '12px sans-serif',
+ pixelOffset: { x: 0, y: -24 }
})
- window[that.leftNavData[n].layer].addOverlay(divIcon) // 加入图标
+
+ that.overlayClick(data, billboard, label, k, ourD)
+
+ layers[that.leftNavData[n].layer].addOverlay(billboard) // 加入图标
+ layers[that.leftNavData[n].layer].addOverlay(label)
}
- window[that.leftNavData[n].layer].positions = position
- if (that.leftNavData[n].layer == 'tagLayer') {
+ layers[that.leftNavData[n].layer].positions = position
+ if (that.leftNavData[n].layer == 'mobileTagLayer') {
// that.leftNavData[n].img = that.leftNavData[n].checked;
} else {
- window[that.leftNavData[n].layer].show = false
+ layers[that.leftNavData[n].layer].show = false
}
})
}
// setTimeout(() => {
- // this.tagLayer.show = false;
+ // this.mobileTagLayer.show = false;
// }, 500);
},
+
changePoiton (data) {
- // console.log(data);
+ const that = this
const list = []
const num = data.length
for (let i = 0; i < num; i++) {
- list.push(new global.DC.Position(data[i].jd, data[i].wd, 0))
+ let obj = {}
+ if (data[i].x && data[i].x != '') {
+ const position = that.coordinate(data[i].x)
+ obj = {
+ lng: position.lng, lat: position.lat
+ }
+ } else {
+ obj = {
+ lng: data[i].jd, lat: data[i].wd
+ }
+ }
+ list.push(new global.DC.Position(Number(obj.lng), Number(obj.lat), 0))
}
return list
},
+
+ coordinate (item) {
+ const arr = item.split(',')
+
+ return {
+ lng: arr[0],
+ lat: arr[1]
+ }
+ },
+
mobileOpenImgs1 () {
const imgsDom = document.getElementById('mobileBigImgs')
imgsDom.click()
--
Gitblit v1.9.3