Merge branch 'master' of http://192.168.0.105:10010/r/school-web

shuishen

2021-12-14 dcbda98765ffa9e8066330502379fafbf2a750b7

Merge branch 'master' of http://192.168.0.105:10010/r/school-web

 src/components/mobileCortrol/index.vue

New file
@@ -0,0 +1,50 @@
<template>
  <div class="m-left-control">
    <div class="m-l-inbut">+</div>
    <div class="m-l-inbut">-</div>
  </div>
</template>

<script>
export default {
  name: "mobileCortrol",
  computed: {},
  data() {
    return {
      viewer: null,
      DC: null,
    };
  },
  created() {
    this.DC = global.DC;
  },
  mounted() {},
  methods: {
    initialize(viewer) {
      viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer = viewer;
    },
  },
};
</script>

<style scoped lang='scss'>
.m-left-control {
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 200;
  .m-l-inbut {
    width: 32px;
    height: 32px;
    background-color: #c9302c;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    margin-bottom: 12px;
    border-radius: 5px;
  }
}
</style>

 src/components/mobileCortrolButtom/index.vue

New file
@@ -0,0 +1,53 @@
<template>
  <div class="m-left-mobileCortrolButtom">
    <div class="m-l-inbut"><i class="el-icon-s-help"></i></div>
    <div class="m-l-inbut"><i class="el-icon-s-flag"></i></div>
    <div class="m-l-inbut"><i class="el-icon-menu"></i></div>
    <div class="m-l-inbut"><i class="el-icon-location"></i></div>
  </div>
</template>

<script>
export default {
  name: "mobileCortrolButtom",
  computed: {},
  data() {
    return {
      viewer: null,
      DC: null,
    };
  },
  created() {
    this.DC = global.DC;
  },
  mounted() {},
  methods: {
    initialize(viewer) {
      viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer = viewer;
    },
  },
};
</script>

<style scoped lang='scss'>
.m-left-mobileCortrolButtom {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 200;
  .m-l-inbut {
    float: left;
    width: 39px;
    height: 39px;
    background-color: #c9302c;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    margin-left: 12px;
    border-radius: 5px;
  }
}
</style>

 src/components/mobileCortrolSearch/index.vue

New file
@@ -0,0 +1,66 @@
<template>
  <div class="m-left-mobileCortrolSearch">
    <div class="m-left-SearchMain">
      <el-input placeholder="请输入内容" v-model="input" clearable size="small"
        ><el-button
          slot="append"
          class="iconSearch"
          icon="el-icon-search"
        ></el-button>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: "mobileCortrolSearch",
  computed: {},
  data() {
    return {
      viewer: null,
      DC: null,
    };
  },
  created() {
    this.DC = global.DC;
  },
  mounted() {},
  methods: {
    initialize(viewer) {
      viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer = viewer;
    },
  },
};
</script>

<style scoped lang='scss'>
.m-left-mobileCortrolSearch {
  width: 100%;
  position: fixed;
  top: 0;
  // left: 20px;
  z-index: 200;
  .m-left-SearchMain {
    margin: 0 auto;
    width: 60%;
    position: relative;
    z-index: 1;
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    .iconSearch {
      width: 30px;
      height: 30px;
      padding-top: 0;
      padding-bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }
  }
}
</style>

 src/components/mobileLeftNav/index.vue

