From 82d13f47adbf2e62de4e6e639e8aaaa2be83944d Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 14 Dec 2021 15:20:05 +0800
Subject: [PATCH] +手机端弹框修改，加自动定位到点击地点
---
src/components/mobilemap/index.vue | 83 ++++++-----
src/components/mobileCortrolButtom/index.vue | 2
src/main.js | 4
src/styles/mobile/popup.scss | 68 +++++++++
src/components/mobileLeftNav/index.vue | 6
src/components/mobileCortrol/index.vue | 2
src/components/mobileCortrolSearch/index.vue | 20 ++
src/styles/common.scss | 41 +----
src/mobileDivForms/mobileDivForms.js | 154 ++++++++++++++++++++++
9 files changed, 305 insertions(+), 75 deletions(-)
diff --git a/src/components/mobileCortrol/index.vue b/src/components/mobileCortrol/index.vue
index 31f6910..a189ca4 100644
--- a/src/components/mobileCortrol/index.vue
+++ b/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;
diff --git a/src/components/mobileCortrolButtom/index.vue b/src/components/mobileCortrolButtom/index.vue
index 654ec9f..ea17825 100644
--- a/src/components/mobileCortrolButtom/index.vue
+++ b/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;
diff --git a/src/components/mobileCortrolSearch/index.vue b/src/components/mobileCortrolSearch/index.vue
index 398d4cb..3926498 100644
--- a/src/components/mobileCortrolSearch/index.vue
+++ b/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>
diff --git a/src/components/mobileLeftNav/index.vue b/src/components/mobileLeftNav/index.vue
index 0d844cf..1247850 100644
--- a/src/components/mobileLeftNav/index.vue
+++ b/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;
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
index d6c01b2..637aae8 100644
--- a/src/components/mobilemap/index.vue
+++ b/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();
},
},
};
diff --git a/src/main.js b/src/main.js
index 2ac8264..ec145f3 100644
--- a/src/main.js
+++ b/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为全局函数
diff --git a/src/mobileDivForms/mobileDivForms.js b/src/mobileDivForms/mobileDivForms.js
new file mode 100644
index 0000000..e26010c
--- /dev/null
+++ b/src/mobileDivForms/mobileDivForms.js
@@ -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
diff --git a/src/styles/common.scss b/src/styles/common.scss
index adccd1c..76cc0e7 100644
--- a/src/styles/common.scss
+++ b/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%;
-
}
-
diff --git a/src/styles/mobile/popup.scss b/src/styles/mobile/popup.scss
new file mode 100644
index 0000000..39dc937
--- /dev/null
+++ b/src/styles/mobile/popup.scss
@@ -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;
+}
--
Gitblit v1.9.3