增加弹窗中跳转地图并显示当前建筑弹窗

liuyg

2021-12-16 997262e44f7f9e8d0cde869cfd026ef8c0850efd

增加弹窗中跳转地图并显示当前建筑弹窗

 src/components/mobileCortrol/index.vue

@@ -1,7 +1,8 @@
<template>
  <div class="m-left-control">
    <div class="m-l-inbut zoom-in">+</div>
    <div class="m-l-inbut" @click="zoomIn('-')">-</div>
    <div class="m-l-inbut zoom-in" @click="zoomIn">
      <i class="el-icon-refresh"></i>
    </div>
  </div>
</template>

@@ -9,12 +10,31 @@
import { mapGetters } from "vuex";
export default {
  name: "mobileCortrol",
  data() {
    return {
      DC: "",
    };
  },
  computed: {
    ...mapGetters(["mviewer"]),
  },
  created() {
    this.DC = global.DC;
  },
  methods: {
    zoomIn(val) {
      console.log(val);
      let that = this;
      // console.log(val);
      // 121.49592752204283 31.23567802276832
      this.mviewer.zoomToPosition(
        new that.DC.Position(
          121.49592752204283,
          31.23567802276832 - 0.012,
          2530,
          0,
          -45
        )
      );
      // let camera = this.mviewer.camera;
      // // console.log(camera.moveStart());
      // // this.mviewer.getImageryLayerInfo().then((res) => {
@@ -65,11 +85,11 @@
.m-left-control {
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 200;
  top: 87px;
  z-index: 201 !important;
  .m-l-inbut {
    width: 32px;
    height: 32px;
    width: 35px;
    height: 35px;
    background-color: #c9302c;
    display: flex;
    align-items: center;

 src/components/mobileCortrolButtom/index.vue

@@ -8,10 +8,12 @@
          <i class="el-icon-s-flag icon"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="西东大街">西东大街</el-dropdown-item>
          <el-dropdown-item command="长江路">长江路</el-dropdown-item>
          <el-dropdown-item command="科技园">科技园</el-dropdown-item>
          <el-dropdown-item command="逸夫楼">逸夫楼</el-dropdown-item>
          <el-dropdown-item
            v-for="(item, index) in flagList"
            :key="index"
            :command="item"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
@@ -28,7 +30,27 @@
export default {
  name: "mobileCortrolButtom",
  data() {
    return {};
    return {
      DC: "",
      flagList: [
        {
          name: "西东大街",
          position: [121.49500690245499, 31.23791479409691],
        },
        {
          name: "长江路",
          position: [121.52498934134815, 31.227021231622302],
        },
        {
          name: "科技园",
          position: [121.48624368075255, 31.197575925580797],
        },
        {
          name: "逸夫楼",
          position: [121.52391709005656, 31.276115901927575],
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["mviewer"]),
@@ -39,17 +61,18 @@
  mounted() {},
  methods: {
    handleCommand(command) {
      let that = this;
      console.log(command, "定位");
      // 定位
      // this.mviewer.zoomToPosition(
      //     new DC.Position(
      //       e.wgs84Position.lng,
      //       e.wgs84Position.lat - 0.016,
      //       1530,
      //       0,
      //       -45
      //     )
      //   );
      this.mviewer.zoomToPosition(
        new that.DC.Position(
          command.position[0],
          command.position[1] - 0.012,
          1530,
          0,
          -45
        )
      );
    },
    openBigPopupAfter() {
      this.$store.commit("MSET_BIGPOPUPAFTER", true);

 src/components/mobilePopupOur/index.vue

@@ -25,39 +25,17 @@
    </div>
    <div class="m_p_center">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="西东大街" name="first">
        <el-tab-pane
          v-for="(item, index) in tabTable"
          :key="index"
          :label="item.label"
          :name="item.value"
        >
          <div class="m_p_c_tableIn">
            <mobilePopupOurOnce
              v-for="(item, index) in tableData1"
              :key="index"
              :onceData="item"
            ></mobilePopupOurOnce>
          </div>
        </el-tab-pane>
        <el-tab-pane label="长江路" name="second">
          <div class="m_p_c_tableIn">
            <mobilePopupOurOnce
              v-for="(item, index) in tableData2"
              :key="index"
              :onceData="item"
            ></mobilePopupOurOnce>
          </div>
        </el-tab-pane>
        <el-tab-pane label="科技园" name="third">
          <div class="m_p_c_tableIn">
            <mobilePopupOurOnce
              v-for="(item, index) in tableData3"
              :key="index"
              :onceData="item"
            ></mobilePopupOurOnce>
          </div>
        </el-tab-pane>
        <el-tab-pane label="逸夫楼" name="fourth">
          <div class="m_p_c_tableIn">
            <mobilePopupOurOnce
              v-for="(item, index) in tableData4"
              :key="index"
              :onceData="item"
              v-for="(citem, cindex) in item.child"
              :key="cindex"
              :onceData="citem"
            ></mobilePopupOurOnce>
          </div>
        </el-tab-pane>
@@ -90,76 +68,166 @@
          value: "3",
        },
      ],
      tabTable: [
        {
          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: ["定位"],
            },
          ],
        },
        {
          label: "长江路",
          value: "second",
          child: [
            {
              name: "电力部门1",
              icon: "",
              Cartesian3: {
                x: -2852016.545091094,
                y: 4654237.53861168,
                z: 3288210.9971238153,
              },
              position: [121.49190702133591, 31.234911741858513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门1",
              icon: "",
              Cartesian3: {
                x: -2852016.541509094,
                y: 4654237.53816168,
                z: 3288210.9971125853,
              },
              position: [121.49907021413591, 31.234911741895513],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆1",
              icon: "",
              Cartesian3: {
                x: -2852016.545019094,
                y: 4654237.53861168,
                z: 3288210.9971123853,
              },
              position: [121.49901024133591, 31.234911749581513],
              buts: ["定位"],
            },
          ],
        },
        {
          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: ["定位"],
            },
          ],
        },
        {
          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: ["定位"],
            },
          ],
        },
      ],
      fullscreenLoading: false,
      activeName: "first",
      tableData1: [
        {
          name: "电力部门",
          icon: "",
          buts: ["实景", "图集", "定位"],
        },
        {
          name: "保安部门",
          icon: "",
          buts: ["图集", "定位"],
        },
        {
          name: "图书馆",
          icon: "",
          buts: ["定位"],
        },
      ],
      tableData2: [
        {
          name: "电力部门2",
          icon: "",
          buts: ["实景", "图集", "定位"],
        },
        {
          name: "保安部门2",
          icon: "",
          buts: ["图集", "定位"],
        },
        {
          name: "图书馆2",
          icon: "",
          buts: ["定位"],
        },
      ],
      tableData3: [
        {
          name: "电力部门3",
          icon: "",
          buts: ["实景", "图集", "定位"],
        },
        {
          name: "保安部门3",
          icon: "",
          buts: ["图集", "定位"],
        },
        {
          name: "图书馆3",
          icon: "",
          buts: ["定位"],
        },
      ],
      tableData4: [
        {
          name: "电力部门4",
          icon: "",
          buts: ["实景", "图集", "定位"],
        },
        {
          name: "保安部门4",
          icon: "",
          buts: ["图集", "定位"],
        },
        {
          name: "图书馆4",
          icon: "",
          buts: ["定位"],
        },
      ],
    };
  },
  // watch: {
@@ -169,7 +237,7 @@
  //   },
  // },
  mounted() {
    // this.fullscreenLoading = true;
    this.fullscreenLoading = true;
    setTimeout(() => {
      if (this.mBigPopup.search) {
        console.log("查询搜索结果", this.mBigPopup.value);
@@ -179,7 +247,7 @@
      this.fullscreenLoading = false;
      this.$store.commit("MSET_BIGPOPUPAFTER", false);
      console.log("请求对应街道接口");
    }, 1000);
    }, 500);
    // this.choiceValue = this.choiceData[0].name;
  },
  methods: {
@@ -187,7 +255,12 @@
      console.log(tab.name);
    },
    choiceIt(name) {
      this.choiceValue = name;
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.choiceValue = name;
        this.fullscreenLoading = false;
        console.log("请求对应头部下拉菜单接口");
      }, 500);
    },
    closeBigPopup() {
      this.$store.commit("MSET_BIGPOPUP", false);

 src/components/mobilePopupOurOnce/index.vue

@@ -31,6 +31,14 @@
export default {
  props: ["onceData"],
  name: "mobilePopupOurOnce",
  created() {
    this.DC = global.DC;
  },
  data() {
    return {
      DC: "",
    };
  },
  computed: {
    ...mapGetters(["mviewer"]),
    seebut() {
@@ -46,17 +54,26 @@
  },
  methods: {
    openOnce(val) {
      console.log(val, this.onceData.name);
      // 定位
      // this.mviewer.zoomToPosition(
      //     new DC.Position(
      //       e.wgs84Position.lng,
      //       e.wgs84Position.lat - 0.016,
      //       1530,
      //       0,
      //       -45
      //     )
      //   );
      let that = this;
      console.log(val, this.onceData);
      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)
          // );
        }, 500);
      }
    },
  },
};

 src/components/mobilemap/index.vue