New file
@@ -0,0 +1,351 @@
<template>
  <div class="m-left-nav" :style="[navStyle]">
    <!-- :style="[coutrolStyle]" -->
    <div class="m-left-coutrol" @click="iconHide = !iconHide">
      <i :class="icons"></i>
    </div>
    <ul>
      <li
        v-for="(item, index) in leftNavData"
        :key="index"
        @click="leftNavClick(item)"
      >
        <img :style="[imgStyle]" :src="item.img" alt="" />
        <span>{{ item.label }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "mobileLeftNav",
  computed: {},
  watch: {
    iconHide() {
      if (this.iconHide) {
        this.icons = "el-icon-d-arrow-left";
        this.navStyle.right = "-51px";
        this.imgStyle.right = "6px";
      } else {
        this.icons = "el-icon-d-arrow-right";
        this.navStyle.right = "0px";
        this.imgStyle.right = "0";
      }
    },
  },
  data() {
    return {
      icons: "el-icon-d-arrow-right",
      iconHide: false,
      navStyle: {
        right: "0px",
      },
      imgStyle: {
        right: "0",
      },
      //   coutrolStyle: {
      //     position: " absolute",
      //     left: "-26px",
      //     top: "114px",
      //     right: "auto",
      //     width: "25px",
      //     height: "60px",
      //     backgroundColor: "#fff",
      //     borderRadius: "10px",
      //     display: "flex",
      //     alignItems: "center",
      //     justifyContent: "center",
      //     transition: "left 3s",
      //   },
      leftNavData: [
        {
          flag: false,
          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.0493 + Math.random() * 0.5;
        const lat = 31.2583 + Math.random() * 0.5;
        list.push(new this.DC.Position(lng, lat, 0));
      }
      return list;
    },
    leftNavClick(item) {
      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.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,
          `
                        <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>
                    `
        );
        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>
                    `
        );
        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 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];

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

      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>
                    `
        );
        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];

        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;
    },
  },
};
</script>

