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/mobileLeftNav/index.vue | 152 +++++++++++++++++++++++++++++++++-----------------
1 files changed, 101 insertions(+), 51 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>
--
Gitblit v1.9.3