++

liuyg

2022-03-05 01f9c88fd0ee768155e5b341c2bb95a85bc11a08

 src/components/mobileLeftNav/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="m-left-nav" :style="[navStyle]">
  <div :class="['m-left-nav', seeRight ? '' : 'nones']" :style="[navStyle]">
    <!-- :style="[coutrolStyle]" -->
    <div class="m-left-coutrol" @click="changeIconHide">
      <i :class="icons"></i>
@@ -9,6 +9,7 @@
        v-for="(item, index) in leftNavData"
        :key="index"
        @click="leftNavClick(item)"
        v-show="!item.notShow"
      >
        <img :style="[imgStyle]" :src="item.img" alt="" />
        <span>{{ item.label }}</span>
@@ -43,9 +44,26 @@
        this.imgStyle.right = "0";
      }
    },
    seeRight() {
      if (this.seeRight) {
        this.leftNavData[0].flag = false;
        this.leftNavData[0].img = this.leftNavData[0].checked;
        this[this.leftNavData[0].layer].show = true;
      } else {
        let lnd = this.leftNavData;
        for (let k in lnd) {
          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;
          }
        }
      }
    },
  },
  computed: {
    ...mapGetters(["iconHide"]),
    ...mapGetters(["iconHide", "dimensionData", "seeRight"]),
  },
  data() {
    return {
@@ -56,25 +74,12 @@
      imgStyle: {
        right: "0",
      },
      //   coutrolStyle: {
      //     position: " absolute",
      //     left: "-26px",
      //     top: "114px",
      //     right: "auto",
      //     width: "25px",
      //     height: "60px",
      //     backgroundColor: "#fff",
      //     borderRadius: "10px",
      //     display: "flex",
      //     alignItems: "center",
      //     justifyContent: "center",
      //     transition: "left 3s",
      //   },
      leftNavData: [
        {
          flag: false,
          flag: true,
          label: "标签",
          img: "/img/leftnav/tag.png",
          // img: "/img/leftnav/tag.png",
          img: "/img/leftnav/tag-checked.png",
          normal: "/img/leftnav/tag.png",
          checked: "/img/leftnav/tag-checked.png",
          layer: "tagLayer",
@@ -111,7 +116,7 @@
          checked: "/img/leftnav/monitor-checked.png",
          layer: "videoLayer",
          methods: getListVideo,
          imgSrc: "img/leftnav/map-panorama.png",
          imgSrc: "/img/leftnav/map-monitor.png",
          // imgSrc: "img/mobile/blue.png",
        },
        // {
@@ -135,6 +140,7 @@
          type: 9,
          imgSrc: "img/leftnav/map-aed.png",
          // imgSrc: "img/mobile/pink.png",
          notShow: true,
        },
        {
          flag: false,
@@ -182,16 +188,8 @@
      let isif = this.iconHide;
      this.$store.commit("MSET_ICONHIDE", !isif);
    },
    generatePosition(num) {
      const list = [];
      for (let i = 0; i < num; i++) {
        const lng = 121.0493 + Math.random() * 0.5;
        const lat = 31.2583 + Math.random() * 0.5;
        list.push(new this.DC.Position(lng, lat, 0));
      }
      return list;
    },
    leftNavClick(item) {
      // console.log(123132);
      //判断并关闭已开启标签
      let lnd = this.leftNavData;
      for (let k in lnd) {
@@ -213,7 +211,7 @@
        item.img = item.checked;
        this[item.layer].show = true;
        // console.log("飞入");
        this.flyTo(item);
        // this.flyTo(item);
        this.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗
      } else {
        item.img = item.normal;
@@ -221,16 +219,29 @@
      }
    },
    flyTo(item) {
      let that = this;
      let posi = this[item.layer].positions[0];
      // console.log(posi);
      let lntLat =
        that.dimensionData.pitch == -45
          ? [posi.lng + 0.00917, posi.lat - 0.0188, 500]
          : [posi.lng + 0.01197, posi.lat - 0.00055, 500];
      // that.mviewer.camera.flyTo({
      //   destination: Cesium.Cartesian3.fromDegrees(
      //     lntLat[0],
      //     lntLat[1],
      //     lntLat[2]
      //   ),
      // });
      // return;
      this.$store.dispatch("mapFlyTo", {
        //飞入
        lntLat: [posi.lng + 0.00917, posi.lat - 0.0188, 2100],
        lntLat: lntLat,
        // lntLat: [posi.lng + 0.01187, posi.lat - 0.0308, 4000],
        // lntLat: [121.50492752204283, 31.21567802276832, 2530],
        heading: 0,
        pitch: -45,
        roll: 0,
        heading: that.dimensionData.heading,
        pitch: that.dimensionData.pitch,
        roll: that.dimensionData.roll,
        noOpen: true,
      });
    },
@@ -266,203 +277,6 @@
      this.comeLayer = new this.DC.HtmlLayer("comeLayer");
      viewer.addLayer(this.comeLayer);

      // 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++) {
        let ourD = this.leftNavData[n];
@@ -491,7 +305,7 @@
              dom = `
                        <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;">
                                ${data[k].roadname}
                                 ${data[k].roadname}
                            </div>
                            <div  class="way-sign-box">
                                <img src="https://map.hit.edu.cn/images/roadsign3.png">
@@ -503,12 +317,11 @@
              //    ${data[k].mechanismname}
              // </div>
              dom = `
                        <div  class="way-entitys-box mobile-way-entitys-box">
                            <div  class="way-sign-box ">
                                <img src="img/leftnav/map-panorama.png">
                            </div>
                        <div class="scene-entitys-box">
                            <div>${data[k].mechanismname}</div>
                            <img src="/img/leftnav/map-panorama.png" alt="">
                        </div>
                    `;
                        `;
            } else if (ourD.label == "AED") {
              dom = `
                        <div class="mobiletag-entitys-box">
@@ -548,15 +361,11 @@
                    `;
            } else if (ourD.label == "监控") {
              dom = `
                        <div class="mobiletag-entitys-box-pink">
                            <div class="tag-content">
                              监控
                            </div>
                            <div class="tag-angle-content">
                                <img src="${ourD.imgSrc}">
                            </div>
                        <div class="monitor-entitys-box">
                            <div>${data[k].mechanismname}</div>
                            <img class="monitor-entitys-box" src="/img/leftnav/map-monitor.png" alt="">
                        </div>
                    `;
                        `;
            }
            const divIcon = new that.DC.DivIcon(position[k], dom);
            //订阅事件
@@ -566,13 +375,12 @@
                name:
                  data[k].mechanismname ||
                  data[k].roadname ||
                  ourD.label == "监控"
                    ? "监控"
                    : "无显示名字",
                  (ourD.label == "监控" ? "监控" : "无显示名字"),
                bgImg: data[k].tpurl,
                video: data[k].videourl || "",
                from: "labels",
                introduce: data[k].introduce,
                panoramaurl: data[k].panoramaurl,
              };
              // 定制化窗体
              that.openPopupS(
@@ -584,9 +392,16 @@
            that[that.leftNavData[n].layer].addOverlay(divIcon); //加入图标
          }
          that[that.leftNavData[n].layer]["positions"] = position;
          that[that.leftNavData[n].layer].show = false;
          if (that.leftNavData[n].layer == "tagLayer") {
            // that.leftNavData[n].img = that.leftNavData[n].checked;
          } else {
            that[that.leftNavData[n].layer].show = false;
          }
        });
      }
      // setTimeout(() => {
      //   this.tagLayer.show = false;
      // }, 500);
    },
    changePoiton(data) {
      // console.log(data);
@@ -617,7 +432,7 @@
};
</script>

<style scoped lang='scss'>
<style scoped lang="scss">
.m-left-nav {
  position: fixed;
  bottom: 30px;
@@ -629,7 +444,7 @@
  .m-left-coutrol {
    position: absolute;
    left: -24px;
    top: 96px;
    top: 79px;
    width: 25px;
    height: 60px;
    background-color: #fff;
@@ -677,4 +492,7 @@
    }
  }
}
.nones {
  display: none;
}
</style>