<style scoped lang='scss'>
.m-left-nav {
  position: fixed;
  bottom: 30px;
  right: 0px;
  z-index: 200;
  background-color: #fff;
  border-radius: 17px 0 0 17px;
  transition: all 0.5s;
  .m-left-coutrol {
    position: absolute;
    left: -24px;
    top: 96px;
    width: 25px;
    height: 60px;
    background-color: #fff;
    border-radius: 17px 0 0 17px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ul {
    position: relative;
    top: 3px;
  }
  li {
    margin-bottom: 6px;
    font-weight: 400;
    display: block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
    border-radius: 15px;
    text-align: center;
    font-size: 0;
    cursor: pointer;

    img {
      position: relative;
      transition: all 0.5s;
      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/mobilemap/index.vue

New file
@@ -0,0 +1,259 @@
/* eslint-disable camelcase */
<template>
  <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>
        哈工大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">去这</el-link>
      </div>
    </div>
    <mobileLeftNav ref="mobileLeftNav"></mobileLeftNav>
    <mobileCortrol ref="mobileCortrol"></mobileCortrol>
    <mobileCortrolButtom ref="mobileCortrolButtom"></mobileCortrolButtom>
    <mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch>
  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  name: "mobilemapBox",
  data() {
    return {
      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,
    };
  },
  computed: {
    ...mapGetters(["mviewer"]),
  },
  mounted() {
    var DC = global.DC;

    var that = this;

    let viewer;

    function distanceSurface() {
      viewer.measure.distanceSurface();
    }

    function calcArea() {
      viewer.measure.area();
    }

    function areaSurface() {
      viewer.measure.areaSurface();
    }

    function calcAngle() {
      viewer.measure.angle();
    }

    function calcModelAngle() {
      viewer.measure.angle({
        clampToModel: true,
      });
    }

    function calcHeight() {
      viewer.measure.height();
    }

    function calcModelHeight() {
      viewer.measure.height({
        clampToModel: true,
      });
    }

    function calcHeading() {
      viewer.measure.heading();
    }

    function areaHeight() {
      viewer.measure.areaHeight();
    }

    function calcTriangleHeight() {
      viewer.measure.triangleHeight();
    }

    function calcModelTriangleHeight() {
      viewer.measure.triangleHeight({
        clampToModel: true,
      });
    }

    function deactivate() {
      viewer.measure.deactivate();
    }

    function gotoModel() {
      viewer.flyTo(tileset);
    }

    function initViewer() {
      viewer = new DC.Viewer("mobile-viewer-container", {
        contextOptions: {
          webgl: {
            stencil: true,
            preserveDrawingBuffer: true,
          },
        },
      });
      that.$refs.mobileLeftNav.initialize(viewer);

      const popup = viewer.popup;

      popup.hide();

      that.$store.commit("MSET_VIEWER", viewer);

      const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({
        url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
      });
      viewer.addBaseLayer(baselayer, {
        iconUrl: "examples/images/icon/img.png",
        name: "影像",
      });

      // // eslint-disable-next-line camelcase
      // const baselayer_shaded = DC.ImageryLayerFactory.createArcGisImageryLayer({
      //   url: "http://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer",
      // });
      // viewer.addBaseLayer(baselayer_shaded, {
      //   iconUrl: "examples/images/icon/elec.png",
      //   name: "电子",
      // });

      // // eslint-disable-next-line camelcase
      // const baselayer_street = DC.ImageryLayerFactory.createArcGisImageryLayer({
      //   url: "http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer",
      // });
      // viewer.addBaseLayer(baselayer_street, {
      //   iconUrl: "examples/images/icon/ter.png",
      //   name: "地形",
      // });

      // // eslint-disable-next-line camelcase
      // const baselayer_ter = DC.ImageryLayerFactory.createArcGisImageryLayer({
      //   url: "http://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer",
      // });
      // viewer.addBaseLayer(baselayer_ter, {
      //   iconUrl: "examples/images/icon/ter.png",
      //   name: "地形",
      // });

      const layer = new DC.TilesetLayer("layer");
      viewer.addLayer(layer);
      const tileset = new DC.Tileset(
        "http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json"
      );
      const style = new DC.TilesetStyle();
      style.color = {
        conditions: [
          ["${Height} >= 300", "rgba(45, 0, 75, 0.5)"],
          ["${Height} >= 200", "rgb(102, 71, 151)"],
          ["${Height} >= 100", "rgb(170, 162, 204)"],
          ["${Height} >= 50", "rgb(224, 226, 238)"],
          ["${Height} >= 25", "rgb(252, 230, 200)"],
          ["${Height} >= 10", "rgb(248, 176, 87)"],
          ["${Height} >= 5", "rgb(198, 106, 11)"],
          ["true", "rgb(127, 59, 8)"],
        ],
      };

      viewer.use(new DC.Measure());

      tileset.setStyle(style);
      layer.addOverlay(tileset);
      viewer.flyTo(tileset);

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

        viewer.scene.globe.depthTestAgainstTerrain = false;

        // console.log(document.getElementById("mobile-map_content_content"));
        console.log(e.position);

        // 定制化窗体
        var divForms = new DC.mobileDivForms(viewer, {
          domId: "mobilePopup",
          title: "成教楼  ",
          className: "mobilePopup",
          content: document.getElementById("mobile-map_content_content"),
          position: [e.position],
        });
        viewer.zoomToPosition(
          new DC.Position(
            e.wgs84Position.lng,
            e.wgs84Position.lat - 0.016,
            2030,
            0,
            -45
          )
        );
        // popup.setWrapper('<div></div>')

        // popup.showAt(e.position, document.getElementById('modelPopup'))
      });

      // viewer.zoomToPosition(
      //     new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
      // )

      viewer.compass.enable = false;
      viewer.zoomController.enable = false;
      viewer.locationBar.enable = false;
      viewer.distanceLegend.enable = true;
    }

    DC.ready(initViewer);
  },
  methods: {
    mobileOpenImgs() {
      let imgsDom = document.getElementById("mobileBigImgs");
      imgsDom.click();
    },
  },
};
</script>

<style lang='scss' scope>
#mobile-viewer-container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>

 src/main.js

@@ -42,6 +42,10 @@

DC.divForms = divForms

//手机弹窗
import mobileDivForms from '@/mobileDivForms/mobileDivForms'
DC.mobileDivForms = mobileDivForms

DC.use(DcCore) // 安装DC核心库

// DC.use(DcChart) // 安装DC图标库，使用前确保echarts为全局函数

 src/mobileDivForms/mobileDivForms.js

New file
@@ -0,0 +1,154 @@
/*
 * @Descripttion:
 * @version: 0.01
 * @Author: Morpheus
 * @Date: 2020-10-22 11:05:09
 * @LastEditors: Morpheus
 * @LastEditTime: 2020-10-22 13:48:22
 */

import DC from '@dvgis/dc-sdk/dist/dc.base.min' // 基础包
import DcCore from '@dvgis/dc-sdk/dist/dc.core.min' // 核心包

var $ = window.$

DC.use(DcCore) // 安装DC核心库

class mobileDivForms {
    /**
     * @popup 存放 dom 相关
     *
     */
    constructor(viewer, popup) {
        this._viewer = viewer
        this._popup = popup
        this._position = popup.position
        this._title = popup.title
        this._content = popup.content
        this.appendPopup()
    }

    get viewer() {
        return this._viewer
    }

    get title() {
        return this._title
    }

    get content() {
        return this._content
    }

    get popup() {
        return this._popup
    }

    get position() {
        return this._position
    }

    appendPopup() {
        /**
         * @domId 存放 dom 的id, 多个数组，单个字符串
         */

        this.createVideoWindowAll(this._popup.domId, this._popup.className, this._position[0])
    }

    // 创建元素并追加
    createVideoWindowAll(id, className, position) {
        var childs = document.getElementById('mobile-map_popup_content').getElementsByTagName('div')

        if (childs.length > 0) {
            for (var i = 0; i < childs.length; i++) {
                document.getElementById('mobile-map_popup_content').removeChild(childs[i])
            }
        }

        var self = this

        var el = $("<div class=''></div>")

        // var divBig = $("<div style='width: 100%; height: 100%;' class=''></div>")

        // var divForms = $("<div class='divForms divForms-theme'></div>")

        // var divFormsWrap = $("<div class='divForms-wrap'></div>")

        // var area = $("<div class='area'></div>")

        // var arrowLt = $("<div class='arrow-lt'></div>")
        // var bT = $("<div class='b-t'></div>")
        // var bR = $("<div class='b-r'></div>")
        // var bB = $("<div class='b-b'></div>")
        // var bL = $("<div class='b-l'></div>")
        // var arrowRb = $("<div class='arrow-rb'></div>")

        // var labelWrap = $("<div class='label-wrap'></div>")
        var titleDiv = $("<div class='mobiletitle'></div>").text(this._title)
        var labelContent = $("<div class='mobilelabel-content'></div>").append(this._content)

        // var titleDiv = $("<div class='mobiletitle'>楼</div>")
        // var labelContent = $("<div class='mobilelabel-content'>内容</div>")

        // labelWrap.append(titleDiv)
        // labelWrap.append(labelContent)

        // var bTL = $("<div class='b-t-l'></div>")
        // var bBR = $("<div class='b-b-r'></div>")

        // var arrow = $("<div class='arrow'></div>")

        // area.append(arrowLt)
        // area.append(bT)
        // area.append(bR)
        // area.append(bB)
        // area.append(bL)
        // area.append(arrowRb)
        // area.append(labelWrap)

        // divFormsWrap.append(area)
        // divFormsWrap.append(bTL)
        // divFormsWrap.append(bBR)

        // divForms.append(divFormsWrap)
        // divForms.append(arrow)

        // divBig.append(divForms)
        // el.append(divBig)
        el.append(titleDiv)
        el.append(labelContent)

        el.attr('id', id)

        el.addClass(className || '')

        $('#mobile-map_popup_content').append(el)

        this._viewer.scene.postRender.addEventListener(function () {
            const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
                self._viewer.scene,
                position
            )

            self.positionPopUp(windowCoord, id)
        })
    }

    positionPopUp(windowCoord, id) {
        const wx = document.getElementById('app').clientWidth;
        const x = windowCoord.x - (wx / 100 * 35);
        const y = windowCoord.y - document.getElementById(id).offsetHeight - 15;
        // x = windowCoord.x - document.getElementById(id).offsetWidth

        // document.getElementById(id).style.cssText = `
        document.getElementById(id).style.cssText = `
        visibility:visible;
        z-index:98;
        transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
        `
    }
}

