src/components/leftNav/index.vue

@@ -1,142 +1,140 @@
<template>
    <div class="left-nav">
        <ul>
            <li v-for="(item, index) in leftNavData"
                :key="index"
                @click="leftNavClick(item)">
                <img :src="item.img"
                     alt="">
                <span>{{item.label}}</span>
            </li>
        </ul>
    </div>
  <div class="left-nav">
    <ul>
      <li
        v-for="(item, index) in leftNavData"
        :key="index"
        @click="leftNavClick(item)"
      >
        <img :src="item.img" alt="" />
        <span>{{ item.label }}</span>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
    name: 'leftNav',
    computed: {},
    data () {
        return {
            leftNavData: [
                {
                    flag: false,
                    label: '标签',
                    img: '/img/leftnav/tag.png',
                    normal: '/img/leftnav/tag.png',
                    checked: '/img/leftnav/tag-checked.png',
                    layer: 'tagLayer'
                },
                {
                    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/scene.png',
                    normal: '/img/leftnav/scene.png',
                    checked: '/img/leftnav/scene-checked.png',
                    layer: 'sceneLayer'
                },
                {
                    flag: false,
                    label: '活动',
                    img: '/img/leftnav/activity.png',
                    normal: '/img/leftnav/activity.png',
                    checked: '/img/leftnav/activity-checked.png',
                    layer: 'activityLayer'
                },
                {
                    flag: false,
                    label: 'AED',
                    img: '/img/leftnav/aed.png',
                    normal: '/img/leftnav/aed.png',
                    checked: '/img/leftnav/aed-checked.png',
                    layer: 'aedLayer'
                },
                {
                    flag: false,
                    label: '停车',
                    img: '/img/leftnav/park.png',
                    normal: '/img/leftnav/park.png',
                    checked: '/img/leftnav/park-checked.png',
                    layer: 'parkLayer'
                },
                {
                    flag: false,
                    label: '出入',
                    img: '/img/leftnav/come.png',
                    normal: '/img/leftnav/come.png',
                    checked: '/img/leftnav/come-checked.png',
                    layer: 'comeLayer'
                }
            ],
            viewer: null,
            DC: null,
            tagLayer: null,
            wayLayer: null,
            sceneLayer: null,
            activityLayer: null,
            aedLayer: null,
            parkLayer: null,
            comeLayer: null
        }
    },
    created () {
        this.DC = global.DC
    },
    mounted () {

    },
    methods: {
        generatePosition (num) {
            const list = []
            for (let i = 0; i < num; i++) {
                const lng = 121.1372 + Math.random() * 0.5
                const lat = 31.0129 + Math.random() * 0.5
                list.push(new this.DC.Position(lng, lat, 0))
            }
            return list
  name: "leftNav",
  computed: {},
  data() {
    return {
      leftNavData: [
        {
          flag: false,
          label: "标签",
          img: "img/leftnav/tag.png",
          normal: "img/leftnav/tag.png",
          checked: "img/leftnav/tag-checked.png",
          layer: "tagLayer",
        },
        leftNavClick (item) {
            item.flag = !item.flag
            if (item.flag == true) {
                item.img = item.checked
                this[item.layer].show = true
            } else {
                item.img = item.normal
                this[item.layer].show = false
            }
        {
          flag: false,
          label: "道路",
          img: "img/leftnav/way.png",
          normal: "img/leftnav/way.png",
          checked: "img/leftnav/way-checked.png",
          layer: "wayLayer",
        },
        initialize (viewer) {
            viewer.scene.globe.depthTestAgainstTerrain = false
            this.viewer = viewer
            this.tagLayer = new this.DC.HtmlLayer('tagLayer')
            viewer.addLayer(this.tagLayer)
            this.wayLayer = new this.DC.HtmlLayer('wayLayer')
            viewer.addLayer(this.wayLayer)
            this.sceneLayer = new this.DC.VectorLayer('sceneLayer')
            viewer.addLayer(this.sceneLayer)
        {
          flag: false,
          label: "实景",
          img: "img/leftnav/scene.png",
          normal: "img/leftnav/scene.png",
          checked: "img/leftnav/scene-checked.png",
          layer: "sceneLayer",
        },
        {
          flag: false,
          label: "活动",
          img: "img/leftnav/activity.png",
          normal: "img/leftnav/activity.png",
          checked: "img/leftnav/activity-checked.png",
          layer: "activityLayer",
        },
        {
          flag: false,
          label: "AED",
          img: "img/leftnav/aed.png",
          normal: "img/leftnav/aed.png",
          checked: "img/leftnav/aed-checked.png",
          layer: "aedLayer",
        },
        {
          flag: false,
          label: "停车",
          img: "img/leftnav/park.png",
          normal: "img/leftnav/park.png",
          checked: "img/leftnav/park-checked.png",
          layer: "parkLayer",
        },
        {
          flag: false,
          label: "出入",
          img: "img/leftnav/come.png",
          normal: "img/leftnav/come.png",
          checked: "img/leftnav/come-checked.png",
          layer: "comeLayer",
        },
      ],
      viewer: null,
      DC: null,
      tagLayer: null,
      wayLayer: null,
      sceneLayer: null,
      activityLayer: null,
      aedLayer: null,
      parkLayer: null,
      comeLayer: null,
    };
  },
  created() {
    this.DC = global.DC;
  },
  mounted() {},
  methods: {
    generatePosition(num) {
      const list = [];
      for (let i = 0; i < num; i++) {
        const lng = 121.1372 + Math.random() * 0.5;
        const lat = 31.0129 + Math.random() * 0.5;
        list.push(new this.DC.Position(lng, lat, 0));
      }
      return list;
    },
    leftNavClick(item) {
      item.flag = !item.flag;
      if (item.flag == true) {
        item.img = item.checked;
        this[item.layer].show = true;
      } else {
        item.img = item.normal;
        this[item.layer].show = false;
      }
    },
    initialize(viewer) {
      viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer = viewer;
      this.tagLayer = new this.DC.HtmlLayer("tagLayer");
      viewer.addLayer(this.tagLayer);
      this.wayLayer = new this.DC.HtmlLayer("wayLayer");
      viewer.addLayer(this.wayLayer);
      this.sceneLayer = new this.DC.VectorLayer("sceneLayer");
      viewer.addLayer(this.sceneLayer);

            this.aedLayer = new this.DC.VectorLayer('aedLayer')
            viewer.addLayer(this.aedLayer)
      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)
      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)
            positions1.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
      const positions1 = this.generatePosition(50);
      positions1.forEach((item, index) => {
        const divIcon = new this.DC.DivIcon(
          item,
          `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
                                南门口
@@ -146,15 +144,15 @@
                            </div>
                        </div>
                    `
                )
                this.tagLayer.addOverlay(divIcon)
            })
        );
        this.tagLayer.addOverlay(divIcon);
      });

            const positions2 = this.generatePosition(50)
            positions2.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
      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;">
                                工建街
@@ -164,38 +162,44 @@
                            </div>
                        </div>
                    `
                )
                this.wayLayer.addOverlay(divIcon)
            })
        );
        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]
                this.sceneLayer.addOverlay(billboard)
            })
      const positions3 = this.generatePosition(50);
      positions3.forEach((item) => {
        const billboard = new this.DC.Billboard(
          item,
          "img/leftnav/map-panorama.png"
        );
        billboard.size = [16, 16];
        this.sceneLayer.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 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]
        const billboard = new this.DC.Billboard(
          item,
          "img/leftnav/map-aed.png"
        );
        billboard.size = [16, 16];

                this.aedLayer.addOverlay(billboard)
            })
        this.aedLayer.addOverlay(billboard);
      });

            const positions5 = this.generatePosition(120)
            positions5.forEach((item, index) => {
                const divIcon = new this.DC.DivIcon(
                    item,
                    `
      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>
@@ -209,76 +213,79 @@
                            </div>
                        </div>
                    `
                )
                this.parkLayer.addOverlay(divIcon)
            })
        );
        this.parkLayer.addOverlay(divIcon);
      });

            const positions6 = this.generatePosition(10)
            positions6.forEach((item, index) => {
                const label = new this.DC.Label(item, '数字视觉')
                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 positions6 = this.generatePosition(10);
      positions6.forEach((item, index) => {
        const label = new this.DC.Label(item, "数字视觉");
        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]
        const billboard = new this.DC.Billboard(
          item,
          "img/leftnav/map-activity.png"
        );
        billboard.size = [16, 16];

                this.comeLayer.addOverlay(billboard)
            })
        this.comeLayer.addOverlay(billboard);
      });

            this.tagLayer.show = false
            this.wayLayer.show = false
            this.sceneLayer.show = false
            this.aedLayer.show = false
            this.parkLayer.show = false
            this.comeLayer.show = false
        }
    }
}
      this.tagLayer.show = false;
      this.wayLayer.show = false;
      this.sceneLayer.show = false;
      this.aedLayer.show = false;
      this.parkLayer.show = false;
      this.comeLayer.show = false;
    },
  },
};
</script>

<style scoped lang='scss'>
.left-nav {
    position: fixed;
    top: 15%;
    right: 6%;
    z-index: 1;
    li {
        margin-bottom: 8px;
        font-weight: 400;
        display: block;
        width: 98px;
        height: 33px;
        line-height: 33px;
        background-color: #fff;
        border-radius: 17px;
        text-align: center;
        font-size: 0;
        cursor: pointer;
  position: fixed;
  top: 15%;
  right: 6%;
  z-index: 1;
  li {
    margin-bottom: 8px;
    font-weight: 400;
    display: block;
    width: 98px;
    height: 33px;
    line-height: 33px;
    background-color: #fff;
    border-radius: 17px;
    text-align: center;
    font-size: 0;
    cursor: pointer;

        img {
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-right: 10px;
            image-rendering: -moz-crisp-edges;
            image-rendering: -o-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            -ms-interpolation-mode: nearest-neighbor;
        }

        span {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            color: #2f2f2f;
        }
    img {
      width: 24px;
      height: 24px;
      vertical-align: middle;
      margin-right: 10px;
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      -ms-interpolation-mode: nearest-neighbor;
    }

    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      color: #2f2f2f;
    }
  }
}
</style>

 src/components/mobileLeftNav/index.vue

@@ -14,34 +14,6 @@
        <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>

@@ -67,12 +39,6 @@
  },
  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",
      navStyle: {
        right: "0px",
@@ -182,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;
@@ -192,6 +156,7 @@
        item.img = item.normal;
        this[item.layer].show = false;
      }
      this.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗
    },
    initialize(viewer) {
      var that = this;
@@ -199,16 +164,22 @@
      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);

@@ -227,29 +198,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);
@@ -267,7 +227,16 @@
                        </div>
                    `
        );
        this.wayLayer.addOverlay(divIcon);
        //订阅事件2
        divIcon.on(DC.MouseEventType.CLICK, (e) => {
          // 定制化窗体
          that.openPopupS(
            e.position,
            [e.overlay._position._lng, e.overlay._position._lat],
            { name: "道路" }
          );
        });
        this.wayLayer.addOverlay(divIcon); //道路
      });

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

      const positions10 = this.generatePosition(50);
      positions10.forEach((item) => {
        const label = new this.DC.Label(item, "活动");
        label.setStyle({
          fillColor: this.DC.Color.ORANGERED,
          font: "10px sans-serif",
          pixelOffset: { x: 0, y: -16 },
        });
        this.activityLayer.addOverlay(label);

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

      const positions4 = this.generatePosition(10);
@@ -295,8 +301,16 @@
          "/img/leftnav/map-aed.png"
        );
        billboard.size = [16, 16];

        this.aedLayer.addOverlay(billboard);
        //订阅事件4
        billboard.on(DC.MouseEventType.CLICK, (e) => {
          // 定制化窗体
          that.openPopupS(
            e.position,
            [e.wgs84Position.lng, e.wgs84Position.lat],
            { name: "建筑AED" }
          );
        });
        this.aedLayer.addOverlay(billboard); //AED
      });

      const positions5 = this.generatePosition(120);
