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

liuyg

2021-12-22 eb71fd6eacc6cac2e704f57c472e181cbb20990c

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

 public/img/mobile/blue.png

 public/img/mobile/brown.png

 public/img/mobile/green.png

 public/img/mobile/pink.png

 public/img/mobile/popcorn.png

 public/img/mobile/purple.png

 public/img/mobile/yellow.png

 src/api/mobile/livingFacilities/index.js

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-05-09 15:17:44
 * @Last Modified by: liu
 * @Last Modified time: 2021-12-21 09:57:32
 * @Last Modified time: 2021-12-22 11:12:21
 */
// 生活设施
import request from '@/router/axios'
@@ -88,12 +88,12 @@
    })
}

// //停车场
// export const getListnetwork = (params) => { //获取生活设施
//     return request({
//         url: 'blade-parking/parking/list',
//         method: 'get',
//         params: params
//     })
// }
//圈存机
export const getListtransference = (params) => { //获取生活设施
    return request({
        url: 'blade-transference/transference/list',
        method: 'get',
        params: params
    })
}


 src/api/mobile/outIn/index.js

New file
@@ -0,0 +1,16 @@
/*
 * @Author: Morpheus
 * @Date: 2021-05-09 15:17:44
 * @Last Modified by: liu
 * @Last Modified time: 2021-12-22 09:59:35
 */
// 出入口
import request from '@/router/axios'

export const getListdoor = (params) => { //获取党群机构
    return request({
        url: 'blade-door/door/list',
        method: 'get',
        params: params
    })
}

 src/api/mobile/piont/index.js

New file
@@ -0,0 +1,99 @@
/*
 * @Author: Morpheus
 * @Date: 2021-05-09 15:17:44
 * @Last Modified by: liu
 * @Last Modified time: 2021-12-22 15:59:10
 */
// 标签
import request from '@/router/axios'


//出入
export const getListdoor = (params) => { //获取生活设施
    return request({
        url: 'blade-door/door/selectDoor',
        method: 'get',
        params: params
    })
}
//AED
export const getListaed = (params) => { //获取生活设施
    return request({
        url: 'blade-aed/aed/selectAed',
        method: 'get',
        params: params
    })
}

//停车场
export const getListparking = (params) => { //获取生活设施
    return request({
        url: 'blade-parking/parking/selectPark',
        method: 'get',
        params: params
    })
}

// 全景
export const getListarchitecture = (params) => { //获取生活设施
    return request({
        url: 'blade-architecture/architecture/selectArch',
        method: 'get',
        params: params
    })
}

//标签
export const getListarchitecture1 = (params) => { //获取生活设施
    return request({
        url: 'blade-architecture/architecture/selectArchALL',
        method: 'get',
        params: params
    })
}

// //打字复印
// export const getListduplicate = (params) => { //获取生活设施
//     return request({
//         url: 'blade-duplicate/duplicate/list',
//         method: 'get',
//         params: params
//     })
// }

// //银行网点
// export const getListnetwork = (params) => { //获取生活设施
//     return request({
//         url: 'blade-network/network/list',
//         method: 'get',
//         params: params
//     })
// }

// //AED
// export const getListaed = (params) => { //获取生活设施
//     return request({
//         url: 'blade-aed/aed/list',
//         method: 'get',
//         params: params
//     })
// }

// //通讯
// export const getListsignal = (params) => { //获取生活设施
//     return request({
//         url: 'blade-signal/signal/list',
//         method: 'get',
//         params: params
//     })
// }

// //圈存机
// export const getListtransference = (params) => { //获取生活设施
//     return request({
//         url: 'blade-transference/transference/list',
//         method: 'get',
//         params: params
//     })
// }


 src/components/mobileCortrol/index.vue

@@ -25,10 +25,12 @@
    zoomIn(val) {
      this.$store.dispatch("mapFlyTo", {
        //飞入
        lntLat: [121.50492752204283, 31.21567802276832, 2530],
        lntLat: [115.87186406, 28.74449337, 1200],
        // lntLat: [121.50492752204283, 31.21567802276832, 2530],
        heading: 0,
        pitch: -45,
        roll: 0,
        noOpen: true,
      });
    },
  },