export default mobileDivForms

 src/mobileLayout/index.vue

@@ -1,14 +1,17 @@
<template>
  <div>
      <mapBox ref="modalForm" />
  <div id="mobileMaps">
    <mobilemapBox ref="mobilemapBoxFrom" />
  </div>
</template>

<script>
export default {
}
export default {};
</script>

<style>

#mobileMaps {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

 src/mobileviews/home/index.vue

New file
@@ -0,0 +1,29 @@
<template>
  <div class="content-container">
    <div class="main-content" id="MainContent">
      <router-view ref="target-name" />
    </div>

    <div class="map-scene" ref="MapSceneContent">
      <div>
        <mobilemapBox ref="mobilemapBoxFrom" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Main",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang='scss'>
</style>

 src/router/page/index.js

@@ -1,8 +1,8 @@
/*
 * @Author: Morpheus
 * @Date: 2021-04-30 14:12:09
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-11-13 16:48:01
 * @Last Modified by: liu
 * @Last Modified time: 2021-12-13 14:53:06
 */

import Vue from 'vue'
@@ -26,177 +26,188 @@
                title: '系统首页'
            },
            children: [{
                    path: 'mapnav',
                    component: resolve => require(['../../pcviews/mapnav/index.vue'], resolve),
                    meta: {
                        title: '地图导览'
                    }
                },
                {
                    path: 'orgnav',
                    component: resolve => require(['../../pcviews/orgnav/index.vue'], resolve),
                    meta: {
                        title: '校内机构导览'
                    },
                    children: [{
                            path: 'masses',
                            component: resolve => require(['../../pcviews/orgnav/masses.vue'], resolve),
                            meta: {
                                title: '党群机构'
                            }
                        },
                        {
                            path: 'ofc',
                            component: resolve => require(['../../pcviews/orgnav/ofc.vue'], resolve),
                            meta: {
                                title: '职能部处'
                            }
                        }, {
                            path: 'directly',
                            component: resolve => require(['../../pcviews/orgnav/directly.vue'], resolve),
                            meta: {
                                title: '直属及附属单位'
                            }
                        },
                        {
                            path: 'teaching',
                            component: resolve => require(['../../pcviews/orgnav/teaching.vue'], resolve),
                            meta: {
                                title: '教学与科研机构'
                            }
                        }, {
                            path: 'rest',
                            component: resolve => require(['../../pcviews/orgnav/rest.vue'], resolve),
                            meta: {
                                title: '其他机构'
                            }
                        }
                    ]
                },
                {
                    path: 'arc',
                    component: resolve => require(['../../pcviews/arc/index.vue'], resolve),
                    meta: {
                        title: '校内建筑'
                    },
                    children: [{
                            path: 'edifact',
                            component: resolve => require(['../../pcviews/arc/edifact.vue'], resolve),
                            meta: {
                                title: '行政办公'
                            }
                        },
                        {
                            path: 'teaching',
                            component: resolve => require(['../../pcviews/arc/teaching.vue'], resolve),
                            meta: {
                                title: '教学科研'
                            }
                        }, {
                            path: 'venue',
                            component: resolve => require(['../../pcviews/arc/venue.vue'], resolve),
                            meta: {
                                title: '校内场馆'
                            }
                        },
                        {
                            path: 'dorm',
                            component: resolve => require(['../../pcviews/arc/dorm.vue'], resolve),
                            meta: {
                                title: '学生宿舍'
                            }
                        }, {
                            path: 'culture',
                            component: resolve => require(['../../pcviews/arc/culture.vue'], resolve),
                            meta: {
                                title: '文化风景'
                            }
                        },
                        {
                            path: 'family',
                            component: resolve => require(['../../pcviews/arc/family.vue'], resolve),
                            meta: {
                                title: '家属住宅'
                            }
                        }, {
                            path: 'rest',
                            component: resolve => require(['../../pcviews/arc/rest.vue'], resolve),
                            meta: {
                                title: '其他楼宇'
                            }
                        }
                    ]
                },
                {
                    path: 'service',
                    component: resolve => require(['../../pcviews/service/index.vue'], resolve),
                    meta: {
                        title: '生活服务设施'
                    }
                },
                {
                    path: 'allquery',
                    component: resolve => require(['../../pcviews/allquery/index.vue'], resolve),
                    meta: {
                        title: '综合查询'
                    }
                },
                {
                    path: 'campusnav',
                    component: resolve => require(['../../pcviews/campusnav/index.vue'], resolve),
                    meta: {
                        title: '校园导览'
                    }
                },
                {
                    path: 'campusnavi',
                    component: resolve => require(['../../pcviews/campusnavi/index.vue'], resolve),
                    meta: {
                        title: '校园导航'
                    }
                },
                {
                    path: 'specialmap',
                    component: resolve => require(['../../pcviews/specialmap/index.vue'], resolve),
                    meta: {
                        title: '专题地图'
                    }
                },
                {
                    path: 'tool',
                    component: resolve => require(['../../pcviews/tool/index.vue'], resolve),
                    meta: {
                        title: '工具'
                    },
                    children: [{
                            path: 'download',
                            component: resolve => require(['../../pcviews/tool/download.vue'], resolve),
                            meta: {
                                title: '地图下载'
                            }
                        }, {
                            path: 'sign',
                            component: resolve => require(['../../pcviews/tool/sign.vue'], resolve),
                            meta: {
                                title: '地图标记'
                            }
                        },
                        {
                            path: 'ranging',
                            component: resolve => require(['../../pcviews/tool/ranging.vue'], resolve),
                            meta: {
                                title: '地图测距'
                            }
                        }
                    ]
                path: 'mapnav',
                component: resolve => require(['../../pcviews/mapnav/index.vue'], resolve),
                meta: {
                    title: '地图导览'
                }
            },
            {
                path: 'orgnav',
                component: resolve => require(['../../pcviews/orgnav/index.vue'], resolve),
                meta: {
                    title: '校内机构导览'
                },
                children: [{
                    path: 'masses',
                    component: resolve => require(['../../pcviews/orgnav/masses.vue'], resolve),
                    meta: {
                        title: '党群机构'
                    }
                },
                {
                    path: 'ofc',
                    component: resolve => require(['../../pcviews/orgnav/ofc.vue'], resolve),
                    meta: {
                        title: '职能部处'
                    }
                }, {
                    path: 'directly',
                    component: resolve => require(['../../pcviews/orgnav/directly.vue'], resolve),
                    meta: {
                        title: '直属及附属单位'
                    }
                },
                {
                    path: 'teaching',
                    component: resolve => require(['../../pcviews/orgnav/teaching.vue'], resolve),
                    meta: {
                        title: '教学与科研机构'
                    }
                }, {
                    path: 'rest',
                    component: resolve => require(['../../pcviews/orgnav/rest.vue'], resolve),
                    meta: {
                        title: '其他机构'
                    }
                }
                ]
            },
            {
                path: 'arc',
                component: resolve => require(['../../pcviews/arc/index.vue'], resolve),
                meta: {
                    title: '校内建筑'
                },
                children: [{
                    path: 'edifact',
                    component: resolve => require(['../../pcviews/arc/edifact.vue'], resolve),
                    meta: {
                        title: '行政办公'
                    }
                },
                {
                    path: 'teaching',
                    component: resolve => require(['../../pcviews/arc/teaching.vue'], resolve),
                    meta: {
                        title: '教学科研'
                    }
                }, {
                    path: 'venue',
                    component: resolve => require(['../../pcviews/arc/venue.vue'], resolve),
                    meta: {
                        title: '校内场馆'
                    }
                },
                {
                    path: 'dorm',
                    component: resolve => require(['../../pcviews/arc/dorm.vue'], resolve),
                    meta: {
                        title: '学生宿舍'
                    }
                }, {
                    path: 'culture',
                    component: resolve => require(['../../pcviews/arc/culture.vue'], resolve),
                    meta: {
                        title: '文化风景'
                    }
                },
                {
                    path: 'family',
                    component: resolve => require(['../../pcviews/arc/family.vue'], resolve),
                    meta: {
                        title: '家属住宅'
                    }
                }, {
                    path: 'rest',
                    component: resolve => require(['../../pcviews/arc/rest.vue'], resolve),
                    meta: {
                        title: '其他楼宇'
                    }
                }
                ]
            },
            {
                path: 'service',
                component: resolve => require(['../../pcviews/service/index.vue'], resolve),
                meta: {
                    title: '生活服务设施'
                }
            },
            {
                path: 'allquery',
                component: resolve => require(['../../pcviews/allquery/index.vue'], resolve),
                meta: {
                    title: '综合查询'
                }
            },
            {
                path: 'campusnav',
                component: resolve => require(['../../pcviews/campusnav/index.vue'], resolve),
                meta: {
                    title: '校园导览'
                }
            },
            {
                path: 'campusnavi',
                component: resolve => require(['../../pcviews/campusnavi/index.vue'], resolve),
                meta: {
                    title: '校园导航'
                }
            },
            {
                path: 'specialmap',
                component: resolve => require(['../../pcviews/specialmap/index.vue'], resolve),
                meta: {
                    title: '专题地图'
                }
            },
            {
                path: 'tool',
                component: resolve => require(['../../pcviews/tool/index.vue'], resolve),
                meta: {
                    title: '工具'
                },
                children: [{
                    path: 'download',
                    component: resolve => require(['../../pcviews/tool/download.vue'], resolve),
                    meta: {
                        title: '地图下载'
                    }
                }, {
                    path: 'sign',
                    component: resolve => require(['../../pcviews/tool/sign.vue'], resolve),
                    meta: {
                        title: '地图标记'
                    }
                },
                {
                    path: 'ranging',
                    component: resolve => require(['../../pcviews/tool/ranging.vue'], resolve),
                    meta: {
                        title: '地图测距'
                    }
                }
                ]
            }
            ]
        }]
    },
    // 手机端
    {
        path: '/mobileLayout',
        component: resolve => require(['../../mobileLayout/index.vue'], resolve)
        redirect: '/mobileLayout/default',
        meta: {
            title: '导航菜单'
        },
        component: resolve => require(['../../mobileLayout/index.vue'], resolve),
        children: [{
            path: 'default',
            component: resolve => require(['../../mobileviews/home/index.vue'], resolve),
            meta: {
                title: '系统首页'
            }
        }]
    },
    {
        path: '/403',

 src/store/getters.js

@@ -1,6 +1,7 @@
const getters = {
    viewer: state => state.viewer.viewer,
    popupBgUrl: state => state.popupParams.popupBgUrl,
    pupupQRUrl: state => state.popupParams.pupupQRUrl
    pupupQRUrl: state => state.popupParams.pupupQRUrl,
    mviewer: state => state.mobile.mviewer
}
export default getters

 src/store/index.js

@@ -3,6 +3,7 @@

import viewer from './modules/viewer'
import popupParams from './modules/popupParams'
import mobile from './modules/mobile'
import getters from './getters'

Vue.use(Vuex)
@@ -10,7 +11,8 @@
const store = new Vuex.Store({
    modules: {
        viewer,
        popupParams
        popupParams,
        mobile
    },
    getters
})

 src/store/modules/mobile.js

New file
@@ -0,0 +1,16 @@
const mobile = {
    state: {
        mviewer: null
    },
    mutations: {
        MSET_VIEWER(state, viewer) {
            // console.log(viewer, 456)
            state.mviewer = viewer
        }
    },
    actions: {

    }
}

export default mobile

 src/store/modules/viewer.js

@@ -4,6 +4,7 @@
    },
    mutations: {
        SET_VIEWER (state, viewer) {
            // console.log(viewer, 456)
            state.viewer = viewer
        }
    },

 src/styles/common.scss

