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 | 1149 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 673 insertions(+), 476 deletions(-)
diff --git a/src/components/leftNav/index.vue b/src/components/leftNav/index.vue
index 15ff06e..3febdc5 100644
--- a/src/components/leftNav/index.vue
+++ b/src/components/leftNav/index.vue
@@ -1,542 +1,739 @@
<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>
- <li class="addIcons" @click="addIcons">
- <!-- <img :style="[imgStyle]" :src="item.img" alt="" /> -->
- <span>+</span>
- </li>
- </ul>
- </div>
+ <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>
+ <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 { mapGetters } from "vuex";
+ getLifeList,
+ getMonitorList,
+ getSceneList,
+ getWayList,
+ 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([
- "viewer",
- "closeMapClick", // 关闭地图点击，防止新增标签误触
- "addIconsLayerIconPopup", //传送关闭编辑窗口，刷新标签数据
- ]),
- },
- data() {
- return {
- leftNavData: [
- {
- flag: true,
- label: "标签",
- img: "/img/leftnav/tag-checked.png",
- normal: "/img/leftnav/tag.png",
- checked: "/img/leftnav/tag-checked.png",
- layer: "tagLayer",
- },
- {
- flag: false,
- label: "道路",
- img: "/img/leftnav/way.png",
- normal: "/img/leftnav/way.png",
- checked: "/img/leftnav/way-checked.png",
- layer: "wayLayer",
- },
- {
- flag: false,
- label: "实景",
- 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",
- },
- // {
- // flag: false,
- // label: '活动',
- // img: '/img/leftnav/activity.png',
- // normal: '/img/leftnav/activity.png',
- // 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: "停车",
- img: "/img/leftnav/park.png",
- normal: "/img/leftnav/park.png",
- checked: "/img/leftnav/park-checked.png",
- layer: "parkLayer",
- },
- {
- flag: false,
- label: "出入",
- img: "/img/leftnav/come.png",
- normal: "/img/leftnav/come.png",
- checked: "/img/leftnav/come-checked.png",
- layer: "comeLayer",
- },
- ],
- viewer: null,
- DC: null,
- tagLayer: null,
- wayLayer: null,
- sceneLayer: null,
- monitorLayer: null,
- activityLayer: null,
- aedLayer: null,
- parkLayer: null,
- comeLayer: null,
- };
- },
- created() {
- this.DC = global.DC;
- },
- mounted() {
- //初始化新增标签图层
- // this.$store.commit("createAddIconsLayerIconLayer", { viewer: this.viewer });
- },
- watch: {
- addIconsLayerIconPopup() {
- if (!this.addIconsLayerIconPopup) {
- this.reself();
- }
+ name: 'leftNav',
+ computed: {
+ ...mapGetters([
+ 'closeMapClick', // 关闭地图点击，防止新增标签误触
+ 'addIconsLayerIconPopup', // 传送关闭编辑窗口，刷新标签数据
+ 'calenderShow',
+ 'twoOrThree'
+ ])
},
- },
- methods: {
- reself() {
- let that = this;
- if (this.tagLayer) {
- this.tagLayer.clear();
- }
- 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),
- `
+ data () {
+ return {
+ leftNavData: [
+ {
+ flag: true,
+ label: '标签',
+ img: '/img/leftnav/tag-checked.png',
+ normal: '/img/leftnav/tag.png',
+ checked: '/img/leftnav/tag-checked.png',
+ layer: 'leftTagLayer'
+ },
+ {
+ flag: false,
+ label: '道路',
+ img: '/img/leftnav/way.png',
+ normal: '/img/leftnav/way.png',
+ checked: '/img/leftnav/way-checked.png',
+ layer: 'leftWayLayer'
+ },
+ {
+ flag: false,
+ label: '实景',
+ img: '/img/leftnav/scene.png',
+ normal: '/img/leftnav/scene.png',
+ checked: '/img/leftnav/scene-checked.png',
+ layer: 'leftSceneLayer'
+ },
+ // {
+ // flag: false,
+ // 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: 'leftAedLayer'
+ // },
+ {
+ flag: false,
+ label: '停车',
+ img: '/img/leftnav/park.png',
+ normal: '/img/leftnav/park.png',
+ checked: '/img/leftnav/park-checked.png',
+ layer: 'leftParkLayer'
+ },
+ {
+ flag: false,
+ label: '出入',
+ img: '/img/leftnav/come.png',
+ normal: '/img/leftnav/come.png',
+ checked: '/img/leftnav/come-checked.png',
+ layer: 'leftComeLayer'
+ }
+ ]
+ }
+ },
+ created () {
+ },
+ mounted () {
+ // 初始化新增标签图层
+ // this.$store.commit("createAddIconsLayerIconLayer", { viewer: global.viewer });
+ },
+ watch: {
+ addIconsLayerIconPopup () {
+ 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 (LeftNavLayer.leftTagLayer) {
+ LeftNavLayer.leftTagLayer.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">
+ <img src="/img/icon/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;
- }
- //加标签
- console.log("addIcons", "see");
- this.$store.dispatch("chouseAddIconsLayerIcon", {
- //新增标签 选定位置
- viewer: this.viewer,
- fn: (lnglat) => {
- //返回选定坐标
- console.log(lnglat, "see");
- //添加空白标签
- this.$store.dispatch("addIconsLayerIcon", {
- lnglat: lnglat,
- viewer: this.viewer,
- });
+ )
+ // 订阅事件
+ 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
+ })
+ })
+ LeftNavLayer.leftTagLayer.addOverlay(divIcon)
+ if (!this.leftNavData[0].flag) {
+ LeftNavLayer.leftTagLayer.show = false
+ }
+ })
+ })
},
- });
- },
- 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));
- }
- 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;
- }
- },
- initialize(viewer) {
- var that = this;
- viewer.scene.globe.depthTestAgainstTerrain = false;
- this.viewer = viewer;
- this.tagLayer = new this.DC.HtmlLayer("tagLayer");
- viewer.addLayer(this.tagLayer);
- this.wayLayer = new this.DC.HtmlLayer("wayLayer");
- viewer.addLayer(this.wayLayer);
- 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");
- 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),
- `
- <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;
+ coordinate (item) {
+ const arr = item.split(',')
+
+ return {
+ lng: arr[0],
+ lat: arr[1]
}
- // 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
- });
+ },
- 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),
- `
- <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>
- `
- );
- this.wayLayer.addOverlay(divIcon);
- });
- this.wayLayer.show = false;
- });
+ addIcons () {
+ if (this.closeMapClick) {
+ // 若正在加标签，退出
+ return
+ }
+ // 加标签
+ this.$store.dispatch('chouseAddIconsLayerIcon', {
+ // 新增标签 选定位置
+ viewer: global.viewer,
+ fn: (lnglat) => {
+ // 返回选定坐标
+ // 添加空白标签
+ this.$store.dispatch('addIconsLayerIcon', {
+ lnglat: lnglat,
+ viewer: global.viewer
+ })
+ }
+ })
+ },
- 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),
- `
+ 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 global.DC.Position(lng, lat, 0))
+ }
+ return list
+ },
+
+ leftNavClick (item) {
+ item.flag = !item.flag
+ if (item.flag == true) {
+ item.img = item.checked
+ } else {
+ item.img = item.normal
+ }
+
+ 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
+
+ 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(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="/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");
+ })
+ LeftNavLayer.leftTagLayer.addOverlay(divIcon)
+ })
+ // 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(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="/img/icon/roadsign3.png">
+ </div>
+ </div>
+ `
+ )
+
+ divIcon.attr.params = item
+
+ LeftNavLayer.leftWayLayer.addOverlay(divIcon)
+ })
+ 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(obj.lng), Number(obj.lat), 0),
+ `
<div class="monitor-entitys-box">
- <div>${item.mechanismname}</div>
+ <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) => {
- 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],
- });
+ divIcon.attr.params = item
- this.$store.commit("SET_MONITORPOPUP", true);
- });
- });
+ divIcon.attrParams = item
+ LeftNavLayer.leftMonitorLayer.addOverlay(divIcon)
- this.monitorLayer.show = false;
- });
+ divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
+ global.viewer.flyToPosition(
+ new global.DC.Position(Number(item.jd), Number(item.wd), Number(300), Number(0), Number(-90), Number(0)),
+ function () { },
+ 2
+ )
- getSceneList().then((res) => {
- res.data.data.forEach((item) => {
- const divIcon = new this.DC.DivIcon(
- new that.DC.Position(Number(item.jd), Number(item.wd), 0),
- `
+ this.$store.commit('SET_PANORAMAPOPUP', false)
+ this.$store.commit('SET_DETAILSPOPUP', false)
+ 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 = 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
+ ])
+ )
+ global.viewer.scene.globe.depthTestAgainstTerrain = false
+ // eslint-disable-next-line no-unused-vars
+ var monitor = new global.DC.PanoramaBox(global.viewer, {
+ domId: 'MonitorBox',
+ position: [positions]
+ })
+
+ this.$store.commit('SET_MONITORPOPUP', true)
+ })
+ })
+
+ 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(obj.lng), Number(obj.lat), 0),
+ `
<div class="scene-entitys-box">
- <div>${item.mechanismname}</div>
+ <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) => {
- 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],
- });
+ divIcon.attr.params = item
- this.$store.commit("SET_PANORAMAPOPUP", true);
- });
- });
+ divIcon.attrParams = item
+ LeftNavLayer.leftSceneLayer.addOverlay(divIcon)
- this.sceneLayer.show = false;
- });
+ divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
+ global.viewer.flyToPosition(
+ new global.DC.Position(Number(item.jd), Number(item.wd), Number(300), Number(0), Number(-90), Number(0)),
+ function () { },
+ 2
+ )
- 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({
- fillColor: this.DC.Color.CRIMSON,
- style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
- outlineColor: that.DC.Color.WHITE, // 边框颜色
- outlineWidth: 8, // 边框大小，
- font: "14px sans-serif",
- pixelOffset: { x: 0, y: -24 },
- });
- this.aedLayer.addOverlay(label);
+ this.$store.commit('SET_DETAILSPOPUP', false)
+ this.$store.commit('SET_MONITORPOPUP', false)
+ 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 = 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
+ ])
+ )
+ global.viewer.scene.globe.depthTestAgainstTerrain = false
+ // eslint-disable-next-line no-unused-vars
+ var panorama = new global.DC.PanoramaBox(global.viewer, {
+ domId: 'PanoramaBox',
+ position: [positions]
+ })
- const billboard = new this.DC.Billboard(
- new that.DC.Position(Number(item.jd), Number(item.wd), 0),
- "/img/leftnav/map-aed.png"
- );
- billboard.size = [20, 20];
+ this.$store.commit('SET_PANORAMAPOPUP', true)
+ })
+ })
- this.aedLayer.addOverlay(billboard);
- });
- this.aedLayer.show = false;
- });
+ LeftNavLayer.leftSceneLayer.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: 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(obj.lng), Number(obj.lat), 0),
+ item.mechanismname
+ )
+
+ label.setStyle({
+ 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 }
+ })
+
+ label.attr.params = item
+
+ LeftNavLayer.leftAedLayer.addOverlay(label)
+
+ const billboard = new global.DC.Billboard(
+ new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
+ '/img/leftnav/map-aed.png'
+ )
+ billboard.size = [20, 20]
+
+ billboard.attr.params = item
+
+ LeftNavLayer.leftAedLayer.addOverlay(billboard)
+ })
+ 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(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);
- });
- 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
- );
- label.setStyle({
- fillColor: that.DC.Color.FUCHSIA,
- style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
- outlineColor: that.DC.Color.WHITE, // 边框颜色
- outlineWidth: 8, // 边框大小，
- font: "14px sans-serif",
- pixelOffset: { x: 0, y: -40 },
- });
- that.comeLayer.addOverlay(label);
+ divIcon.attr.params = item
- 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 },
- });
+ LeftNavLayer.leftParkLayer.addOverlay(divIcon)
+ })
+ LeftNavLayer.leftParkLayer.show = false
+ })
- that.comeLayer.addOverlay(billboard);
- });
- this.comeLayer.show = false;
- });
- },
- openPopups(value) {
- var popup = new this.DC.DivForms(this.viewer, {
- domId: "divFormsDomBox",
- position: [
- this.DC.Transform.transformWGS84ToCartesian(
- new this.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,
- });
- },
- },
-};
+ 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(obj.lng), Number(obj.lat), 0),
+ item.mechanismname
+ )
+ label.setStyle({
+ 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: -40 }
+ })
+
+ label.attr.params = item
+
+ LeftNavLayer.leftComeLayer.addOverlay(label)
+
+ const billboard = new global.DC.Billboard(
+ new global.DC.Position(Number(obj.lng), Number(obj.lat), 0),
+ '/img/leftnav/map-activity.png'
+ )
+ billboard.size = [20, 20]
+ billboard.setStyle({
+ pixelOffset: { x: 0, y: -16 }
+ })
+
+ billboard.attr.params = item
+
+ LeftNavLayer.leftComeLayer.addOverlay(billboard)
+ })
+ LeftNavLayer.leftComeLayer.show = false
+ })
+ },
+
+ openPopups (value) {
+ var popup = new global.DC.DivForms(global.viewer, {
+ domId: 'divFormsDomBox',
+ position: [
+ global.DC.Transform.transformWGS84ToCartesian(
+ new global.DC.Position(
+ Number(value.lng),
+ Number(value.lat),
+ Number(value.alt || 0)
+ )
+ )
+ ]
+ })
+ this.$store.dispatch('setOurDataInPoput', value)
+ this.$store.dispatch('pcFlyView', {
+ jd: value.lng,
+ wd: value.lat,
+ viewer: global.viewer
+ })
+ }
+ }
+}
</script>
<style scoped lang="scss">
.left-nav {
- position: fixed;
- top: 160px;
- right: 30px;
- // bottom: 20px;
- // left: 0;
- z-index: 1;
- ul {
- // display: flex;
- li {
- // margin: 0 8px;
- margin-bottom: 12px;
- font-weight: 400;
- display: block;
- width: 98px;
- height: 33px;
- line-height: 33px;
- background-color: #fff;
- border-radius: 17px;
- text-align: center;
- font-size: 0;
- cursor: pointer;
+ position: fixed;
+ top: 160px;
+ right: 30px;
+ // bottom: 20px;
+ // left: 0;
+ z-index: 1;
+ ul {
+ // display: flex;
+ li {
+ // margin: 0 8px;
+ margin-bottom: 12px;
+ font-weight: 400;
+ display: block;
+ width: 98px;
+ height: 33px;
+ line-height: 33px;
+ background-color: #fff;
+ border-radius: 17px;
+ text-align: center;
+ font-size: 0;
+ cursor: pointer;
- img {
- width: 24px;
- height: 24px;
- vertical-align: middle;
- margin-right: 10px;
- image-rendering: -moz-crisp-edges;
- image-rendering: -o-crisp-edges;
- image-rendering: -webkit-optimize-contrast;
- image-rendering: crisp-edges;
- -ms-interpolation-mode: nearest-neighbor;
- }
+ img {
+ width: 24px;
+ height: 24px;
+ vertical-align: middle;
+ margin-right: 10px;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: -o-crisp-edges;
+ image-rendering: -webkit-optimize-contrast;
+ image-rendering: crisp-edges;
+ -ms-interpolation-mode: nearest-neighbor;
+ }
- span {
- display: inline-block;
- vertical-align: middle;
- font-size: 14px;
- color: #2f2f2f;
- }
+ span {
+ display: inline-block;
+ vertical-align: middle;
+ font-size: 14px;
+ color: #2f2f2f;
+ }
+ }
}
- }
}
.addIcons {
- position: absolute;
- top: 0;
- left: -60px;
- width: 50px !important;
- span {
- font-size: 25px !important;
- }
+ position: absolute;
+ top: 0;
+ left: -60px;
+ width: 50px !important;
+ span {
+ font-size: 25px !important;
+ }
}
.avtiveAddIcons {
- background-color: aqua;
+ background-color: aqua;
}
</style>
--
Gitblit v1.9.3