@@ -18,6 +18,7 @@
          :preview-src-list="srcList"
        >
        </el-image>
        <div>坐标 {{ positions }}</div>
        哈工大A10公寫总建筑面积30740平方米,于2001年采用货款方式高标准建造并投入使用。整个楼体共分十层,地上九层为公寫主体。公寓外观呈工字型,公寓内房司以A、B、C三个区域別分,与哈工大雄厚的工科底蕴遥相呼应,是哈尔滨工业大学学生公寫的标志性建筑
      </div>
      <div class="mobile-popup-control">
@@ -33,7 +34,7 @@
    <!-- 地图图标弹窗↑ -->
    <!-- 控制↓ -->
    <mobileLeftNav ref="mobileLeftNav"></mobileLeftNav>
    <!-- <mobileCortrol ref="mobileCortrol"></mobileCortrol> -->
    <mobileCortrol ref="mobileCortrol"></mobileCortrol>
    <mobileCortrolButtom ref="mobileCortrolButtom"></mobileCortrolButtom>
    <mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch>
    <!-- 控制↑ -->
@@ -50,6 +51,9 @@
  name: "mobilemapBox",
  data() {
    return {
      DC: "",
      popupsDom: "",
      positions: "",
      url: "/img/job/one.jpg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
@@ -82,6 +86,7 @@
  },
  mounted() {
    var DC = global.DC;
    this.DC = DC;

    var that = this;

@@ -167,6 +172,16 @@
        iconUrl: "examples/images/icon/img.png",
        name: "影像",
      });
      // let nowPosition = "";
      // 地图移动事件
      // viewer.on(DC.MouseEventType.MOUSE_MOVE, (e) => {
      //   if (that.popupWindow && that.popupsDom) {
      //     that.popupsDom.closeOur();
      //     that.popupWindow = false;
      //   }
      //   // nowPosition = [e.wgs84Position.lng, e.wgs84Position.lat];
      //   // console.log(nowPosition);
      // });

      // // eslint-disable-next-line camelcase
      // const baselayer_shaded = DC.ImageryLayerFactory.createArcGisImageryLayer({