@@ -318,6 +332,15 @@
                        </div>
                    `
        );
        //订阅事件5
        divIcon.on(DC.MouseEventType.CLICK, (e) => {
          // 定制化窗体
          that.openPopupS(
            e.position,
            [e.overlay._position._lng, e.overlay._position._lat],
            { name: "校外街路侧停车场" }
          );
        });
        this.parkLayer.addOverlay(divIcon);
      });

@@ -338,13 +361,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;
@@ -354,6 +386,16 @@
      imgsDom.click();
    },
    goOn1() {},
    openPopupS(position, lntLat, query) {
      let that = this;
      // 定制化窗体
      let d = {
        position,
        lntLat,
        query: { ...(query || {}), position, lntLat },
      };
      that.$store.dispatch("setMobileWindows", d);
    },
  },
};
</script>

 src/components/mobilePopupOur/index.vue

@@ -6,7 +6,9 @@
      </div>
      <div class="m_p_h_center">
        <div>
          <div v-if="mBigPopup.search" style="color: #fff">查询结果</div>
          <div v-if="mBigPopup.search" style="color: #fff">
            查询结果{{ searchLabel ? "--" + searchLabel : "" }}
          </div>
          <el-dropdown trigger="click" @command="choiceIt" v-else>
            <span class="el-dropdown-link">
              {{ choiceValue }}<i class="el-icon-arrow-down el-icon--right"></i>
@@ -32,11 +34,21 @@
          :name="item.value"
        >
          <div class="m_p_c_tableIn">
            <el-empty
              v-show="item.child.length == 0"
              description="暂无数据"
            ></el-empty>
            <mobilePopupOurOnce
              v-for="(citem, cindex) in item.child"
              :key="cindex"
              :ends="item.child.length - 1 == cindex"
              :onceData="citem"
            ></mobilePopupOurOnce>
            <div v-show="item.child.length != 0">
              <el-divider content-position="left">
                <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;&nbsp;暂无更多
              </el-divider>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
@@ -53,6 +65,7 @@
  name: "mobilePopupOur",
  data() {
    return {
      searchLabel: "",
      choiceValue: "",
      choiceData: [
        {
@@ -73,6 +86,237 @@
          label: "西东大街",
          value: "first",
          child: [
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
@@ -150,80 +394,12 @@
        {
          label: "科技园",
          value: "third",
          child: [
            {
              name: "电力部门2",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门2",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆2",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["定位"],
            },
          ],
          child: [],
        },
        {
          label: "逸夫楼",
          value: "fourth",
          child: [
            {
              name: "电力部门3",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门3",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆3",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["定位"],
            },
          ],
          child: [],
        },
      ],
      fullscreenLoading: false,
@@ -240,7 +416,9 @@
    this.fullscreenLoading = true;
    setTimeout(() => {
      if (this.mBigPopup.search) {
        this.searchLabel = this.mBigPopup.value;
        console.log("查询搜索结果", this.mBigPopup.value);
        this.fullscreenLoading = false;
        return;
      }
      this.choiceValue = this.mBigPopup.name;

 src/components/mobilePopupOurOnce/index.vue

@@ -1,6 +1,12 @@
<template>
  <div class="mobilePopupOurOnce">
    <div class="mobilePopupOurOnce_center">
    <div
      class="mobilePopupOurOnce_center"
      :style="{
        borderBottom: !ends ? '#d4d4d4 dashed 1px' : '',
        marginBottom: !ends ? '6px' : '',
      }"
    >
      <div class="mobilePopupOurOnce_left">
        <img src="img/cc/cc.png" alt="" />
      </div>
@@ -29,7 +35,7 @@
<script>
import { mapGetters } from "vuex";
export default {
  props: ["onceData"],
  props: ["onceData", "ends"],
  name: "mobilePopupOurOnce",
  created() {
    this.DC = global.DC;
@@ -59,19 +65,13 @@
      if (val == "定位") {
        this.$store.commit("MSET_BIGPOPUP", false);
        setTimeout(() => {
          // that.$refs.mobilemapBoxFrom.openPopupS(
          //   this.onceData.Cartesian3,
          //   this.onceData.position
          // );
          that.$parent.$parent.$parent.$parent.openPopupS(
            this.onceData.Cartesian3,
            this.onceData.position
          );
          // console.log(that.$refs.mobilemapBoxFrom);
          // 定位 打开弹窗
          // this.mviewer.zoomToPosition(
          //   new that.DC.Position(p[0], p[1] - 0.016, 1530, 0, -45)
          // );
          // 定制化窗体
          let d = {
            position: that.onceData.Cartesian3,
            lntLat: that.onceData.position,
            query: this.onceData,
          };
          that.popupsDom = that.$store.dispatch("setMobileWindows", d);
        }, 500);
      }
    },
@@ -90,9 +90,9 @@
  padding: 0 0;
  margin: 0 8px;
  .mobilePopupOurOnce_center {
    margin-bottom: 8px;
    // margin-bottom: 8px;
    height: 80px;
    border-bottom: #d4d4d4 dashed 1px;
    // border-bottom: #d4d4d4 dashed 1px;
    padding-bottom: 8px;
    @extend .flexCenter;
    .mobilePopupOurOnce_left {

 src/components/mobileWindow/index.vue

New file
@@ -0,0 +1,70 @@
<template>
  <div
    ref="mobile-mapContentContent"
    v-show="!MobileWindowsHide"
    id="mobile-map_content_content"
  >
    <div class="mobile-popup-imgs-heard">
      <img :src="url" alt="" />
      <el-image
        style="width: 100px; height: 100px"
        :src="url"
        id="mobileBigImgs"
        v-show="false"
        :preview-src-list="srcList"
      >
      </el-image>
      <div>{{ query }}</div>
      <!-- 哈工大A10公寫总建筑面积30740平方米,于2001年采用货款方式高标准建造并投入使用。整个楼体共分十层,地上九层为公寫主体。公寓外观呈工字型,公寓内房司以A、B、C三个区域別分,与哈工大雄厚的工科底蕴遥相呼应,是哈尔滨工业大学学生公寫的标志性建筑 -->
    </div>
    <div class="mobile-popup-control">
      <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs"
        >图集</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="goOn">去这</el-link>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "mobileWindow",
  computed: {
    ...mapGetters(["MobileWindowsHide", "query"]),
  },
  watch: {
    MobileWindowsHide() {
      //   this.fullscreenLoading = true;
      setTimeout(() => {
        // this.fullscreenLoading = false;
        console.log("地图点击弹窗数据请求参数", this.query);
      }, 500);
    },
  },
  data() {
    return {
      fullscreenLoading: false,
      url: "/img/job/one.jpg",
      positions: "",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
    };
  },
  methods: {
    mobileOpenImgs() {
      let imgsDom = document.getElementById("mobileBigImgs");
      imgsDom.click();
    },
    goOn() {},
  },
};
</script>

<style>
</style>

 src/components/mobilemap/index.vue

@@ -3,34 +3,7 @@
  <div id="mobile-viewer-container">
    <!-- 地图图标弹窗↓ -->
    <div id="mobile-map_popup_content"></div>
    <div
      ref="mobile-mapContentContent"
      v-show="popupWindow"
      id="mobile-map_content_content"
    >
      <div class="mobile-popup-imgs-heard">
        <img :src="url" alt="" />
        <el-image
          style="width: 100px; height: 100px"
          :src="url"
          id="mobileBigImgs"
          v-show="false"
          :preview-src-list="srcList"
        >
        </el-image>
        <div>坐标 {{ positions }}</div>
        哈工大A10公寫总建筑面积30740平方米,于2001年采用货款方式高标准建造并投入使用。整个楼体共分十层,地上九层为公寫主体。公寓外观呈工字型,公寓内房司以A、B、C三个区域別分,与哈工大雄厚的工科底蕴遥相呼应,是哈尔滨工业大学学生公寫的标志性建筑
      </div>
      <div class="mobile-popup-control">
        <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs"
          >图集</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="goOn">去这</el-link>
      </div>
    </div>
    <mobileWindow></mobileWindow>
    <!-- 地图图标弹窗↑ -->
    <!-- 控制↓ -->
    <mobileLeftNav ref="mobileLeftNav"></mobileLeftNav>
@@ -46,21 +19,11 @@
</template>
<script>
import { mapGetters } from "vuex";
import { location } from "../../position/position";
export default {
  name: "mobilemapBox",
  data() {
    return {
      DC: "",
      popupsDom: "",
      positions: "",
      url: "/img/job/one.jpg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      popupFlag: false,
      popupWindow: false,
      bigPopup: {
        width: 0,
        height: 0,
@@ -69,7 +32,14 @@
    };
  },
  computed: {
    ...mapGetters(["mviewer", "mBigPopup", "mBigPopupAfter", "iconHide"]),
    ...mapGetters([
      "mviewer",
      "MobileWindowsHide",
      "mBigPopup",
      "mBigPopupAfter",
      "iconHide",
      "popupsDom",
    ]),
  },
  watch: {
    mBigPopup() {
@@ -161,6 +131,7 @@
      });
      that.$refs.mobileLeftNav.initialize(viewer);
      that.$store.commit("MSET_VIEWER", viewer);
      that.$store.commit("MSET_DC", DC);
      const popup = viewer.popup;

      popup.hide();
@@ -178,10 +149,11 @@
        if (!that.iconHide) {
          that.$store.commit("MSET_ICONHIDE", true);
        }
        if (that.popupWindow && that.popupsDom) {
          that.popupsDom.closeOur();
          that.popupWindow = false;
        }
        that.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗
        // if (!that.MobileWindowsHide && that.popupsDom) {
        //   that.popupsDom.closeOur();
        //   that.$store.commit("MSET_MOBILEWINDOWSHIDE", true);
        // }
        // nowPosition = [e.wgs84Position.lng, e.wgs84Position.lat];
        // console.log(nowPosition);
      });
@@ -268,61 +240,15 @@
    DC.ready(initViewer);
  },
  methods: {
    openPopupS(position, lntLat) {
    openPopupS(position, lntLat, query) {
      let that = this;
      // 定制化窗体
      that.popupsDom = new that.DC.mobileDivForms(that.mviewer, {
        domId: "mobilePopup",
        title: "成教楼  ",
        className: "mobilePopup",
        content: document.getElementById("mobile-map_content_content"),
        position: [position],
      });
      that.positions = lntLat;
      that.popupWindow = true;
      // let flying = new DC.Flying(viewer);
      // flying.positions = [
      //   `${nowPosition[0]},${nowPosition[0]},0,-29`,
      //   `${e.wgs84Position.lng},${e.wgs84Position.lat},0,-29`,
      // ];
      // flying.start();
      // console.log(e.wgs84Position.lng, e.wgs84Position.lat);
      that.mviewer.zoomToPosition(
        new that.DC.Position(lntLat[0], lntLat[1] - 0.012, 1530, 0, -45)
      );
    },
    mobileOpenImgs() {
      let imgsDom = document.getElementById("mobileBigImgs");
      imgsDom.click();
    },
    goOn() {
      // if (navigator.geolocation) {
      //   navigator.geolocation.watchPosition(backPoint);
      // }
      // function backPoint(res) {
      //   console.log(res);
      //   let position = [res.coords.longitude, res.coords.latitude];
      //   console.log(position);
      // }
      // this.getLocation();
      // location((res) => {
      //   console.log(res);
      //   alert(res.message);
      // });
      // console.log(returnCitySN["cip"]);
    },
    getLocation() {
      // let _that = this;
      // let geolocation = location.initMap("map-container"); //定位
      // AMap.event.addListener(geolocation, "complete", (result) => {
      //   console.log(result);
      //   // console.log("hhha");
      //   // _that.lat = result.position.lat;
      //   // _that.lng = result.position.lng;
      //   // _that.province = result.addressComponent.province;
      //   // _that.city = result.addressComponent.city;
      //   // _that.district = result.addressComponent.district;
      // });
      let d = {
        position,
        lntLat,
        query: { ...(query || {}), position, lntLat },
      };
      that.$store.dispatch("setMobileWindows", d);
    },
  },
};

 src/store/getters.js

@@ -3,7 +3,11 @@
    mviewer: state => state.mobile.mviewer,
    mBigPopup: state => state.mobile.mBigPopup,
    mBigPopupAfter: state => state.mobile.mBigPopupAfter,
    iconHide: state => state.mobile.iconHide
    iconHide: state => state.mobile.iconHide,
    DC: state => state.mobile.DC,
    MobileWindowsHide: state => state.mobile.MobileWindowsHide,
    popupsDom: state => state.mobile.popupsDom,
    query: state => state.mobile.query
}
const getters = {
    ...mobile,

 src/store/modules/mobile.js

@@ -5,6 +5,10 @@
        mBigPopupAfter: false,
        ips: '',
        iconHide: false,
        DC: '',
        MobileWindowsHide: true,
        popupsDom: '',
        query: {}
    },
    mutations: {
        MSET_VIEWER(state, viewer) {
@@ -18,10 +22,44 @@
        },
        MSET_ICONHIDE(state, viewer) {
            state.iconHide = viewer
        },
        MSET_DC(state, viewer) {
            state.DC = viewer
        },
        MSET_MOBILEWINDOWSHIDE(state, viewer) {
            state.MobileWindowsHide = viewer
        },
        MSET_POPUPDOM(state, viewer) {
            state.popupsDom = viewer
        },
        MSET_QUERY(state, viewer) {
            state.query = viewer
        }
    },
    actions: {

        setMobileWindows({ state, commit }, data) {
            // 传递响应数据
            commit("MSET_QUERY", data.query)
            // 定制化窗体
            let popupsDom = new state.DC.mobileDivForms(state.mviewer, {
                domId: "mobilePopup",
                title: data.query.name || "成教楼  ",
                className: "mobilePopup",
                content: document.getElementById("mobile-map_content_content"),
                position: [data.position],
            });
            commit("MSET_MOBILEWINDOWSHIDE", false)
            state.mviewer.zoomToPosition(
                new state.DC.Position(data.lntLat[0], data.lntLat[1] - 0.012, 1530, 0, -45)
            );
            commit("MSET_POPUPDOM", popupsDom)
        },
        closeMobileWindowsDom({ state, commit }) {
            if (!state.MobileWindowsHide && state.popupsDom) {
                state.popupsDom.closeOur();
                commit("MSET_MOBILEWINDOWSHIDE", true);
            }
        }
    }
}


 src/styles/mobile/popup.scss

@@ -1,4 +1,5 @@
#mobile-map_popup_content {
    //弹窗
    width: 100%;
    position: fixed;
    z-index: 99;
@@ -144,4 +145,15 @@
            }
        }
    }

    //滚动条
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        width: 2px !important;
        /*滚动条的圆角*/
        -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.9);
        background-color: #f1f1f1;
        /*滚动条的背景颜色*/
    }
}