From e27c1000a54804d024fa22d3fa9a402a4d23c7e7 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Thu, 16 Dec 2021 15:40:08 +0800
Subject: [PATCH] +基础弹窗的公共化，响应传递的数据
---
src/components/mobileWindow/index.vue | 70 ++++++++++
src/components/mobilemap/index.vue | 96 +++----------
src/components/mobileLeftNav/index.vue | 152 ++++++++++++++-------
src/store/getters.js | 6
src/store/modules/mobile.js | 40 +++++
src/components/mobilePopupOurOnce/index.vue | 20 +-
6 files changed, 244 insertions(+), 140 deletions(-)
diff --git a/src/components/mobileLeftNav/index.vue b/src/components/mobileLeftNav/index.vue
index 0f03e66..03a92b6 100644
--- a/src/components/mobileLeftNav/index.vue
+++ b/src/components/mobileLeftNav/index.vue
@@ -14,34 +14,6 @@
<span>{{ item.label }}</span>
</li>
</ul>
- <div
- ref="mobile-mapContentContent"
- v-show="popupWindow1"
- id="mobile-map_MP1"
- >
- <div class="mobile-popup-imgs-heard">
- <img :src="url1" alt="" />
- <el-image
- style="width: 100px; height: 100px"
- :src="url1"
- id="mobileBigImgs"
- v-show="false"
- :preview-src-list="srcList1"
- >
- </el-image>
- 南门口
- </div>
- <div class="mobile-popup-control">
- <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs1"
- >图集</el-link
- >
- <el-divider direction="vertical"></el-divider>
- <el-link icon="el-icon-map-location">实景</el-link>
- <el-divider direction="vertical"></el-divider>
- <el-link icon="el-icon-aim" @click="goOn1">去这</el-link>
- </div>
- </div>
- <!-- 地图图标弹窗↑ -->
</div>
</template>
@@ -192,6 +164,7 @@
item.img = item.normal;
this[item.layer].show = false;
}
+ this.$store.dispatch("closeWindowsDom"); //关闭弹窗
},
initialize(viewer) {
var that = this;
@@ -199,16 +172,22 @@
this.viewer = viewer;
this.tagLayer = new this.DC.HtmlLayer("tagLayer");
viewer.addLayer(this.tagLayer);
+
this.wayLayer = new this.DC.HtmlLayer("wayLayer");
viewer.addLayer(this.wayLayer);
+
this.sceneLayer = new this.DC.VectorLayer("sceneLayer");
viewer.addLayer(this.sceneLayer);
+
+ this.activityLayer = new this.DC.VectorLayer("activityLayer");
+ viewer.addLayer(this.activityLayer);
this.aedLayer = new this.DC.VectorLayer("aedLayer");
viewer.addLayer(this.aedLayer);
this.parkLayer = new this.DC.HtmlLayer("parkLayer");
viewer.addLayer(this.parkLayer);
+
this.comeLayer = new this.DC.VectorLayer("comeLayer");
viewer.addLayer(this.comeLayer);
@@ -227,29 +206,18 @@
</div>
`
);
- this.tagLayer.addOverlay(divIcon);
+ // e.overlay._position._lng,
+ // e.overlay._position._lat - 0.012,
//订阅事件1
divIcon.on(DC.MouseEventType.CLICK, (e) => {
- // console.log(e);
- that.popupWindow1 = true;
// 定制化窗体
- var divForms = new DC.mobileDivForms(viewer, {
- domId: "mobilePopup",
- title: "成教楼 ",
- className: "mobilePopup",
- content: document.getElementById("mobile-map_MP1"),
- position: [e.position],
- });
- viewer.zoomToPosition(
- new DC.Position(
- e.overlay._position._lng,
- e.overlay._position._lat - 0.012,
- 1530,
- 0,
- -45
- )
+ that.openPopupS(
+ e.position,
+ [e.overlay._position._lng, e.overlay._position._lat],
+ { name: "标签" }
);
});
+ this.tagLayer.addOverlay(divIcon); //标签
});
const positions2 = this.generatePosition(50);
@@ -267,7 +235,16 @@
</div>
`
);
- this.wayLayer.addOverlay(divIcon);
+ //订阅事件2
+ divIcon.on(DC.MouseEventType.CLICK, (e) => {
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.overlay._position._lng, e.overlay._position._lat],
+ { name: "道路" }
+ );
+ });
+ this.wayLayer.addOverlay(divIcon); //道路
});
const positions3 = this.generatePosition(50);
@@ -277,7 +254,44 @@
"/img/leftnav/map-panorama.png"
);
billboard.size = [16, 16];
- this.sceneLayer.addOverlay(billboard);
+ //订阅事件3
+ billboard.on(DC.MouseEventType.CLICK, (e) => {
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.wgs84Position.lng, e.wgs84Position.lat],
+ { name: "实景" }
+ );
+ });
+ this.sceneLayer.addOverlay(billboard); //实景
+ });
+
+ const positions10 = this.generatePosition(50);
+ positions10.forEach((item) => {
+ const label = new this.DC.Label(item, "活动");
+ label.setStyle({
+ fillColor: this.DC.Color.ORANGERED,
+ font: "10px sans-serif",
+ pixelOffset: { x: 0, y: -16 },
+ });
+ this.activityLayer.addOverlay(label);
+
+ const billboard = new this.DC.Billboard(
+ item,
+ "/img/leftnav/map-aed.png"
+ // "/img/leftnav/map-panorama.png"
+ );
+ billboard.size = [16, 16];
+ //订阅事件10
+ billboard.on(DC.MouseEventType.CLICK, (e) => {
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.wgs84Position.lng, e.wgs84Position.lat],
+ { name: "活动" }
+ );
+ });
+ this.activityLayer.addOverlay(billboard); //活动
});
const positions4 = this.generatePosition(10);
@@ -295,8 +309,16 @@
"/img/leftnav/map-aed.png"
);
billboard.size = [16, 16];
-
- this.aedLayer.addOverlay(billboard);
+ //订阅事件4
+ billboard.on(DC.MouseEventType.CLICK, (e) => {
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.wgs84Position.lng, e.wgs84Position.lat],
+ { name: "建筑AED" }
+ );
+ });
+ this.aedLayer.addOverlay(billboard); //AED
});
const positions5 = this.generatePosition(120);
@@ -318,6 +340,15 @@
</div>
`
);
+ //订阅事件5
+ divIcon.on(DC.MouseEventType.CLICK, (e) => {
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.overlay._position._lng, e.overlay._position._lat],
+ { name: "校外街路侧停车场" }
+ );
+ });
this.parkLayer.addOverlay(divIcon);
});
@@ -338,13 +369,22 @@
"/img/leftnav/map-activity.png"
);
billboard.size = [16, 16];
-
+ //订阅事件6
+ billboard.on(DC.MouseEventType.CLICK, (e) => {
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.wgs84Position.lng, e.wgs84Position.lat],
+ { name: "123" }
+ );
+ });
this.comeLayer.addOverlay(billboard);
});
this.tagLayer.show = false;
this.wayLayer.show = false;
this.sceneLayer.show = false;
+ this.activityLayer.show = false;
this.aedLayer.show = false;
this.parkLayer.show = false;
this.comeLayer.show = false;
@@ -354,6 +394,16 @@
imgsDom.click();
},
goOn1() {},
+ openPopupS(position, lntLat, query) {
+ let that = this;
+ // 定制化窗体
+ let d = {
+ position,
+ lntLat,
+ query: { ...(query || {}), position, lntLat },
+ };
+ that.$store.dispatch("setMobileWindows", d);
+ },
},
};
</script>
diff --git a/src/components/mobilePopupOurOnce/index.vue b/src/components/mobilePopupOurOnce/index.vue
index ace4082..018560c 100644
--- a/src/components/mobilePopupOurOnce/index.vue
+++ b/src/components/mobilePopupOurOnce/index.vue
@@ -59,19 +59,13 @@
if (val == "定位") {
this.$store.commit("MSET_BIGPOPUP", false);
setTimeout(() => {
- // that.$refs.mobilemapBoxFrom.openPopupS(
- // this.onceData.Cartesian3,
- // this.onceData.position
- // );
- that.$parent.$parent.$parent.$parent.openPopupS(
- this.onceData.Cartesian3,
- this.onceData.position
- );
- // console.log(that.$refs.mobilemapBoxFrom);
- // 定位 打开弹窗
- // this.mviewer.zoomToPosition(
- // new that.DC.Position(p[0], p[1] - 0.016, 1530, 0, -45)
- // );
+ // 定制化窗体
+ let d = {
+ position: that.onceData.Cartesian3,
+ lntLat: that.onceData.position,
+ query: this.onceData,
+ };
+ that.popupsDom = that.$store.dispatch("setMobileWindows", d);
}, 500);
}
},
diff --git a/src/components/mobileWindow/index.vue b/src/components/mobileWindow/index.vue
new file mode 100644
index 0000000..d3ff556
--- /dev/null
+++ b/src/components/mobileWindow/index.vue
@@ -0,0 +1,70 @@
+<template>
+ <div
+ ref="mobile-mapContentContent"
+ v-show="!MobileWindowsHide"
+ id="mobile-map_content_content"
+ >
+ <div class="mobile-popup-imgs-heard">
+ <img :src="url" alt="" />
+ <el-image
+ style="width: 100px; height: 100px"
+ :src="url"
+ id="mobileBigImgs"
+ v-show="false"
+ :preview-src-list="srcList"
+ >
+ </el-image>
+ <div>{{ query }}</div>
+ <!-- 哈工大A10公寫总建筑面积30740平方米,于2001年采用货款方式高标准建造并投入使用。整个楼体共分十层,地上九层为公寫主体。公寓外观呈工字型,公寓内房司以A、B、C三个区域別分,与哈工大雄厚的工科底蕴遥相呼应,是哈尔滨工业大学学生公寫的标志性建筑 -->
+ </div>
+ <div class="mobile-popup-control">
+ <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs"
+ >图集</el-link
+ >
+ <el-divider direction="vertical"></el-divider>
+ <el-link icon="el-icon-map-location">实景</el-link>
+ <el-divider direction="vertical"></el-divider>
+ <el-link icon="el-icon-aim" @click="goOn">去这</el-link>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+ name: "mobileWindow",
+ computed: {
+ ...mapGetters(["MobileWindowsHide", "query"]),
+ },
+ watch: {
+ MobileWindowsHide() {
+ // this.fullscreenLoading = true;
+ setTimeout(() => {
+ // this.fullscreenLoading = false;
+ console.log("地图点击弹窗数据请求参数", this.query);
+ }, 500);
+ },
+ },
+ data() {
+ return {
+ fullscreenLoading: false,
+ url: "/img/job/one.jpg",
+ positions: "",
+ srcList: [
+ "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
+ "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
+ ],
+ };
+ },
+ methods: {
+ mobileOpenImgs() {
+ let imgsDom = document.getElementById("mobileBigImgs");
+ imgsDom.click();
+ },
+ goOn() {},
+ },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
index 4d1b8a2..cb27c45 100644
--- a/src/components/mobilemap/index.vue
+++ b/src/components/mobilemap/index.vue
@@ -3,34 +3,7 @@
<div id="mobile-viewer-container">
<!-- 地图图标弹窗↓ -->
<div id="mobile-map_popup_content"></div>
- <div
- ref="mobile-mapContentContent"
- v-show="popupWindow"
- id="mobile-map_content_content"
- >
- <div class="mobile-popup-imgs-heard">
- <img :src="url" alt="" />
- <el-image
- style="width: 100px; height: 100px"
- :src="url"
- id="mobileBigImgs"
- v-show="false"
- :preview-src-list="srcList"
- >
- </el-image>
- <div>坐标 {{ positions }}</div>
- 哈工大A10公寫总建筑面积30740平方米,于2001年采用货款方式高标准建造并投入使用。整个楼体共分十层,地上九层为公寫主体。公寓外观呈工字型,公寓内房司以A、B、C三个区域別分,与哈工大雄厚的工科底蕴遥相呼应,是哈尔滨工业大学学生公寫的标志性建筑
- </div>
- <div class="mobile-popup-control">
- <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs"
- >图集</el-link
- >
- <el-divider direction="vertical"></el-divider>
- <el-link icon="el-icon-map-location">实景</el-link>
- <el-divider direction="vertical"></el-divider>
- <el-link icon="el-icon-aim" @click="goOn">去这</el-link>
- </div>
- </div>
+ <mobileWindow></mobileWindow>
<!-- 地图图标弹窗↑ -->
<!-- 控制↓ -->
<mobileLeftNav ref="mobileLeftNav"></mobileLeftNav>
@@ -52,7 +25,6 @@
data() {
return {
DC: "",
- popupsDom: "",
positions: "",
url: "/img/job/one.jpg",
srcList: [
@@ -69,7 +41,14 @@
};
},
computed: {
- ...mapGetters(["mviewer", "mBigPopup", "mBigPopupAfter", "iconHide"]),
+ ...mapGetters([
+ "mviewer",
+ "MobileWindowsHide",
+ "mBigPopup",
+ "mBigPopupAfter",
+ "iconHide",
+ "popupsDom",
+ ]),
},
watch: {
mBigPopup() {
@@ -161,6 +140,7 @@
});
that.$refs.mobileLeftNav.initialize(viewer);
that.$store.commit("MSET_VIEWER", viewer);
+ that.$store.commit("MSET_DC", DC);
const popup = viewer.popup;
popup.hide();
@@ -178,10 +158,11 @@
if (!that.iconHide) {
that.$store.commit("MSET_ICONHIDE", true);
}
- if (that.popupWindow && that.popupsDom) {
- that.popupsDom.closeOur();
- that.popupWindow = false;
- }
+ that.$store.dispatch("closeWindowsDom"); //关闭弹窗
+ // if (!that.MobileWindowsHide && that.popupsDom) {
+ // that.popupsDom.closeOur();
+ // that.$store.commit("MSET_MOBILEWINDOWSHIDE", true);
+ // }
// nowPosition = [e.wgs84Position.lng, e.wgs84Position.lat];
// console.log(nowPosition);
});
@@ -268,48 +249,15 @@
DC.ready(initViewer);
},
methods: {
- openPopupS(position, lntLat) {
+ openPopupS(position, lntLat, query) {
let that = this;
// 定制化窗体
- that.popupsDom = new that.DC.mobileDivForms(that.mviewer, {
- domId: "mobilePopup",
- title: "成教楼 ",
- className: "mobilePopup",
- content: document.getElementById("mobile-map_content_content"),
- position: [position],
- });
- that.positions = lntLat;
- that.popupWindow = true;
- // let flying = new DC.Flying(viewer);
- // flying.positions = [
- // `${nowPosition[0]},${nowPosition[0]},0,-29`,
- // `${e.wgs84Position.lng},${e.wgs84Position.lat},0,-29`,
- // ];
- // flying.start();
- // console.log(e.wgs84Position.lng, e.wgs84Position.lat);
- that.mviewer.zoomToPosition(
- new that.DC.Position(lntLat[0], lntLat[1] - 0.012, 1530, 0, -45)
- );
- },
- mobileOpenImgs() {
- let imgsDom = document.getElementById("mobileBigImgs");
- imgsDom.click();
- },
- goOn() {
- // if (navigator.geolocation) {
- // navigator.geolocation.watchPosition(backPoint);
- // }
- // function backPoint(res) {
- // console.log(res);
- // let position = [res.coords.longitude, res.coords.latitude];
- // console.log(position);
- // }
- // this.getLocation();
- // location((res) => {
- // console.log(res);
- // alert(res.message);
- // });
- // console.log(returnCitySN["cip"]);
+ let d = {
+ position,
+ lntLat,
+ query: { ...(query || {}), position, lntLat },
+ };
+ that.$store.dispatch("setMobileWindows", d);
},
getLocation() {
// let _that = this;
diff --git a/src/store/getters.js b/src/store/getters.js
index 28b33f7..aea9271 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -3,7 +3,11 @@
mviewer: state => state.mobile.mviewer,
mBigPopup: state => state.mobile.mBigPopup,
mBigPopupAfter: state => state.mobile.mBigPopupAfter,
- iconHide: state => state.mobile.iconHide
+ iconHide: state => state.mobile.iconHide,
+ DC: state => state.mobile.DC,
+ MobileWindowsHide: state => state.mobile.MobileWindowsHide,
+ popupsDom: state => state.mobile.popupsDom,
+ query: state => state.mobile.query
}
const getters = {
...mobile,
diff --git a/src/store/modules/mobile.js b/src/store/modules/mobile.js
index ac242b6..b456e2b 100644
--- a/src/store/modules/mobile.js
+++ b/src/store/modules/mobile.js
@@ -5,6 +5,10 @@
mBigPopupAfter: false,
ips: '',
iconHide: false,
+ DC: '',
+ MobileWindowsHide: true,
+ popupsDom: '',
+ query: {}
},
mutations: {
MSET_VIEWER(state, viewer) {
@@ -18,10 +22,44 @@
},
MSET_ICONHIDE(state, viewer) {
state.iconHide = viewer
+ },
+ MSET_DC(state, viewer) {
+ state.DC = viewer
+ },
+ MSET_MOBILEWINDOWSHIDE(state, viewer) {
+ state.MobileWindowsHide = viewer
+ },
+ MSET_POPUPDOM(state, viewer) {
+ state.popupsDom = viewer
+ },
+ MSET_QUERY(state, viewer) {
+ state.query = viewer
}
},
actions: {
-
+ setMobileWindows({ state, commit }, data) {
+ // 传递响应数据
+ commit("MSET_QUERY", data.query)
+ // 定制化窗体
+ let popupsDom = new state.DC.mobileDivForms(state.mviewer, {
+ domId: "mobilePopup",
+ title: data.query.name || "成教楼 ",
+ className: "mobilePopup",
+ content: document.getElementById("mobile-map_content_content"),
+ position: [data.position],
+ });
+ commit("MSET_MOBILEWINDOWSHIDE", false)
+ state.mviewer.zoomToPosition(
+ new state.DC.Position(data.lntLat[0], data.lntLat[1] - 0.012, 1530, 0, -45)
+ );
+ commit("MSET_POPUPDOM", popupsDom)
+ },
+ closeWindowsDom({ state, commit }) {
+ if (!state.MobileWindowsHide && state.popupsDom) {
+ state.popupsDom.closeOur();
+ commit("MSET_MOBILEWINDOWSHIDE", true);
+ }
+ }
}
}
--
Gitblit v1.9.3