From e8e7b70168d5cc8a465c92da28bdcce52e8bf3cc Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Thu, 10 Mar 2022 14:48:21 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-web
---
src/components/leftNav/index.vue | 354 ++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 265 insertions(+), 89 deletions(-)
diff --git a/src/components/leftNav/index.vue b/src/components/leftNav/index.vue
index c1be958..afbf3e1 100644
--- a/src/components/leftNav/index.vue
+++ b/src/components/leftNav/index.vue
@@ -1,31 +1,43 @@
<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 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 {
+ getLifeList,
+ getMonitorList,
+ getSceneList,
+ getWayList,
+ getTagList
+} from '@/api/pc/leftNav/index'
+import { mapGetters } from 'vuex'
export default {
name: 'leftNav',
- computed: {},
+ computed: {
+ ...mapGetters([
+ 'viewer',
+ 'closeMapClick', // 关闭地图点击，防止新增标签误触
+ 'addIconsLayerIconPopup' // 传送关闭编辑窗口，刷新标签数据
+ ])
+ },
data () {
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'
@@ -62,14 +74,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: '停车',
@@ -88,7 +100,6 @@
}
],
viewer: null,
- DC: null,
tagLayer: null,
wayLayer: null,
sceneLayer: null,
@@ -100,18 +111,82 @@
}
},
created () {
- this.DC = global.DC
},
mounted () {
-
+ // 初始化新增标签图层
+ // this.$store.commit("createAddIconsLayerIconLayer", { viewer: this.viewer });
+ },
+ watch: {
+ addIconsLayerIconPopup () {
+ if (!this.addIconsLayerIconPopup) {
+ this.reself()
+ }
+ }
},
methods: {
+ reself () {
+ const that = this
+ if (this.tagLayer) {
+ this.tagLayer.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="https://map.hit.edu.cn/images/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
+ })
+ })
+ this.tagLayer.addOverlay(divIcon)
+ if (!this.leftNavData[0].flag) {
+ this.tagLayer.show = false
+ }
+ })
+ })
+ },
+ addIcons () {
+ if (this.closeMapClick) {
+ // 若正在加标签，退出
+ return
+ }
+ // 加标签
+ this.$store.dispatch('chouseAddIconsLayerIcon', {
+ // 新增标签 选定位置
+ viewer: this.viewer,
+ fn: (lnglat) => {
+ // 返回选定坐标
+ // 添加空白标签
+ this.$store.dispatch('addIconsLayerIcon', {
+ lnglat: lnglat,
+ viewer: this.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 this.DC.Position(lng, lat, 0))
+ list.push(new global.DC.Position(lng, lat, 0))
}
return list
},
@@ -129,25 +204,25 @@
var that = this
viewer.scene.globe.depthTestAgainstTerrain = false
this.viewer = viewer
- this.tagLayer = new this.DC.HtmlLayer('tagLayer')
+ this.tagLayer = new global.DC.HtmlLayer('tagLayer')
viewer.addLayer(this.tagLayer)
- this.wayLayer = new this.DC.HtmlLayer('wayLayer')
+ this.wayLayer = new global.DC.HtmlLayer('wayLayer')
viewer.addLayer(this.wayLayer)
- this.sceneLayer = new this.DC.HtmlLayer('sceneLayer')
+ this.sceneLayer = new global.DC.HtmlLayer('sceneLayer')
viewer.addLayer(this.sceneLayer)
- this.monitorLayer = new this.DC.HtmlLayer('monitorLayer')
+ this.monitorLayer = new global.DC.HtmlLayer('monitorLayer')
viewer.addLayer(this.monitorLayer)
- this.aedLayer = new this.DC.VectorLayer('aedLayer')
+ this.aedLayer = new global.DC.VectorLayer('aedLayer')
viewer.addLayer(this.aedLayer)
- this.parkLayer = new this.DC.HtmlLayer('parkLayer')
+ this.parkLayer = new global.DC.HtmlLayer('parkLayer')
viewer.addLayer(this.parkLayer)
- this.comeLayer = new this.DC.VectorLayer('comeLayer')
+ this.comeLayer = new global.DC.VectorLayer('comeLayer')
viewer.addLayer(this.comeLayer)
- getTagList().then(res => {
- res.data.data.forEach(item => {
- const divIcon = new this.DC.DivIcon(
- new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+ 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">
@@ -159,18 +234,30 @@
</div>
`
)
+ // 订阅事件
+ divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
+ if (that.closeMapClick) {
+ return
+ }
+ // console.log(item, "see11111");
+ that.openPopups({
+ lng: e.overlay.position.lng,
+ lat: e.overlay.position.lat,
+ item: item
+ })
+ })
this.tagLayer.addOverlay(divIcon)
})
- this.tagLayer.show = false
+ // this.tagLayer.show = false
})
- getWayList().then(res => {
- res.data.data.forEach(item => {
- const divIcon = new this.DC.DivIcon(
- new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+ getWayList().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="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">
@@ -184,32 +271,51 @@
this.wayLayer.show = false
})
- getMonitorList().then(res => {
- res.data.data.forEach(item => {
- console.log(item, 456)
- const divIcon = new this.DC.DivIcon(
- new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+ getMonitorList().then((res) => {
+ res.data.data.records.forEach((item) => {
+ const divIcon = new global.DC.DivIcon(
+ new global.DC.Position(Number(item.jd), Number(item.wd), 0),
`
- <img class="monitor-entitys-box" src="/img/leftnav/map-monitor.png" alt="">
+ <div class="monitor-entitys-box">
+ <div>${item.vrname}</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 => {
+ divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
+ that.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.mechanismname)
- this.$store.commit('SET_MONITORURL', e.overlay.attrParams.videourl)
+ 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 = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position.fromArray([Number(item.jd), Number(item.wd), 0, 0, -90, 0]))
+ 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
+ ])
+ )
this.viewer.scene.globe.depthTestAgainstTerrain = false
// eslint-disable-next-line no-unused-vars
- var monitor = new this.DC.PanoramaBox(this.viewer, {
+ var monitor = new global.DC.PanoramaBox(this.viewer, {
domId: 'MonitorBox',
- position: [
- positions
- ]
+ position: [positions]
})
this.$store.commit('SET_MONITORPOPUP', true)
@@ -219,32 +325,54 @@
this.monitorLayer.show = false
})
- getSceneList().then(res => {
- res.data.data.forEach(item => {
- console.log(item, 123)
- const divIcon = new this.DC.DivIcon(
- new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+ getSceneList().then((res) => {
+ res.data.data.records.forEach((item) => {
+ const divIcon = new global.DC.DivIcon(
+ new global.DC.Position(Number(item.jd), Number(item.wd), 0),
`
- <img class="scene-entitys-box" src="/img/leftnav/map-panorama.png" alt="">
+ <div class="scene-entitys-box">
+ <div>${item.vrname}</div>
+ <img src="/img/leftnav/map-panorama.png" alt="">
+ </div>
`
)
divIcon.attrParams = item
this.sceneLayer.addOverlay(divIcon)
- divIcon.on(that.DC.MouseEventType.CLICK, e => {
+ divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
+ that.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.mechanismname)
- this.$store.commit('SET_PANORAMAURL', e.overlay.attrParams.panoramaurl)
+ 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 = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position.fromArray([Number(item.jd), Number(item.wd), 0, 0, -90, 0]))
+ 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
+ ])
+ )
this.viewer.scene.globe.depthTestAgainstTerrain = false
// eslint-disable-next-line no-unused-vars
- var panorama = new this.DC.PanoramaBox(this.viewer, {
+ var panorama = new global.DC.PanoramaBox(this.viewer, {
domId: 'PanoramaBox',
- position: [
- positions
- ]
+ position: [positions]
})
this.$store.commit('SET_PANORAMAPOPUP', true)
@@ -254,20 +382,26 @@
this.sceneLayer.show = false
})
- 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)
+ getLifeList({ lifetype: 9 }).then((res) => {
+ res.data.data.forEach((item) => {
+ const label = new global.DC.Label(
+ new global.DC.Position(Number(item.jd), Number(item.wd), 0),
+ item.mechanismname
+ )
label.setStyle({
- fillColor: this.DC.Color.CRIMSON,
- style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
- outlineColor: that.DC.Color.WHITE, // 边框颜色
+ 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 }
})
this.aedLayer.addOverlay(label)
- const billboard = new this.DC.Billboard(new that.DC.Position(Number(item.jd), Number(item.wd), 0), '/img/leftnav/map-aed.png')
+ const billboard = new global.DC.Billboard(
+ new global.DC.Position(Number(item.jd), Number(item.wd), 0),
+ '/img/leftnav/map-aed.png'
+ )
billboard.size = [20, 20]
this.aedLayer.addOverlay(billboard)
@@ -275,10 +409,10 @@
this.aedLayer.show = false
})
- 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),
+ getLifeList({ lifetype: 11 }).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="park-entitys-box">
<div class="park-title" alt="${item.mechanismname}">
@@ -299,32 +433,62 @@
this.parkLayer.show = false
})
- 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)
+ getLifeList({ lifetype: 12 }).then((res) => {
+ res.data.data.forEach((item) => {
+ const label = new global.DC.Label(
+ new global.DC.Position(Number(item.jd), Number(item.wd), 0),
+ item.mechanismname
+ )
label.setStyle({
- fillColor: that.DC.Color.FUCHSIA,
- style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
- outlineColor: that.DC.Color.WHITE, // 边框颜色
+ 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: -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')
+ const billboard = new global.DC.Billboard(
+ new global.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
+ })
+ },
+ openPopups (value) {
+ var popup = new global.DC.DivForms(this.viewer, {
+ domId: 'divFormsDomBox',
+ position: [
+ global.DC.Transform.transformWGS84ToCartesian(
+ new global.DC.Position(
+ Number(value.lng),
+ Number(value.lat),
+ Number(value.alt || 0)
+ )
+ )
+ ]
+ })
+ // console.log(value, "see");
+ this.$store.dispatch('setOurDataInPoput', value)
+ this.$store.dispatch('pcFlyView', {
+ jd: value.lng,
+ wd: value.lat,
+ viewer: this.viewer
})
}
}
}
</script>
-<style scoped lang='scss'>
+<style scoped lang="scss">
.left-nav {
position: fixed;
top: 160px;
@@ -369,4 +533,16 @@
}
}
}
+.addIcons {
+ position: absolute;
+ top: 0;
+ left: -60px;
+ width: 50px !important;
+ span {
+ font-size: 25px !important;
+ }
+}
+.avtiveAddIcons {
+ background-color: aqua;
+}
</style>
--
Gitblit v1.9.3