1

mayisheng

2022-08-15 81f54040c2cb65537c6c6e1db8358a39a57dea0d

 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>