+位置和细节,左侧导航栏接口，点击弹窗

liuyg

2021-12-22 eb71fd6eacc6cac2e704f57c472e181cbb20990c

 src/components/mobileLeftNav/index.vue

@@ -19,6 +19,13 @@

<script>
import { mapGetters } from "vuex";
import {
  getListdoor, //出入
  getListaed, //AED
  getListparking, //停车场
  getListarchitecture, //全景
  getListarchitecture1, //标签
} from "@/api/mobile/piont/index";
export default {
  name: "mobileLeftNav",
  watch: {
@@ -68,15 +75,19 @@
          normal: "/img/leftnav/tag.png",
          checked: "/img/leftnav/tag-checked.png",
          layer: "tagLayer",
          methods: getListarchitecture1,
          imgSrc: "img/mobile/pink.png",
        },
        {
          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/way.png",
        //   normal: "/img/leftnav/way.png",
        //   checked: "/img/leftnav/way-checked.png",
        //   layer: "wayLayer",
        //   methods: getListdoor,
        //   imgSrc: "img/mobile/green.png",
        // },
        {
          flag: false,
          label: "实景",
@@ -84,15 +95,19 @@
          normal: "/img/leftnav/scene.png",
          checked: "/img/leftnav/scene-checked.png",
          layer: "sceneLayer",
          methods: getListarchitecture,
          imgSrc: "img/mobile/blue.png",
        },
        {
          flag: false,
          label: "活动",
          img: "/img/leftnav/activity.png",
          normal: "/img/leftnav/activity.png",
          checked: "/img/leftnav/activity-checked.png",
          layer: "activityLayer",
        },
        // {
        //   flag: false,
        //   label: "活动",
        //   img: "/img/leftnav/activity.png",
        //   normal: "/img/leftnav/activity.png",
        //   checked: "/img/leftnav/activity-checked.png",
        //   layer: "activityLayer",
        //   methods: getListdoor,
        //   imgSrc: "img/mobile/brown.png",
        // },
        {
          flag: false,
          label: "AED",
@@ -100,6 +115,8 @@
          normal: "/img/leftnav/aed.png",
          checked: "/img/leftnav/aed-checked.png",
          layer: "aedLayer",
          methods: getListaed,
          imgSrc: "img/mobile/pink.png",
        },
        {
          flag: false,
@@ -108,6 +125,8 @@
          normal: "/img/leftnav/park.png",
          checked: "/img/leftnav/park-checked.png",
          layer: "parkLayer",
          methods: getListparking,
          imgSrc: "img/mobile/popcorn.png",
        },
        {
          flag: false,
@@ -116,6 +135,8 @@
          normal: "/img/leftnav/come.png",
          checked: "/img/leftnav/come-checked.png",
          layer: "comeLayer",
          methods: getListdoor,
          imgSrc: "img/mobile/purple.png",
        },
      ],
      viewer: null,
@@ -148,15 +169,46 @@
      return list;
    },
    leftNavClick(item) {
      //判断并关闭已开启标签
      let lnd = this.leftNavData;
      for (let k in lnd) {
        // console.log(this[this.leftNavData[k].layer]);
        if (lnd[k].label == item.label) {
          // console.log(lnd[k].label, "当前点击");
          continue;
        }
        if (this[this.leftNavData[k].layer]._show) {
          // console.log(lnd[k].label, "所有开启");
          this.leftNavData[k].flag = false;
          this.leftNavData[k].img = this.leftNavData[k].normal;
          this[this.leftNavData[k].layer].show = false;
        }
      }

      item.flag = !item.flag;
      if (item.flag == true) {
        item.img = item.checked;
        this[item.layer].show = true;
        // console.log("飞入");
        this.flyTo(item);
        this.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗
      } else {
        item.img = item.normal;
        this[item.layer].show = false;
      }
      this.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗
    },
    flyTo(item) {
      let posi = this[item.layer].positions[0];
      // console.log(posi);
      this.$store.dispatch("mapFlyTo", {
        //飞入
        lntLat: [posi.lng + 0.01187, posi.lat - 0.0308, 4000],
        // lntLat: [121.50492752204283, 31.21567802276832, 2530],
        heading: 0,
        pitch: -45,
        roll: 0,
        noOpen: true,
      });
    },
    initialize(viewer) {
      var that = this;
@@ -168,219 +220,272 @@
      this.wayLayer = new this.DC.HtmlLayer("wayLayer");
      viewer.addLayer(this.wayLayer);

      this.sceneLayer = new this.DC.VectorLayer("sceneLayer");
      // this.sceneLayer = new this.DC.VectorLayer("sceneLayer");
      this.sceneLayer = new this.DC.HtmlLayer("sceneLayer");
      viewer.addLayer(this.sceneLayer);

      this.activityLayer = new this.DC.VectorLayer("activityLayer");
      // this.activityLayer = new this.DC.VectorLayer("activityLayer");
      this.activityLayer = new this.DC.HtmlLayer("activityLayer");
      viewer.addLayer(this.activityLayer);

      this.aedLayer = new this.DC.VectorLayer("aedLayer");
      // this.aedLayer = new this.DC.VectorLayer("aedLayer");
      this.aedLayer = new this.DC.HtmlLayer("aedLayer");
      viewer.addLayer(this.aedLayer);

      this.parkLayer = new this.DC.HtmlLayer("parkLayer");
      viewer.addLayer(this.parkLayer);

      this.comeLayer = new this.DC.VectorLayer("comeLayer");
      // this.comeLayer = new this.DC.VectorLayer("comeLayer");
      this.comeLayer = new this.DC.HtmlLayer("comeLayer");
      viewer.addLayer(this.comeLayer);

      const positions1 = this.generatePosition(50);
      // console.log(positions1);
      positions1.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
      // const positions1 = this.generatePosition(4);
      // positions1.forEach((item, index) => {
      //   const divIcon = new this.DC.DivIcon(
      //     item,
      //     `
      //                   <div class="tag-entitys-box">
      //                       <div class="tag-content">
      //                           南门口
      //                       </div>
      //                       <div class="tag-angle-content">
      //                           <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
      //                       </div>
      //                   </div>
      //               `
      //   );
      //   //  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); //标签
      // });
      // this.tagLayer["positions"] = positions1;

      // const positions2 = this.generatePosition(50);
      // positions2.forEach((item, index) => {
      //   const divIcon = new this.DC.DivIcon(
      //     item,
      //     `
      //                   <div  class="way-entitys-box">
      //                       <div  class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff;  width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
      //                           工建街
      //                       </div>
      //                       <div  class="way-sign-box">
      //                           <img src="https://map.hit.edu.cn/images/roadsign3.png">
      //                       </div>
      //                   </div>
      //               `
      //   );
      //   //订阅事件2
      //   divIcon.on(DC.MouseEventType.CLICK, (e) => {
      //     // 定制化窗体
      //     that.openPopupS(
      //       e.position,
      //       [e.overlay._position._lng, e.overlay._position._lat],
      //       { name: "道路" }
      //     );
      //   });
      //   this.wayLayer.addOverlay(divIcon); //道路
      // });
      // this.wayLayer["positions"] = positions2;

      // const positions3 = this.generatePosition(50);
      // positions3.forEach((item) => {
      //   const billboard = new this.DC.Billboard(
      //     item,
      //     "/img/leftnav/map-panorama.png"
      //   );
      //   billboard.size = [16, 16];
      //   //订阅事件3
      //   billboard.on(DC.MouseEventType.CLICK, (e) => {
      //     // 定制化窗体
      //     that.openPopupS(
      //       e.position,
      //       [e.wgs84Position.lng, e.wgs84Position.lat],
      //       { name: "实景" }
      //     );
      //   });
      //   this.sceneLayer.addOverlay(billboard); //实景
      // });
      // this.sceneLayer["positions"] = positions3;

      // 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); //活动
      // });
      // this.activityLayer["positions"] = positions10;

      // const positions4 = this.generatePosition(10);
      // positions4.forEach((item, index) => {
      //   const label = new this.DC.Label(item, "建筑AED");
      //   label.setStyle({
      //     fillColor: this.DC.Color.ORANGERED,
      //     font: "10px sans-serif",
      //     pixelOffset: { x: 0, y: -16 },
      //   });
      //   this.aedLayer.addOverlay(label);

      //   const billboard = new this.DC.Billboard(
      //     item,
      //     "/img/leftnav/map-aed.png"
      //   );
      //   billboard.size = [16, 16];
      //   //订阅事件4
      //   billboard.on(DC.MouseEventType.CLICK, (e) => {
      //     // 定制化窗体
      //     that.openPopupS(
      //       e.position,
      //       [e.wgs84Position.lng, e.wgs84Position.lat],
      //       { name: "建筑AED" }
      //     );
      //   });
      //   this.aedLayer.addOverlay(billboard); //AED
      // });
      // this.aedLayer["positions"] = positions4;

      // const positions5 = this.generatePosition(120);
      // positions5.forEach((item, index) => {
      //   const divIcon = new this.DC.DivIcon(
      //     item,
      //     `
      //                   <div class="park-entitys-box">
      //                       <div class="park-title" alt="校外街路侧停车场">
      //                       </div>
      //                       <div class="park-sign-box">
      //                           <div>
      //                               <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="校外街路侧停车场" title="校外街路侧停车场">
      //                           </div>
      //                           <div>
      //                               <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
      //                           </div>
      //                       </div>
      //                   </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);
      // });
      // this.parkLayer["positions"] = positions5;

      // const positions6 = this.generatePosition(10);

      // positions6.forEach((item, index) => {
      //   const label = new this.DC.Label(item, "123");
      //   label.setStyle({
      //     fillColor: this.DC.Color.PURPLE,
      //     outlineColor: this.DC.Color.WHITE, // 边框颜色
      //     outlineWidth: 2, // 边框大小，
      //     font: "10px sans-serif",
      //     pixelOffset: { x: 0, y: -16 },
      //   });
      //   this.comeLayer.addOverlay(label);

      //   const billboard = new this.DC.Billboard(
      //     item,
      //     "/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.comeLayer["positions"] = positions6;
      let ourNum = that.leftNavData.length;
      for (let n = 0; n < ourNum; n++) {
        this.leftNavData[n].methods().then((res) => {
          let data = res.data.data;
          let position = that.changePoiton(data);
          let num = data.length;
          for (let k = 0; k < num; k++) {
            const divIcon = new that.DC.DivIcon(
              position[k],
              `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
                                南门口
                               ${data[k].mechanismname}
                            </div>
                            <div class="tag-angle-content">
                                <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
                                <img src="${this.leftNavData[n].imgSrc}">
                            </div>
                        </div>
                    `
        );
        //  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: "标签" }
          );
            );
            //订阅事件
            divIcon.on(DC.MouseEventType.CLICK, (e) => {
              // console.log(data[k]);
              let d = {
                name: data[k].mechanismname,
                bgImg: data[k].tpurl,
                introduce: data[k].introduce,
              };
              // 定制化窗体
              that.openPopupS(
                e.position,
                [e.overlay._position._lng, e.overlay._position._lat],
                d
              );
            });
            that[that.leftNavData[n].layer].addOverlay(divIcon); //加入图标
          }
          that[that.leftNavData[n].layer]["positions"] = position;
          that[that.leftNavData[n].layer].show = false;
        });
        this.tagLayer.addOverlay(divIcon); //标签
      });

      const positions2 = this.generatePosition(50);
      positions2.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
                        <div  class="way-entitys-box">
                            <div  class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff;  width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
                                工建街
                            </div>
                            <div  class="way-sign-box">
                                <img src="https://map.hit.edu.cn/images/roadsign3.png">
                            </div>
                        </div>
                    `
        );
        //订阅事件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);
      positions3.forEach((item) => {
        const billboard = new this.DC.Billboard(
          item,
          "/img/leftnav/map-panorama.png"
        );
        billboard.size = [16, 16];
        //订阅事件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);
      positions4.forEach((item, index) => {
        const label = new this.DC.Label(item, "建筑AED");
        label.setStyle({
          fillColor: this.DC.Color.ORANGERED,
          font: "10px sans-serif",
          pixelOffset: { x: 0, y: -16 },
        });
        this.aedLayer.addOverlay(label);

        const billboard = new this.DC.Billboard(
          item,
          "/img/leftnav/map-aed.png"
        );
        billboard.size = [16, 16];
        //订阅事件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);
      positions5.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
                        <div class="park-entitys-box">
                            <div class="park-title" alt="校外街路侧停车场">
                            </div>
                            <div class="park-sign-box">
                                <div>
                                    <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="校外街路侧停车场" title="校外街路侧停车场">
                                </div>
                                <div>
                                    <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
                                </div>
                            </div>
                        </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);
      });

      const positions6 = this.generatePosition(10);
      positions6.forEach((item, index) => {
        const label = new this.DC.Label(item, "123");
        label.setStyle({
          fillColor: this.DC.Color.PURPLE,
          outlineColor: this.DC.Color.WHITE, // 边框颜色
          outlineWidth: 2, // 边框大小，
          font: "10px sans-serif",
          pixelOffset: { x: 0, y: -16 },
        });
        this.comeLayer.addOverlay(label);

        const billboard = new this.DC.Billboard(
          item,
          "/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;
      }
    },
    changePoiton(data) {
      // console.log(data);
      const list = [];
      let num = data.length;
      for (let i = 0; i < num; i++) {
        list.push(new this.DC.Position(data[i].jd, data[i].wd, 0));
      }
      return list;
    },
    mobileOpenImgs1() {
      let imgsDom = document.getElementById("mobileBigImgs");