+,请求数据，弹框显示，优化代码长度

liuyg

2021-12-21 81773ab04fd259e893c2d7f08dbdc9be772d01c4

 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>
@@ -14,41 +14,13 @@
        <span>{{ item.label }}</span>
      </li>
    </ul>
    <div
      ref="mobile-mapContentContent"
      v-show="popupWindow1"
      id="mobile-map_MP1"
    >
      <div class="mobile-popup-imgs-heard">
        <img :src="url1" alt="" />
        <el-image
          style="width: 100px; height: 100px"
          :src="url1"
          id="mobileBigImgs"
          v-show="false"
          :preview-src-list="srcList1"
        >
        </el-image>
        南门口
      </div>
      <div class="mobile-popup-control">
        <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs1"
          >图集</el-link
        >
        <el-divider direction="vertical"></el-divider>
        <el-link icon="el-icon-map-location">实景</el-link>
        <el-divider direction="vertical"></el-divider>
        <el-link icon="el-icon-aim" @click="goOn1">去这</el-link>
      </div>
    </div>
    <!-- 地图图标弹窗↑ -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "mobileLeftNav",
  computed: {},
  watch: {
    iconHide() {
      if (this.iconHide) {
@@ -62,16 +34,12 @@
      }
    },
  },
  computed: {
    ...mapGetters(["iconHide"]),
  },
  data() {
    return {
      popupWindow1: false,
      url1: "/img/job/one.jpg",
      srcList1: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      icons: "el-icon-d-arrow-right",
      iconHide: false,
      navStyle: {
        right: "0px",
      },
@@ -166,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++) {
@@ -176,8 +148,6 @@
      return list;
    },
    leftNavClick(item) {
      // console.log(item);
      this.popupWindow1 = false;
      item.flag = !item.flag;
      if (item.flag == true) {
        item.img = item.checked;
@@ -186,6 +156,7 @@
        item.img = item.normal;
        this[item.layer].show = false;
      }
      this.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗
    },
    initialize(viewer) {
      var that = this;
@@ -193,20 +164,27 @@
      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);

      const positions1 = this.generatePosition(50);
      // console.log(positions1);
      positions1.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
@@ -221,29 +199,18 @@
                        </div>
                    `
        );
        this.tagLayer.addOverlay(divIcon);
        //  e.overlay._position._lng,
        //       e.overlay._position._lat - 0.012,
        //订阅事件1
        divIcon.on(DC.MouseEventType.CLICK, (e) => {
          // console.log(e);
          that.popupWindow1 = true;
          // 定制化窗体
          var divForms = new DC.mobileDivForms(viewer, {
            domId: "mobilePopup",
            title: "成教楼  ",
            className: "mobilePopup",
            content: document.getElementById("mobile-map_MP1"),
            position: [e.position],
          });
          viewer.zoomToPosition(
            new DC.Position(
              e.overlay._position._lng,
              e.overlay._position._lat - 0.012,
              1530,
              0,
              -45
            )
          that.openPopupS(
            e.position,
            [e.overlay._position._lng, e.overlay._position._lat],
            { name: "标签" }
          );
        });
        this.tagLayer.addOverlay(divIcon); //标签
      });

      const positions2 = this.generatePosition(50);
@@ -261,7 +228,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);
@@ -271,7 +247,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);
@@ -289,8 +302,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);
@@ -312,6 +333,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);
      });

@@ -332,13 +362,22 @@
          "/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;
@@ -348,6 +387,17 @@
      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>