shuishen
2021-12-17 7804a3a4d61ff1d857973e974bbdf78a2e17feab
src/components/mobileLeftNav/index.vue
@@ -1,7 +1,7 @@
<template>
  <div class="m-left-nav" :style="[navStyle]">
    <!-- :style="[coutrolStyle]" -->
    <div class="m-left-coutrol" @click="iconHide = !iconHide">
    <div class="m-left-coutrol" @click="changeIconHide">
      <i :class="icons"></i>
    </div>
    <ul>
@@ -18,9 +18,9 @@
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "mobileLeftNav",
  computed: {},
  watch: {
    iconHide() {
      if (this.iconHide) {
@@ -34,10 +34,12 @@
      }
    },
  },
  computed: {
    ...mapGetters(["iconHide"]),
  },
  data() {
    return {
      icons: "el-icon-d-arrow-right",
      iconHide: false,
      navStyle: {
        right: "0px",
      },
@@ -132,6 +134,10 @@
  },
  mounted() {},
  methods: {
    changeIconHide() {
      let isif = this.iconHide;
      this.$store.commit("MSET_ICONHIDE", !isif);
    },
    generatePosition(num) {
      const list = [];
      for (let i = 0; i < num; i++) {
@@ -150,22 +156,30 @@
        item.img = item.normal;
        this[item.layer].show = false;
      }
      this.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗
    },
    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.VectorLayer("sceneLayer");
      viewer.addLayer(this.sceneLayer);
      this.activityLayer = new this.DC.VectorLayer("activityLayer");
      viewer.addLayer(this.activityLayer);
      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);
@@ -184,7 +198,18 @@
                        </div>
                    `
        );
        this.tagLayer.addOverlay(divIcon);
        //  e.overlay._position._lng,
        //       e.overlay._position._lat - 0.012,
        //订阅事件1
        divIcon.on(DC.MouseEventType.CLICK, (e) => {
          // 定制化窗体
          that.openPopupS(
            e.position,
            [e.overlay._position._lng, e.overlay._position._lat],
            { name: "标签" }
          );
        });
        this.tagLayer.addOverlay(divIcon); //标签
      });
      const positions2 = this.generatePosition(50);
@@ -202,7 +227,16 @@
                        </div>
                    `
        );
        this.wayLayer.addOverlay(divIcon);
        //订阅事件2
        divIcon.on(DC.MouseEventType.CLICK, (e) => {
          // 定制化窗体
          that.openPopupS(
            e.position,
            [e.overlay._position._lng, e.overlay._position._lat],
            { name: "道路" }
          );
        });
        this.wayLayer.addOverlay(divIcon); //道路
      });
      const positions3 = this.generatePosition(50);
@@ -212,7 +246,44 @@
          "/img/leftnav/map-panorama.png"
        );
        billboard.size = [16, 16];
        this.sceneLayer.addOverlay(billboard);
        //订阅事件3
        billboard.on(DC.MouseEventType.CLICK, (e) => {
          // 定制化窗体
          that.openPopupS(
            e.position,
            [e.wgs84Position.lng, e.wgs84Position.lat],
            { name: "实景" }
          );
        });
        this.sceneLayer.addOverlay(billboard); //实景
      });
      const positions10 = this.generatePosition(50);
      positions10.forEach((item) => {
        const label = new this.DC.Label(item, "活动");
        label.setStyle({
          fillColor: this.DC.Color.ORANGERED,
          font: "10px sans-serif",
          pixelOffset: { x: 0, y: -16 },
        });
        this.activityLayer.addOverlay(label);
        const billboard = new this.DC.Billboard(
          item,
          "/img/leftnav/map-aed.png"
          // "/img/leftnav/map-panorama.png"
        );
        billboard.size = [16, 16];
        //订阅事件10
        billboard.on(DC.MouseEventType.CLICK, (e) => {
          // 定制化窗体
          that.openPopupS(
            e.position,
            [e.wgs84Position.lng, e.wgs84Position.lat],
            { name: "活动" }
          );
        });
        this.activityLayer.addOverlay(billboard); //活动
      });
      const positions4 = this.generatePosition(10);
@@ -230,8 +301,16 @@
          "/img/leftnav/map-aed.png"
        );
        billboard.size = [16, 16];
        this.aedLayer.addOverlay(billboard);
        //订阅事件4
        billboard.on(DC.MouseEventType.CLICK, (e) => {
          // 定制化窗体
          that.openPopupS(
            e.position,
            [e.wgs84Position.lng, e.wgs84Position.lat],
            { name: "建筑AED" }
          );
        });
        this.aedLayer.addOverlay(billboard); //AED
      });
      const positions5 = this.generatePosition(120);
@@ -253,6 +332,15 @@
                        </div>
                    `
        );
        //订阅事件5
        divIcon.on(DC.MouseEventType.CLICK, (e) => {
          // 定制化窗体
          that.openPopupS(
            e.position,
            [e.overlay._position._lng, e.overlay._position._lat],
            { name: "校外街路侧停车场" }
          );
        });
        this.parkLayer.addOverlay(divIcon);
      });
@@ -273,17 +361,42 @@
          "/img/leftnav/map-activity.png"
        );
        billboard.size = [16, 16];
        //订阅事件6
        billboard.on(DC.MouseEventType.CLICK, (e) => {
          // 定制化窗体
          that.openPopupS(
            e.position,
            [e.wgs84Position.lng, e.wgs84Position.lat],
            { name: "123" }
          );
        });
        this.comeLayer.addOverlay(billboard);
      });
      this.tagLayer.show = false;
      this.wayLayer.show = false;
      this.sceneLayer.show = false;
      this.activityLayer.show = false;
      this.aedLayer.show = false;
      this.parkLayer.show = false;
      this.comeLayer.show = false;
    },
    mobileOpenImgs1() {
      let imgsDom = document.getElementById("mobileBigImgs");
      imgsDom.click();
    },
    goOn1() {},
    openPopupS(position, lntLat, query) {
      let that = this;
      // 定制化窗体
      let d = {
        position,
        lntLat,
        query: { ...(query || {}), position, lntLat },
        useJWD: true, //仅使用经纬度
      };
      that.$store.dispatch("setMobileWindows", d);
    },
  },
};
</script>