@@ -39,12 +41,12 @@
.m-left-control {
  position: fixed;
  left: 20px;
  top: 87px;
  top: 93px;
  z-index: 20 !important;
  .m-l-inbut {
    width: 35px;
    height: 35px;
    background-color: #c9302c;
    background-color: rgb(33, 150, 243);
    display: flex;
    align-items: center;
    justify-content: center;

 src/components/mobileCortrolButtom/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="m-left-mobileCortrolButtom">
    <div class="m-l-inbut" @click="mubiao"><i class="el-icon-s-help"></i></div>
    <!-- <div class="m-l-inbut" @click="mubiao"><i class="el-icon-s-help"></i></div> -->
    <div class="m-l-inbut">
      <!-- <i class="el-icon-s-flag"></i> -->
      <el-dropdown trigger="click" @command="handleCommand">
@@ -20,7 +20,7 @@
    <div class="m-l-inbut" @click="openBigPopupAfter">
      <i class="el-icon-menu"></i>
    </div>
    <div class="m-l-inbut" @click="goOn"><i class="el-icon-location"></i></div>
    <!-- <div class="m-l-inbut" @click="goOn"><i class="el-icon-location"></i></div> -->
  </div>
</template>

@@ -77,6 +77,7 @@
        heading: 0,
        pitch: -45,
        roll: 0,
        noOpen: true,
      });
    },
    openBigPopupAfter() {
@@ -137,7 +138,7 @@
    float: left;
    width: 39px;
    height: 39px;
    background-color: #c9302c;
    background-color: rgb(33, 150, 243);
    display: flex;
    align-items: center;
    justify-content: center;

 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");

 src/components/mobilePopupOur/index.vue

@@ -37,7 +37,7 @@
        ></el-empty>
        <mobilePopupOurOnce
          v-for="(citem, cindex) in onlyData"
          :key="citem.bgImg + ''"
          :key="citem.icons + ''"
          :ends="onlyData.length - 1 == cindex"
          :onceData="citem"
        ></mobilePopupOurOnce>
@@ -61,10 +61,11 @@
            ></el-empty>
            <mobilePopupOurOnce
              v-for="(citem, cindex) in item.child"
              :key="citem.icon + ''"
              :key="citem.icons"
              :ends="item.child.length - 1 == cindex"
              :onceData="citem"
            ></mobilePopupOurOnce>
            <!-- {{ citem.icon }} -->
            <div v-show="item.child.length != 0">
              <el-divider content-position="left">
                <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;&nbsp;暂无更多
@@ -141,7 +142,7 @@
    getDataHeardDown() {
      if (this.choiceMain == "机构单位") {
        //不请求头部标签页数据
        this.getOutList(this.activeName, this.choiceKey);
        this.getOutList(this.choiceKey);
        return;
      }
      //获取头下部标签页
@@ -162,10 +163,34 @@
    //请求
    getOutList(campus, type) {
      let that = this;
      this.choiceMethod({ campus: campus, type: type }).then((res) => {
      let d;
      if (this.choiceMain == "机构单位") {
        // 不传标签页
        d = {
          type: type,
        };
      } else if (
        this.choiceMain == "生活设施" ||
        this.choiceMain == "出入口" ||
        this.choiceMain == "停车场"
      ) {
        // 不传头部下拉菜单，因为请求链接不同
        d = {
          campus: campus,
        };
      } else {
        d = {
          campus: campus,
          type: type,
        };
      }
      this.choiceMethod(d).then((res) => {
        const data = res.data.data;
        let outList = [];
        if (this.choiceMain == "校园建筑") {
        if (
          this.mBigPopup.name == "校园建筑" ||
          this.mBigPopup.name == "文化风景"
        ) {
          // 校园建筑使用该id获取具体信息
          data.forEach((item) => {
            let icon = item.tpurl.split(",");
@@ -173,6 +198,7 @@
              id: item.id,
              name: item.mechanismname,
              icon: icon,
              icons: icon + item.mechanismname, //图片响应改变
              from: this.choiceMain,
              buts:
                this.mBigPopup.name == "校园建筑" ||
@@ -185,7 +211,7 @@
          //正常获取全部数据
          data.records.forEach((item) => {
            let icon = item.tpurl.split(",");
            outList.push({
            let useData = {
              name: item.mechanismname,
              lntLat: [item.jd, item.wd],
              alt: item.gd,
@@ -194,6 +220,7 @@
              roll: item.roll,
              bgImg: item.tpurl,
              icon: icon,
              icons: icon + item.mechanismname, //图片响应改变
              from: this.choiceMain,
              QRImg: item.codeurl,
              websiteUrl: item.websiteurl,
@@ -205,7 +232,8 @@
                that.mBigPopup.name == "文化风景"
                  ? ["定位", "实景", "图集"]
                  : ["定位"],
            });
            };
            outList.push(useData);
          });
        }
        that.fullscreenLoading = false;

 src/components/mobilePopupOurAfter/index.vue

@@ -44,7 +44,9 @@
  getListnetwork,
  getListaed,
  getListsignal,
  getListtransference,
} from "@/api/mobile/livingFacilities/index"; //生活设施
import { getListdoor } from "@/api/mobile/outIn/index"; //出入口
import { getListparking } from "@/api/mobile/stop/index"; //停车场
export default {
  name: "mobilePopupOurAfter",
@@ -107,18 +109,14 @@
        { name: "校内医疗", type: 3, method: getListmedical },
        { name: "邮寄快递", type: 4, method: getListmail },
        { name: "学生浴室", type: 5, method: getListbathroom },
        // { name: "圈存机", type: 6 ,method:getListlivingFacilitiesr},
        { name: "圈存机", type: 6, method: getListtransference },
        { name: "打字复印", type: 7, method: getListduplicate },
        { name: "AED", type: 8, method: getListaed },
        { name: "银行网点", type: 9, method: getListnetwork },
        { name: "通信营业厅", type: 10, method: getListsignal },
      ],
      openData4: [
        { name: "文化风景", type: 1, method: getListlivingFacilitiesr },
      ],
      openData5: [
        { name: "出入口", type: 1, method: getListlivingFacilitiesr },
      ],
      openData4: [{ name: "文化风景", type: 5, method: getChildNavList }],
      openData5: [{ name: "出入口", type: 1, method: getListdoor }],
      openData6: [{ name: "停车场", type: 1, method: getListparking }],
    };
  },
@@ -152,6 +150,24 @@
  width: 75%;
  height: 25%;
  background-color: #fff;
  // background-image: linear-gradient(
  //     // 135deg,
  //     #28bbf06c 30px,
  //     #28bbf06c 30px,
  //     // #28bbf06c 50%,
  //     // transparent 50%
  //     #28bbf06c 100%,
  //     transparent 100%
  //   ),
  //   linear-gradient(
  //     // -45deg,
  //     transparent 30px,
  //     #28bbf06c 30px,
  //     // #28bbf06c 50.1%,
  //     // transparent 50%
  //     #28bbf06c 100%,
  //     transparent 100%
  //   );
  z-index: 300;
  .m_p_a_heard {
    width: 100%;
@@ -160,7 +176,7 @@
    padding: 5px 15px;
    @extend .flexCenter;
    justify-content: space-between;
    background-color: #a40000;
    background-color: #29baf1;
    div {
      width: 35px;
      height: 35px;
@@ -183,11 +199,17 @@
      .m_p_a_center_once {
        width: 30%;
        height: 100%;
        background-color: #a40000;
        // background-image: linear-gradient(#29baf1, #28bbf06c);
        // background-color: #a40000;
        background-color: #29baf1;
        color: #fff;
        // border: 2px solid rgba(105, 215, 255, 0.658);
        border: 2px solid rgb(255, 255, 255);
        @extend .flexCenter;
        flex-direction: column;
        // &:hover {
        // background-image: linear-gradient(#09b7fc, #28bbf0a4);
        // }
      }
    }
  }

 src/components/mobilePopupOurOnce/index.vue

@@ -60,7 +60,7 @@
      this.srcList = this.onceData.icon;
      this.icon = this.srcList[0];
    }
    if (this.onceData.from == "校园建筑") {
    if (this.onceData.from == "校园建筑" || this.onceData.from == "文化风景") {
      this.getOnceCampus(this.onceData.id);
    } else {
      this.ourData = this.onceData;
@@ -153,8 +153,9 @@
  justify-content: center !important;
}
.mobilePopupOurOnce {
  padding: 0 0;
  padding: 8px 0 0 0;
  margin: 0 8px;
  // background-image: linear-gradient(#29baf1, #28bbf0);
  .mobilePopupOurOnce_center {
    // margin-bottom: 8px;
    height: 80px;
@@ -166,7 +167,7 @@
      height: 100%;
      @extend .flexCenter;
      img {
        width: 100px;
        width: 80px;
        height: 80px;
      }
    }
@@ -182,6 +183,7 @@
        text-indent: 1em;
        display: flex !important;
        align-items: center !important;
        // color: #fff;
      }
      .mobilePopupOurOnce_r_down {
        height: 50%;
@@ -190,6 +192,7 @@
        display: flex !important;
        align-items: center !important;
        .mobilePopupOurOnce_r_d_in {
          // color: #fff;
          font-size: 17px;
        }
      }

 src/components/mobileWindow/index.vue

@@ -70,13 +70,15 @@
      //   this.fullscreenLoading = true;
      if (!this.MobileWindowsHide) {
        // console.log("地图点击弹窗数据请求参数", this.query);
        this.title = this.query.query.name;
        if (this.query.query.bgImg) {
          this.srcList = this.query.query.bgImg.split(",");
        let queryData = this.query.query;
        // console.log(queryData);
        this.title = queryData.name;
        if (queryData.bgImg) {
          this.srcList = queryData.bgImg.split(",");
          this.url = this.srcList[0];
        }
        if (this.query.query.seebut) {
          this.seebut = this.query.query.seebut;
        if (queryData.seebut) {
          this.seebut = queryData.seebut;
          for (let k in this.seebut) {
            if (this.seebut[k].name == "定位") {
              this.seebut.splice(k, k + 1);
@@ -99,12 +101,12 @@
          ];
        }
        this.center = [];
        for (let k in this.query.query) {
        for (let k in queryData) {
          for (let n in this.getCenter) {
            if (k == this.getCenter[n].name && this.query.query[k]) {
            if (k == this.getCenter[n].name && queryData[k]) {
              this.center.push({
                name: this.getCenter[n].value,
                value: this.query.query[k] ? this.query.query[k] : "暂无",
                value: queryData[k] ? queryData[k] : "暂无",
              });
            }
          }
@@ -144,9 +146,9 @@
  methods: {
    openOnce(val) {
      let that = this;
      // console.log(val, this.onceData);
      if (val == "去这") {
        //定位
        console.log(this.query.query);
      } else if (val == "实景") {
        this.$store.commit(
          "MSET_OPENMOBILEPANORAMA",

 src/components/mobilemap/index.vue

@@ -219,8 +219,17 @@
      viewer.use(new DC.Measure());

      tileset.setStyle(style);
      layer.addOverlay(tileset);
      viewer.flyTo(tileset);
      // layer.addOverlay(tileset);
      // viewer.flyTo(tileset);
      that.$store.dispatch("mapFlyTo", {
        lntLat: [115.87186406, 28.74449337, 1200],
        heading: 0,
        pitch: -45,
        roll: 0,
        noOpen: true,
      });
      //地图渲染完成执行srore中MSET_CREADE
      that.$store.dispatch("MSET_CREADE");

      tileset.on(DC.MouseEventType.CLICK, (e) => {
        // that.popupFlag = true

 src/store/modules/mobile.js

@@ -17,6 +17,16 @@
        openmobilePanorama: false,//实景显影
        MobileWindowsHideFixed: true,//改变点击窗口的显示状态--固定窗口
        MobileWindowChangeDataFixed: false,//改变点击窗口的数据--固定窗口
        //在每次飞行弹窗中  加入自己的点
        pointLayer: null,
        pointLayerData: {
            flag: false,
            label: "选择点",
            img: "/img/leftnav/way.png",
            normal: "/img/leftnav/way.png",
            checked: "/img/leftnav/way-checked.png",
            layer: "pointLayer",
        },
    },
    mutations: {
        MSET_VIEWER(state, viewer) {
@@ -60,8 +70,22 @@
            state.MobileWindowsHideFixed = viewer
            console.log(state.MobileWindowChangeDataFixed);
        },
        //开关飞入点图标
        MSET_OPENPOINTEL(state, val) {
            if (val) {
                state.pointLayerData.img = state.pointLayerData.checked;
                state[state.pointLayerData.layer].show = true;
            } else {
                state.pointLayerData.img = state.pointLayerData.normal;
                state[state.pointLayerData.layer].show = false;
            }
        }
    },
    actions: {
        MSET_CREADE({ state, commit, dispatch }) {
            state.pointLayer = new global.DC.VectorLayer("pointLayer");//创建图标实体类
            state.mviewer.addLayer(state.pointLayer);//添加到地图
        },
        setMobileWindows({ state, commit, dispatch }, data) {//打开随地图移动窗口
            // 关闭前一个弹窗？
            dispatch("closeMobileWindowsDom");
@@ -94,7 +118,10 @@
            //基于高度基础设置
            // h：1530
            // lnt： + 0.01187 x轴
            // Lat + 0.0108 y轴
            // Lat: - 0.0108 y轴
            // h：4000
            // lnt： + 0.01187 x轴
            // Lat: - 0.0308y轴
            let Position = new global.DC.Position(//转坐标
                +data.lntLat[0] + 0.01187,
                +data.lntLat[1] - 0.0108,
@@ -163,12 +190,15 @@
                    // pitch: data.pitch,
                    roll: data.roll
                },
                duration: 2,   //定位的时间间隔
                duration: 1.6,   //定位的时间间隔
                complete: () => {//完成后的回调
                    setTimeout(() => {
                        !state.MobileWindowsHide ||
                            commit("MSET_MOBILEWINDOWSHIDE", false)//显示弹窗
                    }, 0);
                    if (!data.noOpen) {
                        setTimeout(() => {
                            // dispatch("MSET_POINTDATA", data.lntLat);//传入标记点
                            !state.MobileWindowsHide ||
                                commit("MSET_MOBILEWINDOWSHIDE", false)//显示弹窗
                        }, 0);
                    }
                }
            });
            //官网flyto使用方法
@@ -200,7 +230,33 @@
            //         roll : 0.0
            //     }
            // });
        }
        },
        // 飞入点加入位置
        MSET_POINTDATA({ state, commit, dispatch }, data) {
            //加入坐标
            const positions = new global.DC.Position(data[0] - 0.0119, data[1] + 0.0111, 0);
            const billboard = new global.DC.Billboard(
                positions,
                "/img/leftnav/map-panorama.png"
            );
            billboard.size = [16, 16];
            //订阅事件3
            billboard.on(DC.MouseEventType.CLICK, (e) => {
                // 定制化窗体
                console.log(e)
                let query = { name: "选择点" },
                    intLat = [e.wgs84Position.lng, e.wgs84Position.lat];
                let d = {
                    position: null,
                    lntLat: intLat,
                    query: { ...(query || {}), introduce: null, address: intLat },
                    useJWD: true, //仅使用经纬度
                };
                dispatch("setMobileWindows", d);
            });
            state.pointLayer.addOverlay(billboard); //实景
            // commit("MSET_OPENPOINTEL", true);
        },
    }
}


 src/styles/entitys/text-entitys.scss

@@ -1,29 +1,42 @@
.tag-entitys-box {
    height: 28px;

    // border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .tag-content {
        display: inline;
        height: 20px;
        line-height: 20px;
        border: #FFFFFF solid 1px;
        padding: 1px 4px 1px 4px;
        color: #FFFFFF;
        text-align: center;
        background-color: #cc0000;
        border-radius: 4px;
        box-shadow: 2px 2px 10px white;
        font-size: 0.875rem;
        // display: inline;
        // height: 20px;
        // line-height: 20px;
        // border: #FFFFFF solid 1px;
        // padding: 1px 4px 1px 4px;
        // color: #FFFFFF;
        // text-align: center;
        // background-color: #cc0000;
        // border-radius: 4px;
        // box-shadow: 2px 2px 10px white;
        font-size: 1.1rem;
        font-weight: 900;
        color: red;
        -webkit-text-stroke-color: #fff;
        -webkit-text-stroke-width: 0.6px;
    }

    $imgsize: 30px;
    .tag-angle-content {
        height: 9px;
        text-align: center;
        margin: -6px 26px 0px 10px;
        // height: 9px;
        // text-align: center;
        // margin: -6px 26px 0px 10px;
        width: $imgsize;
        height: $imgsize;
        img {
            width: 100%;
            height: 100%;
        }
    }
}

.way-entitys-box {

    .way-title {
        border: white 1px solid;
        padding-left: 2px;
@@ -38,12 +51,11 @@

    .way-sign-box {
        width: 22;
        text-align: center
        text-align: center;
    }
}

.park-entitys-box {

    .park-title {
        position: relative;
        left: -8px;
@@ -54,13 +66,12 @@

    .park-sign-box {
        width: 22;
        text-align: center
        text-align: center;
    }
}

.html-layer {

    .div-icon {
        background: transparent;
    }
}
}

 src/styles/mobile/popup.scss

@@ -16,15 +16,35 @@
        left: 1000px;
        position: absolute;
        height: auto;
        background-color: #fff;
        //   background-color: #fff;
        background-image: linear-gradient(
                // 135deg,
                #28bbf0a1 30px,
                #28bbf0a1 30px,
                // #28bbf0a1 50%,
                // transparent 50%
                #28bbf0a1 100%,
                transparent 100%
            ),
            linear-gradient(
                // -45deg,
                transparent 30px,
                #28bbf0a1 30px,
                // #28bbf0a1 50.1%,
                // transparent 50%
                #28bbf0a1 100%,
                transparent 100%
            );
        border-radius: 10px;
        position: relative;

        .mobiletitle {
            // width: calc(90% - 1px);
            color: #fff;
            width: 100%;
            height: 35px;
            background-color: #f7f7f7;
            background-image: linear-gradient(#29baf1, #28bbf0);
            // background-color: #f7f7f7;
            border-bottom: 1px solid #ebebeb;
            font-size: 14px;
            border-radius: 10px 10px 0 0;
@@ -38,14 +58,16 @@
            .mobile-popup-imgs-heard {
                .mobile-popup-imgs-h-close {
                    width: 35px;
                    height: 35px;
                    background-color: #f7f7f7;
                    height: 34px;
                    background-image: linear-gradient(#29baf1, #28bbf0);
                    // background-color: #f7f7f7;
                    position: absolute;
                    @extend .centersFlex;
                    border-radius: 100px;
                    right: 0;
                    top: 0;
                    .icon {
                        color: #fff;
                        font-size: 25px;
                    }
                }
@@ -56,7 +78,7 @@
                box-sizing: border-box;
                img {
                    width: 70px;
                    height: 50px;
                    height: 70px;
                }
                //内容显示
                .mobileBig-center-our {
@@ -68,12 +90,14 @@
                        border-bottom: 1px solid #f7f7f7;
                        @extend .centersFlex;
                        .m-c-title {
                            color: #fff;
                            width: 25%;
                        }
                        .m-c-center {
                            width: 75%;
                            // text-indent: 2em;
                            word-wrap: break-word;
                            color: #fff;
                            line-height: 25px;
                        }
                    }
@@ -88,17 +112,21 @@
                border-radius: 0 0 10px 10px;
                display: flex;
                align-items: center;
                background-image: linear-gradient(#29baf1, #28bbf0);
                justify-content: center;
                position: relative;
                &::before {
                    content: "";
                    width: 0px;
                    height: 0px;
                    border: 8px solid #ebebeb;
                    border: 8px solid #29baf1;
                    position: absolute;
                    bottom: -8px;
                    left: calc(50% - 8px);
                    transform: rotate(45deg);
                }
                .mobilePopupOurOnce_r_d_in {
                    color: #fff;
                }
            }
        }
@@ -131,7 +159,7 @@

        div:nth-child(1) {
            // border-bottom: 1px solid #ebebeb;
            margin-bottom: 37px !important;
            margin-bottom: 49px !important;
        }
        div:nth-child(2) {
            display: none !important;
@@ -144,7 +172,7 @@
            height: $controllerw;
            position: relative !important;
            left: -1px !important;
            background-color: #c9302c !important;
            background-color: rgb(33, 150, 243) !important;
            color: white !important;
            @extend .flexCenter;
            border-radius: 5px;
@@ -293,7 +321,10 @@
    .m_p_heard {
        width: 100%;
        height: 50px;
        background-color: #a40000;
        background-image: linear-gradient(#29baf1, #28bbf0);
        border-bottom: 1px solid rgba(82, 209, 255, 0.774);
        color: #fff;
        // background-color: #a40000;
        .m_p_h_break {
            position: absolute;
            left: 0;
@@ -323,6 +354,24 @@
        width: 100%;
        height: calc(100% - 50px);
        // border: 1px solid red
        // background-image: linear-gradient(
        //         // 135deg,
        //         #28bbf0a1 30px,
        //         #28bbf0a1 30px,
        //         // #28bbf0a1 50%,
        //         // transparent 50%
        //         #28bbf0a1 100%,
        //         transparent 100%
        //     ),
        //     linear-gradient(
        //         // -45deg,
        //         transparent 30px,
        //         #28bbf0a1 30px,
        //         // #28bbf0a1 50.1%,
        //         // transparent 50%
        //         #28bbf0a1 100%,
        //         transparent 100%
        //     );
        box-sizing: border-box;
        .m_p_c_tableIn {
            width: 100%;
@@ -331,5 +380,22 @@
            overflow-x: hidden;
            overflow-y: auto;
        }
        // .el-divider__text {
        // background-image: linear-gradient(#29baf1, #28bbf0) !important;
        // color: #fff !important;
        // border: 0px solid transparent !important;
        // }
        // .el-tabs__item {
        //     color: #fff;
        // }
        // .el-tabs__item.is-active {
        //     color: #fff;
        //     font-size: 20px;
        // }
        // .el-empty {
        //     .el-empty__description p {
        //         color: #fff;
        //     }
        // }
    }
}