@@ -222,7 +237,7 @@

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

        viewer.scene.globe.depthTestAgainstTerrain = false;

@@ -230,22 +245,33 @@
        // 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.012,
            1530,
            0,
            -45
          )
        );
        that.openPopupS(e.position, [e.wgs84Position.lng, e.wgs84Position.lat]);
        // that.popupsDom = new DC.mobileDivForms(viewer, {
        //   domId: "mobilePopup",
        //   title: "成教楼  ",
        //   className: "mobilePopup",
        //   content: document.getElementById("mobile-map_content_content"),
        //   position: [e.position],
        // });
        // console.log(e.position);
        // that.positions = [e.wgs84Position.lng, e.wgs84Position.lat];

        // // 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);
        // viewer.zoomToPosition(
        //   new DC.Position(
        //     e.wgs84Position.lng,
        //     e.wgs84Position.lat - 0.012,
        //     1530,
        //     0,
        //     -45
        //   )
        // );
        // popup.setWrapper('<div></div>')

        // popup.showAt(e.position, document.getElementById('modelPopup'))
@@ -264,6 +290,29 @@
    DC.ready(initViewer);
  },
  methods: {
    openPopupS(position, lntLat) {
      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();

 src/mobileDivForms/mobileDivForms.js

@@ -20,12 +20,13 @@
     *
     */
    constructor(viewer, popup) {
        this._viewer = viewer
        this._popup = popup
        this._position = popup.position
        this._title = popup.title
        this._content = popup.content
        this.appendPopup()
        this._viewer = viewer;
        this._popup = popup;
        this._position = popup.position;
        this._title = popup.title;
        this._content = popup.content;
        this.appendPopup();
        this.isOpen = true;
    }

    get viewer() {
@@ -58,6 +59,9 @@

    // 创建元素并追加
    createVideoWindowAll(id, className, position) {
        let dom = document.getElementById('mobile-map_popup_content');
        dom.style.display = 'block';

        var childs = document.getElementById('mobile-map_popup_content').getElementsByTagName('div')

        if (childs.length > 0) {
@@ -83,6 +87,9 @@
        $('#mobile-map_popup_content').append(el)

        this._viewer.scene.postRender.addEventListener(function () {
            if (!self.isOpen) {
                return;
            }
            const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
                self._viewer.scene,
                position
@@ -108,6 +115,18 @@
        transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
        `
    }
    closeOur() {
        this.isOpen = false;
        let dom = document.getElementById('mobile-map_popup_content');
        dom.style.display = 'none';
        // 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])
        //     }
        // }
    }
}

export default mobileDivForms

 src/styles/mobile/popup.scss

@@ -80,13 +80,13 @@
        height: auto !important;
        left: 20px !important;
        top: 50px !important;
        z-index: 200;
        // z-index: 200;
        background-color: transparent !important;
        border: 1px solid transparent !important;

        div:nth-child(1) {
            // border-bottom: 1px solid #ebebeb;
            margin-bottom: 20px !important;
            margin-bottom: 37px !important;
        }
        div:nth-child(2) {
            display: none !important;
@@ -102,7 +102,7 @@
            background-color: #c9302c !important;
            color: white !important;
            @extend .flexCenter;
            border-radius: 8px;
            border-radius: 5px;
            svg {
                width: 20px !important;
                height: 20px !important;