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 | 387 +++++++++++++++++++++++++++++-------------------------
1 files changed, 206 insertions(+), 181 deletions(-)
diff --git a/src/components/mobileLeftNav/index.vue b/src/components/mobileLeftNav/index.vue
index 5351c2c..43ae1cc 100644
--- a/src/components/mobileLeftNav/index.vue
+++ b/src/components/mobileLeftNav/index.vue
@@ -1,4 +1,7 @@
<template>
+ <!-- 右侧标签管理栏
+mobileLeftNav
+ -->
<div :class="['m-left-nav', seeRight ? '' : 'nones']" :style="[navStyle]">
<!-- :style="[coutrolStyle]" -->
<div class="m-left-coutrol" @click="changeIconHide">
@@ -30,40 +33,53 @@
getListcat // 出入-AED-停车场
} from '@/api/mobile/piont/index'
import { getListVideo } from '@/api/mobile/monitor/index'
+const layers = {
+ mobileTagLayer: null,
+ wayLayer: null,
+ sceneLayer: null,
+ videoLayer: null,
+ activityLayer: null,
+ aedLayer: null,
+ parkLayer: null,
+ comeLayer: null
+}
export default {
name: 'mobileLeftNav',
watch: {
- iconHide () {
- if (this.iconHide) {
- this.icons = 'el-icon-d-arrow-left'
- this.navStyle.right = '-51px'
- this.imgStyle.right = '6px'
- } else {
- this.icons = 'el-icon-d-arrow-right'
- this.navStyle.right = '0px'
- this.imgStyle.right = '0'
+ iconHide: {
+ immediate: true,
+ handler (newCode, oldCode) {
+ if (newCode) {
+ this.icons = 'el-icon-d-arrow-left'
+ this.navStyle.right = '-51px'
+ this.imgStyle.right = '6px'
+ } else {
+ this.icons = 'el-icon-d-arrow-right'
+ this.navStyle.right = '0px'
+ this.imgStyle.right = '0'
+ }
}
},
seeRight () {
if (this.seeRight) {
this.leftNavData[0].flag = false
this.leftNavData[0].img = this.leftNavData[0].checked
- this[this.leftNavData[0].layer].show = true
+ layers[this.leftNavData[0].layer].show = true
} else {
const lnd = this.leftNavData
for (const k in lnd) {
- if (this[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
- this[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 {
@@ -82,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",
},
{
@@ -151,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",
},
{
@@ -166,20 +182,19 @@
imgSrc: 'img/leftnav/map-activity.png'
// imgSrc: "img/mobile/purple.png",
}
- ],
- viewer: null,
- tagLayer: null,
- wayLayer: null,
- sceneLayer: null,
- videoLayer: null,
- activityLayer: null,
- aedLayer: null,
- parkLayer: null,
- comeLayer: null
+ ]
+ // viewer: null,
+ // mobileTagLayer: null,
+ // wayLayer: null,
+ // sceneLayer: null,
+ // videoLayer: null,
+ // activityLayer: null,
+ // aedLayer: null,
+ // parkLayer: null,
+ // comeLayer: null,
}
},
- created () {
- },
+ created () { },
mounted () { },
methods: {
changeIconHide () {
@@ -196,220 +211,230 @@
// console.log(lnd[k].label, "当前点击");
continue
}
- if (this[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
- this[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
- this[item.layer].show = true
+ layers[item.layer].show = true
// console.log("飞入");
// this.flyTo(item);
this.$store.dispatch('closeMobileWindowsDom') // 关闭弹窗
} else {
item.img = item.normal
- this[item.layer].show = false
+ layers[item.layer].show = false
}
},
- flyTo (item) {
+ // flyTo(item) {
+ // const that = this;
+ // const posi = this[item.layer].positions[0];
+ // // console.log(posi);
+ // const lntLat =
+ // that.dimensionData.pitch == -45
+ // ? [posi.lng + 0.00917, posi.lat - 0.0188, 500]
+ // : [posi.lng + 0.01197, posi.lat - 0.00055, 500];
+ // // that.mviewer.camera.flyTo({
+ // // destination: Cesium.Cartesian3.fromDegrees(
+ // // lntLat[0],
+ // // lntLat[1],
+ // // lntLat[2]
+ // // ),
+ // // });
+ // // return;
+ // this.$store.dispatch("mapFlyTo", {
+ // // 飞入
+ // lntLat: lntLat,
+ // // lntLat: [posi.lng + 0.01187, posi.lat - 0.0308, 4000],
+ // // lntLat: [121.50492752204283, 31.21567802276832, 2530],
+ // heading: that.dimensionData.heading,
+ // pitch: that.dimensionData.pitch,
+ // roll: that.dimensionData.roll,
+ // noOpen: true,
+ // });
+ // },
+ overlayClick (data, billboard, label, k, ourD) {
const that = this
- const posi = this[item.layer].positions[0]
- // console.log(posi);
- const lntLat =
- that.dimensionData.pitch == -45
- ? [posi.lng + 0.00917, posi.lat - 0.0188, 500]
- : [posi.lng + 0.01197, posi.lat - 0.00055, 500]
- // that.mviewer.camera.flyTo({
- // destination: Cesium.Cartesian3.fromDegrees(
- // lntLat[0],
- // lntLat[1],
- // lntLat[2]
- // ),
- // });
- // return;
- this.$store.dispatch('mapFlyTo', {
- // 飞入
- lntLat: lntLat,
- // lntLat: [posi.lng + 0.01187, posi.lat - 0.0308, 4000],
- // lntLat: [121.50492752204283, 31.21567802276832, 2530],
- heading: that.dimensionData.heading,
- pitch: that.dimensionData.pitch,
- roll: that.dimensionData.roll,
- noOpen: true
+ 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 (viewer) {
+ initialize () {
var that = this
- viewer.scene.globe.depthTestAgainstTerrain = false
- this.viewer = viewer
- this.tagLayer = new global.DC.HtmlLayer('tagLayer')
- viewer.addLayer(this.tagLayer)
+ global.viewer.scene.globe.depthTestAgainstTerrain = false
+ layers.mobileTagLayer = new global.DC.VectorLayer('mobileTagLayer')
+ global.viewer.addLayer(layers.mobileTagLayer)
- this.wayLayer = new global.DC.HtmlLayer('wayLayer')
- viewer.addLayer(this.wayLayer)
+ layers.wayLayer = new global.DC.VectorLayer('wayLayer')
+ global.viewer.addLayer(layers.wayLayer)
- // this.sceneLayer = new global.DC.VectorLayer("sceneLayer");
- this.sceneLayer = new global.DC.HtmlLayer('sceneLayer')
- viewer.addLayer(this.sceneLayer)
+ layers.sceneLayer = new global.DC.VectorLayer('sceneLayer')
+ global.viewer.addLayer(layers.sceneLayer)
- this.videoLayer = new global.DC.HtmlLayer('videoLayer')
- viewer.addLayer(this.videoLayer)
+ layers.videoLayer = new global.DC.VectorLayer('videoLayer')
+ global.viewer.addLayer(layers.videoLayer)
- // this.activityLayer = new global.DC.VectorLayer("activityLayer");
- this.activityLayer = new global.DC.HtmlLayer('activityLayer')
- viewer.addLayer(this.activityLayer)
+ layers.activityLayer = new global.DC.VectorLayer('activityLayer')
+ global.viewer.addLayer(layers.activityLayer)
- // this.aedLayer = new global.DC.VectorLayer("aedLayer");
- this.aedLayer = new global.DC.HtmlLayer('aedLayer')
- viewer.addLayer(this.aedLayer)
+ layers.aedLayer = new global.DC.VectorLayer('aedLayer')
+ global.viewer.addLayer(layers.aedLayer)
- this.parkLayer = new global.DC.HtmlLayer('parkLayer')
- viewer.addLayer(this.parkLayer)
+ layers.parkLayer = new global.DC.VectorLayer('parkLayer')
+ global.viewer.addLayer(layers.parkLayer)
- // this.comeLayer = new global.DC.VectorLayer("comeLayer");
- this.comeLayer = new global.DC.HtmlLayer('comeLayer')
- viewer.addLayer(this.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 }
})
- that[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)
}
- that[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 {
- that[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