+手机端弹框修改，加自动定位到点击地点

liuyg

2021-12-14 82d13f47adbf2e62de4e6e639e8aaaa2be83944d

+手机端弹框修改，加自动定位到点击地点

 src/components/mobileCortrol/index.vue

@@ -33,7 +33,7 @@
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 1;
  z-index: 200;
  .m-l-inbut {
    width: 32px;
    height: 32px;

 src/components/mobileCortrolButtom/index.vue

@@ -35,7 +35,7 @@
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1;
  z-index: 200;
  .m-l-inbut {
    float: left;
    width: 39px;

 src/components/mobileCortrolSearch/index.vue

@@ -1,8 +1,12 @@
<template>
  <div class="m-left-mobileCortrolSearch">
    <div class="m-left-SearchMain">
      <el-input placeholder="请输入内容" v-model="input" clearable
        ><i class="el-icon-search icon"></i>
      <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>
@@ -37,7 +41,7 @@
  position: fixed;
  top: 0;
  // left: 20px;
  z-index: 1;
  z-index: 200;
  .m-left-SearchMain {
    margin: 0 auto;
    width: 60%;
@@ -47,6 +51,16 @@
    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

@@ -293,7 +293,7 @@
  position: fixed;
  bottom: 30px;
  right: 0px;
  z-index: 1;
  z-index: 200;
  background-color: #fff;
  border-radius: 17px 0 0 17px;
  transition: all 0.5s;
@@ -309,6 +309,10 @@
    align-items: center;
    justify-content: center;
  }
  ul {
    position: relative;
    top: 3px;
  }
  li {
    margin-bottom: 6px;
    font-weight: 400;

 src/components/mobilemap/index.vue

@@ -1,40 +1,34 @@
/* eslint-disable camelcase */
<template>
  <!-- mobile -->
  <div id="mobile-viewer-container">
    <div
      v-show="popupFlag"
      id="mobile-modelPopup"
      style="
        width: 366px;
        height: 240px;
        background: url(/img/bg/nav-bg.jpeg) no-repeat;
        background-size: 100% 100%;
      "
    >
      <div class="mobile-header">
        <div class="mobile-logo">
          <img src="/img/navicon/map.png" alt="" />
        </div>
        <div class="mobile-title">明德楼</div>
        <div class="mobile-close">
          <img src="/img/navicon/close.png" alt="" />
        </div>
      </div>
      <div class="mobile-content">
        <div class="mobile-img"></div>
        <div class="mobile-meau"></div>
      </div>
    </div>

    <div id="mobile-map_popup_content"></div>

    <div
      ref="mobile-mapContentContent"
      v-show="popupWindow"
      id="mobile-map_content_content"
    >
      <div class="mobile-arc-bcg">
        <img src="/img/job/one.jpg" alt="" @click="once" />
      <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>
@@ -50,6 +44,11 @@
  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,
    };
@@ -132,7 +131,6 @@
        },
      });
      that.$refs.mobileLeftNav.initialize(viewer);
      // console.log(DC, 45678);

      const popup = viewer.popup;

@@ -204,21 +202,28 @@
        // that.popupFlag = true
        that.popupWindow = true;

        console.log(e);

        viewer.scene.globe.depthTestAgainstTerrain = false;

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

        // 定制化窗体
        var divForms = new DC.divForms(viewer, {
          domId: "div1",
        var divForms = new DC.mobileDivForms(viewer, {
          domId: "mobilePopup",
          title: "成教楼  ",
          className: "divForms-dom",
          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'))
@@ -231,15 +236,15 @@
      viewer.compass.enable = false;
      viewer.zoomController.enable = false;
      viewer.locationBar.enable = false;
      viewer.distanceLegend.enable = false;
      viewer.distanceLegend.enable = true;
    }

    DC.ready(initViewer);
  },
  methods: {
    once() {
      console.log(123);
      // console.log(global, 123456789);
    mobileOpenImgs() {
      let imgsDom = document.getElementById("mobileBigImgs");
      imgsDom.click();
    },
  },
};

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