3.3 1.自定义标签，退出后自动清除 2.自定义标签，转换二维码的数据格式ok，移动端对接二维码ok， 3.自定义标签点击移动到指定位置 ok 4....

liuyg

2022-03-04 a22aa1086eeef39a26cc161326ce09cd183185ea

 src/components/leftNav/index.vue

@@ -1,11 +1,12 @@
<template>
    <div class="left-nav">
        <ul>
            <li v-for="(item, index) in leftNavData"
      <li
        v-for="(item, index) in leftNavData"
                :key="index"
                @click="leftNavClick(item)">
                <img :src="item.img"
                     alt="">
        @click="leftNavClick(item)"
      >
        <img :src="item.img" alt="" />
                <span>{{item.label}}</span>
            </li>
        </ul>
@@ -13,46 +14,51 @@
</template>

<script>

import { getLifeList, getMonitorList, getSceneList, getWayList, getTagList } from '@/api/pc/leftNav/index'
import {
  getLifeList,
  getMonitorList,
  getSceneList,
  getWayList,
  getTagList,
} from "@/api/pc/leftNav/index";

export default {
    name: 'leftNav',
  name: "leftNav",
    computed: {},
    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'
          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'
          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'
          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'
          label: "监控",
          img: "/img/leftnav/monitor.png",
          normal: "/img/leftnav/monitor.png",
          checked: "/img/leftnav/monitor-checked.png",
          layer: "monitorLayer",
                },
                // {
                //     flag: false,
@@ -72,20 +78,20 @@
                // },
                {
                    flag: false,
                    label: '停车',
                    img: '/img/leftnav/park.png',
                    normal: '/img/leftnav/park.png',
                    checked: '/img/leftnav/park-checked.png',
                    layer: 'parkLayer'
          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'
                }
          label: "出入",
          img: "/img/leftnav/come.png",
          normal: "/img/leftnav/come.png",
          checked: "/img/leftnav/come-checked.png",
          layer: "comeLayer",
        },
            ],
            viewer: null,
            DC: null,
@@ -96,56 +102,54 @@
            activityLayer: null,
            aedLayer: null,
            parkLayer: null,
            comeLayer: null
        }
      comeLayer: null,
    };
    },
    created () {
        this.DC = global.DC
    this.DC = global.DC;
    },
    mounted () {

    },
  mounted() {},
    methods: {
        generatePosition (num) {
            const list = []
      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))
        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
      return list;
        },
        leftNavClick (item) {
            item.flag = !item.flag
      item.flag = !item.flag;
            if (item.flag == true) {
                item.img = item.checked
                this[item.layer].show = true
        item.img = item.checked;
        this[item.layer].show = true;
            } else {
                item.img = item.normal
                this[item.layer].show = false
        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)
      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 => {
      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),
                        `
@@ -158,15 +162,23 @@
                            </div>
                        </div>
                    `
                    )

                    this.tagLayer.addOverlay(divIcon)
                })
          );
          //订阅事件
          divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
            console.log(item);
            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 => {
      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),
                        `
@@ -179,14 +191,14 @@
                            </div>
                        </div>
                    `
                    )
                    this.wayLayer.addOverlay(divIcon)
                })
                this.wayLayer.show = false
            })
          );
          this.wayLayer.addOverlay(divIcon);
        });
        this.wayLayer.show = false;
      });

            getMonitorList().then(res => {
                res.data.data.forEach(item => {
      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),
                        `
@@ -195,35 +207,45 @@
                            <img class="monitor-entitys-box" src="/img/leftnav/map-monitor.png" alt="">
                        </div>
                        `
                    )
                    divIcon.attrParams = item
                    this.monitorLayer.addOverlay(divIcon)
          );
          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)
          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
            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
                            ]
                        })
              domId: "MonitorBox",
              position: [positions],
            });

                        this.$store.commit('SET_MONITORPOPUP', true)
                    })
                })
            this.$store.commit("SET_MONITORPOPUP", true);
          });
        });

                this.monitorLayer.show = false
            })
        this.monitorLayer.show = false;
      });

            getSceneList().then(res => {
                res.data.data.forEach(item => {
      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),
                        `
@@ -232,56 +254,75 @@
                            <img src="/img/leftnav/map-panorama.png" alt="">
                        </div>
                        `
                    )
                    divIcon.attrParams = item
                    this.sceneLayer.addOverlay(divIcon)
          );
          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)
          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
            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
                            ]
                        })
              domId: "PanoramaBox",
              position: [positions],
            });

                        this.$store.commit('SET_PANORAMAPOPUP', true)
                    })
                })
            this.$store.commit("SET_PANORAMAPOPUP", true);
          });
        });

                this.sceneLayer.show = false
            })
        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 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)
            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')
                    billboard.size = [20, 20]
          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.aedLayer.addOverlay(billboard)
                })
                this.aedLayer.show = false
            })
          this.aedLayer.addOverlay(billboard);
        });
        this.aedLayer.show = false;
      });

            getLifeList({ lifetype: 11 }).then(res => {
                res.data.data.forEach(item => {
      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),
                        `
@@ -298,41 +339,67 @@
                            </div>
                        </div>
                    `
                    )
                    this.parkLayer.addOverlay(divIcon)
                })
                this.parkLayer.show = false
            })
          );
          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)
      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)
            font: "14px sans-serif",
            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')
                    billboard.size = [20, 20]
          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 }
                    })
            pixelOffset: { x: 0, y: -16 },
          });

                    that.comeLayer.addOverlay(billboard)
                })
                this.comeLayer.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)
            )
          ),
        ],
      });
      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;