@@ -1,25 +1,25 @@
@import './index.scss';
@import "./index.scss";

// 布局
@import './layout/pc.scss';
@import './layout/mobile.scss';
@import "./layout/pc.scss";
@import "./layout/mobile.scss";

// home
@import './home/pc.scss';
@import './home/mobile.scss';
@import "./home/pc.scss";
@import "./home/mobile.scss";

// page
@import './pcpage/index.scss';
@import "./pcpage/index.scss";

// page
@import './divforms/divForms.scss';
@import './divforms/popup.scss';
@import "./divforms/divForms.scss";
@import "./divforms/popup.scss";

// 手机样式
@import "./mobile/popup.scss";

// 实体样式
@import './entitys/text-entitys.scss';


@import "./entitys/text-entitys.scss";

.custom-icon {
    display: inline-block;
@@ -29,65 +29,46 @@
}

.menu-dtdl {

    background: url(/img/icon/dtdl.png) no-repeat;
    background-size: 100% 100%;

}

.menu-jg {

    background: url(/img/icon/jg.png) no-repeat;
    background-size: 100% 100%;

}

.menu-xyjz {

    background: url(/img/icon/xyjz.png) no-repeat;
    background-size: 100% 100%;

}

.menu-shfw {

    background: url(/img/icon/shfw.png) no-repeat;
    background-size: 100% 100%;

}

