From 81773ab04fd259e893c2d7f08dbdc9be772d01c4 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 21 Dec 2021 17:18:45 +0800
Subject: [PATCH] +,请求数据，弹框显示，优化代码长度
---
src/components/mobileLeftNav/index.vue | 174 +++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 112 insertions(+), 62 deletions(-)
diff --git a/src/components/mobileLeftNav/index.vue b/src/components/mobileLeftNav/index.vue
index 2cbf6e6..e8f3ca5 100644
--- a/src/components/mobileLeftNav/index.vue
+++ b/src/components/mobileLeftNav/index.vue
@@ -1,7 +1,7 @@
<template>
<div class="m-left-nav" :style="[navStyle]">
<!-- :style="[coutrolStyle]" -->
- <div class="m-left-coutrol" @click="iconHide = !iconHide">
+ <div class="m-left-coutrol" @click="changeIconHide">
<i :class="icons"></i>
</div>
<ul>
@@ -14,41 +14,13 @@
<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>
<script>
+import { mapGetters } from "vuex";
export default {
name: "mobileLeftNav",
- computed: {},
watch: {
iconHide() {
if (this.iconHide) {
@@ -62,16 +34,12 @@
}
},
},
+ computed: {
+ ...mapGetters(["iconHide"]),
+ },
data() {
return {
- popupWindow1: false,
- url1: "/img/job/one.jpg",
- srcList1: [
- "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
- "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
- ],
icons: "el-icon-d-arrow-right",
- iconHide: false,
navStyle: {
right: "0px",
},
@@ -166,6 +134,10 @@
},
mounted() {},
methods: {
+ changeIconHide() {
+ let isif = this.iconHide;
+ this.$store.commit("MSET_ICONHIDE", !isif);
+ },
generatePosition(num) {
const list = [];
for (let i = 0; i < num; i++) {
@@ -176,8 +148,6 @@
return list;
},
leftNavClick(item) {
- // console.log(item);
- this.popupWindow1 = false;
item.flag = !item.flag;
if (item.flag == true) {
item.img = item.checked;
@@ -186,6 +156,7 @@
item.img = item.normal;
this[item.layer].show = false;
}
+ this.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗
},
initialize(viewer) {
var that = this;
@@ -193,20 +164,27 @@
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);
const positions1 = this.generatePosition(50);
+ // console.log(positions1);
positions1.forEach((item, index) => {
const divIcon = new this.DC.DivIcon(
item,
@@ -221,29 +199,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);
@@ -261,7 +228,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);
@@ -271,7 +247,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);
@@ -289,8 +302,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);
@@ -312,6 +333,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);
});
@@ -332,13 +362,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;
@@ -348,6 +387,17 @@
imgsDom.click();
},
goOn1() {},
+ openPopupS(position, lntLat, query) {
+ let that = this;
+ // 定制化窗体
+ let d = {
+ position,
+ lntLat,
+ query: { ...(query || {}), position, lntLat },
+ useJWD: true, //仅使用经纬度
+ };
+ that.$store.dispatch("setMobileWindows", d);
+ },
},
};
</script>
--
Gitblit v1.9.3