.menu-zhcx {

    background: url(/img/icon/zhcx.png) no-repeat;
    background-size: 100% 100%;

}

.menu-xydl {

    background: url(/img/icon/xydl.png) no-repeat;
    background-size: 100% 100%;

}

.menu-xydh {

    background: url(/img/icon/xydh.png) no-repeat;
    background-size: 100% 100%;

}

.menu-ztdt {

    background: url(/img/icon/ztdt.png) no-repeat;
    background-size: 100% 100%;

}

.menu-tool {

    background: url(/img/icon/tool.png) no-repeat;
    background-size: 100% 100%;

}


 src/styles/mobile/popup.scss

New file
@@ -0,0 +1,68 @@
#mobile-map_popup_content {
    width: 100%;
    position: fixed;
    z-index: 99;
    left: -1000px;
    box-sizing: border-box;
    #mobilePopup {
        width: 70%;
        left: 1000px;
        position: absolute;
        height: auto;
        background-color: #fff;
        border-radius: 10px;
        position: relative;
        &::before {
            content: "";
            width: 0px;
            height: 0px;
            border: 8px solid #ebebeb;
            position: absolute;
            bottom: -8px;
            left: calc(50% - 8px);
            transform: rotate(45deg);
        }
        .mobiletitle {
            width: calc(90% - 1px);
            height: 15px;
            background-color: #f7f7f7;
            border-bottom: 1px solid #ebebeb;
            font-size: 14px;
            border-radius: 10px 10px 0 0;
            padding: 8px 14px;
        }
        .mobilelabel-content {
            width: 100%;
            height: auto;
            // 内容样式
            .mobile-popup-imgs-heard {
                width: 100%;
                padding: 10px;
                text-align: justify;
                letter-spacing: 1px;
                box-sizing: border-box;
                img {
                    width: 70px;
                    height: 50px;
                }
            }
            .mobile-popup-control {
                width: 100%;
                height: 20px;
                background-color: #f7f7f7;
                border-top: 1px solid #ebebeb;
                padding: 5px 0 8px 0;
                border-radius: 0 0 10px 10px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
}

// 比例尺
.dc-distance-legend {
    position: relative;
    left: 30px;
}