From eb71fd6eacc6cac2e704f57c472e181cbb20990c Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 22 Dec 2021 16:04:52 +0800
Subject: [PATCH] +位置和细节,左侧导航栏接口，点击弹窗
---
src/components/mobileLeftNav/index.vue | 527 +++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 316 insertions(+), 211 deletions(-)
diff --git a/src/components/mobileLeftNav/index.vue b/src/components/mobileLeftNav/index.vue
index e8f3ca5..aba8411 100644
--- a/src/components/mobileLeftNav/index.vue
+++ b/src/components/mobileLeftNav/index.vue
@@ -19,6 +19,13 @@
<script>
import { mapGetters } from "vuex";
+import {
+ getListdoor, //出入
+ getListaed, //AED
+ getListparking, //停车场
+ getListarchitecture, //全景
+ getListarchitecture1, //标签
+} from "@/api/mobile/piont/index";
export default {
name: "mobileLeftNav",
watch: {
@@ -68,15 +75,19 @@
normal: "/img/leftnav/tag.png",
checked: "/img/leftnav/tag-checked.png",
layer: "tagLayer",
+ methods: getListarchitecture1,
+ imgSrc: "img/mobile/pink.png",
},
- {
- flag: false,
- label: "道路",
- img: "/img/leftnav/way.png",
- normal: "/img/leftnav/way.png",
- checked: "/img/leftnav/way-checked.png",
- layer: "wayLayer",
- },
+ // {
+ // flag: false,
+ // label: "道路",
+ // img: "/img/leftnav/way.png",
+ // normal: "/img/leftnav/way.png",
+ // checked: "/img/leftnav/way-checked.png",
+ // layer: "wayLayer",
+ // methods: getListdoor,
+ // imgSrc: "img/mobile/green.png",
+ // },
{
flag: false,
label: "实景",
@@ -84,15 +95,19 @@
normal: "/img/leftnav/scene.png",
checked: "/img/leftnav/scene-checked.png",
layer: "sceneLayer",
+ methods: getListarchitecture,
+ imgSrc: "img/mobile/blue.png",
},
- {
- flag: false,
- label: "活动",
- img: "/img/leftnav/activity.png",
- normal: "/img/leftnav/activity.png",
- checked: "/img/leftnav/activity-checked.png",
- layer: "activityLayer",
- },
+ // {
+ // flag: false,
+ // label: "活动",
+ // img: "/img/leftnav/activity.png",
+ // normal: "/img/leftnav/activity.png",
+ // checked: "/img/leftnav/activity-checked.png",
+ // layer: "activityLayer",
+ // methods: getListdoor,
+ // imgSrc: "img/mobile/brown.png",
+ // },
{
flag: false,
label: "AED",
@@ -100,6 +115,8 @@
normal: "/img/leftnav/aed.png",
checked: "/img/leftnav/aed-checked.png",
layer: "aedLayer",
+ methods: getListaed,
+ imgSrc: "img/mobile/pink.png",
},
{
flag: false,
@@ -108,6 +125,8 @@
normal: "/img/leftnav/park.png",
checked: "/img/leftnav/park-checked.png",
layer: "parkLayer",
+ methods: getListparking,
+ imgSrc: "img/mobile/popcorn.png",
},
{
flag: false,
@@ -116,6 +135,8 @@
normal: "/img/leftnav/come.png",
checked: "/img/leftnav/come-checked.png",
layer: "comeLayer",
+ methods: getListdoor,
+ imgSrc: "img/mobile/purple.png",
},
],
viewer: null,
@@ -148,15 +169,46 @@
return list;
},
leftNavClick(item) {
+ //判断并关闭已开启标签
+ let lnd = this.leftNavData;
+ for (let k in lnd) {
+ // console.log(this[this.leftNavData[k].layer]);
+ if (lnd[k].label == item.label) {
+ // console.log(lnd[k].label, "当前点击");
+ continue;
+ }
+ if (this[this.leftNavData[k].layer]._show) {
+ // console.log(lnd[k].label, "所有开启");
+ this.leftNavData[k].flag = false;
+ this.leftNavData[k].img = this.leftNavData[k].normal;
+ this[this.leftNavData[k].layer].show = false;
+ }
+ }
+
item.flag = !item.flag;
if (item.flag == true) {
item.img = item.checked;
this[item.layer].show = true;
+ // console.log("飞入");
+ this.flyTo(item);
+ this.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗
} else {
item.img = item.normal;
this[item.layer].show = false;
}
- this.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗
+ },
+ flyTo(item) {
+ let posi = this[item.layer].positions[0];
+ // console.log(posi);
+ this.$store.dispatch("mapFlyTo", {
+ //飞入
+ lntLat: [posi.lng + 0.01187, posi.lat - 0.0308, 4000],
+ // lntLat: [121.50492752204283, 31.21567802276832, 2530],
+ heading: 0,
+ pitch: -45,
+ roll: 0,
+ noOpen: true,
+ });
},
initialize(viewer) {
var that = this;
@@ -168,219 +220,272 @@
this.wayLayer = new this.DC.HtmlLayer("wayLayer");
viewer.addLayer(this.wayLayer);
- this.sceneLayer = new this.DC.VectorLayer("sceneLayer");
+ // this.sceneLayer = new this.DC.VectorLayer("sceneLayer");
+ this.sceneLayer = new this.DC.HtmlLayer("sceneLayer");
viewer.addLayer(this.sceneLayer);
- this.activityLayer = new this.DC.VectorLayer("activityLayer");
+ // this.activityLayer = new this.DC.VectorLayer("activityLayer");
+ this.activityLayer = new this.DC.HtmlLayer("activityLayer");
viewer.addLayer(this.activityLayer);
- this.aedLayer = new this.DC.VectorLayer("aedLayer");
+ // this.aedLayer = new this.DC.VectorLayer("aedLayer");
+ this.aedLayer = new this.DC.HtmlLayer("aedLayer");
viewer.addLayer(this.aedLayer);
this.parkLayer = new this.DC.HtmlLayer("parkLayer");
viewer.addLayer(this.parkLayer);
- this.comeLayer = new this.DC.VectorLayer("comeLayer");
+ // this.comeLayer = new this.DC.VectorLayer("comeLayer");
+ this.comeLayer = new this.DC.HtmlLayer("comeLayer");
viewer.addLayer(this.comeLayer);
- const positions1 = this.generatePosition(50);
- // console.log(positions1);
- positions1.forEach((item, index) => {
- const divIcon = new this.DC.DivIcon(
- item,
- `
+ // const positions1 = this.generatePosition(4);
+ // positions1.forEach((item, index) => {
+ // const divIcon = new this.DC.DivIcon(
+ // item,
+ // `
+ // <div class="tag-entitys-box">
+ // <div class="tag-content">
+ // 南门口
+ // </div>
+ // <div class="tag-angle-content">
+ // <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
+ // </div>
+ // </div>
+ // `
+ // );
+ // // e.overlay._position._lng,
+ // // e.overlay._position._lat - 0.012,
+ // //订阅事件1
+ // divIcon.on(DC.MouseEventType.CLICK, (e) => {
+ // // 定制化窗体
+ // that.openPopupS(
+ // e.position,
+ // [e.overlay._position._lng, e.overlay._position._lat],
+ // { name: "标签" }
+ // );
+ // });
+ // this.tagLayer.addOverlay(divIcon); //标签
+ // });
+ // this.tagLayer["positions"] = positions1;
+
+ // const positions2 = this.generatePosition(50);
+ // positions2.forEach((item, index) => {
+ // const divIcon = new this.DC.DivIcon(
+ // item,
+ // `
+ // <div class="way-entitys-box">
+ // <div class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff; width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
+ // 工建街
+ // </div>
+ // <div class="way-sign-box">
+ // <img src="https://map.hit.edu.cn/images/roadsign3.png">
+ // </div>
+ // </div>
+ // `
+ // );
+ // //订阅事件2
+ // divIcon.on(DC.MouseEventType.CLICK, (e) => {
+ // // 定制化窗体
+ // that.openPopupS(
+ // e.position,
+ // [e.overlay._position._lng, e.overlay._position._lat],
+ // { name: "道路" }
+ // );
+ // });
+ // this.wayLayer.addOverlay(divIcon); //道路
+ // });
+ // this.wayLayer["positions"] = positions2;
+
+ // const positions3 = this.generatePosition(50);
+ // positions3.forEach((item) => {
+ // const billboard = new this.DC.Billboard(
+ // item,
+ // "/img/leftnav/map-panorama.png"
+ // );
+ // billboard.size = [16, 16];
+ // //订阅事件3
+ // billboard.on(DC.MouseEventType.CLICK, (e) => {
+ // // 定制化窗体
+ // that.openPopupS(
+ // e.position,
+ // [e.wgs84Position.lng, e.wgs84Position.lat],
+ // { name: "实景" }
+ // );
+ // });
+ // this.sceneLayer.addOverlay(billboard); //实景
+ // });
+ // this.sceneLayer["positions"] = positions3;
+
+ // 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); //活动
+ // });
+ // this.activityLayer["positions"] = positions10;
+
+ // const positions4 = this.generatePosition(10);
+ // positions4.forEach((item, index) => {
+ // const label = new this.DC.Label(item, "建筑AED");
+ // label.setStyle({
+ // fillColor: this.DC.Color.ORANGERED,
+ // font: "10px sans-serif",
+ // pixelOffset: { x: 0, y: -16 },
+ // });
+ // this.aedLayer.addOverlay(label);
+
+ // const billboard = new this.DC.Billboard(
+ // item,
+ // "/img/leftnav/map-aed.png"
+ // );
+ // billboard.size = [16, 16];
+ // //订阅事件4
+ // billboard.on(DC.MouseEventType.CLICK, (e) => {
+ // // 定制化窗体
+ // that.openPopupS(
+ // e.position,
+ // [e.wgs84Position.lng, e.wgs84Position.lat],
+ // { name: "建筑AED" }
+ // );
+ // });
+ // this.aedLayer.addOverlay(billboard); //AED
+ // });
+ // this.aedLayer["positions"] = positions4;
+
+ // const positions5 = this.generatePosition(120);
+ // positions5.forEach((item, index) => {
+ // const divIcon = new this.DC.DivIcon(
+ // item,
+ // `
+ // <div class="park-entitys-box">
+ // <div class="park-title" alt="校外街路侧停车场">
+ // </div>
+ // <div class="park-sign-box">
+ // <div>
+ // <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="校外街路侧停车场" title="校外街路侧停车场">
+ // </div>
+ // <div>
+ // <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
+ // </div>
+ // </div>
+ // </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);
+ // });
+ // this.parkLayer["positions"] = positions5;
+
+ // const positions6 = this.generatePosition(10);
+
+ // positions6.forEach((item, index) => {
+ // const label = new this.DC.Label(item, "123");
+ // label.setStyle({
+ // fillColor: this.DC.Color.PURPLE,
+ // outlineColor: this.DC.Color.WHITE, // 边框颜色
+ // outlineWidth: 2, // 边框大小，
+ // font: "10px sans-serif",
+ // pixelOffset: { x: 0, y: -16 },
+ // });
+ // this.comeLayer.addOverlay(label);
+
+ // const billboard = new this.DC.Billboard(
+ // item,
+ // "/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.comeLayer["positions"] = positions6;
+ let ourNum = that.leftNavData.length;
+ for (let n = 0; n < ourNum; n++) {
+ this.leftNavData[n].methods().then((res) => {
+ let data = res.data.data;
+ let position = that.changePoiton(data);
+ let num = data.length;
+ for (let k = 0; k < num; k++) {
+ const divIcon = new that.DC.DivIcon(
+ position[k],
+ `
<div class="tag-entitys-box">
<div class="tag-content">
- 南门口
+ ${data[k].mechanismname}
</div>
<div class="tag-angle-content">
- <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
+ <img src="${this.leftNavData[n].imgSrc}">
</div>
</div>
`
- );
- // e.overlay._position._lng,
- // e.overlay._position._lat - 0.012,
- //订阅事件1
- divIcon.on(DC.MouseEventType.CLICK, (e) => {
- // 定制化窗体
- that.openPopupS(
- e.position,
- [e.overlay._position._lng, e.overlay._position._lat],
- { name: "标签" }
- );
+ );
+ //订阅事件
+ divIcon.on(DC.MouseEventType.CLICK, (e) => {
+ // console.log(data[k]);
+ let d = {
+ name: data[k].mechanismname,
+ bgImg: data[k].tpurl,
+ introduce: data[k].introduce,
+ };
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.overlay._position._lng, e.overlay._position._lat],
+ d
+ );
+ });
+ that[that.leftNavData[n].layer].addOverlay(divIcon); //加入图标
+ }
+ that[that.leftNavData[n].layer]["positions"] = position;
+ that[that.leftNavData[n].layer].show = false;
});
- this.tagLayer.addOverlay(divIcon); //标签
- });
-
- const positions2 = this.generatePosition(50);
- positions2.forEach((item, index) => {
- const divIcon = new this.DC.DivIcon(
- item,
- `
- <div class="way-entitys-box">
- <div class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff; width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
- 工建街
- </div>
- <div class="way-sign-box">
- <img src="https://map.hit.edu.cn/images/roadsign3.png">
- </div>
- </div>
- `
- );
- //订阅事件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);
- positions3.forEach((item) => {
- const billboard = new this.DC.Billboard(
- item,
- "/img/leftnav/map-panorama.png"
- );
- billboard.size = [16, 16];
- //订阅事件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);
- positions4.forEach((item, index) => {
- const label = new this.DC.Label(item, "建筑AED");
- label.setStyle({
- fillColor: this.DC.Color.ORANGERED,
- font: "10px sans-serif",
- pixelOffset: { x: 0, y: -16 },
- });
- this.aedLayer.addOverlay(label);
-
- const billboard = new this.DC.Billboard(
- item,
- "/img/leftnav/map-aed.png"
- );
- billboard.size = [16, 16];
- //订阅事件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);
- positions5.forEach((item, index) => {
- const divIcon = new this.DC.DivIcon(
- item,
- `
- <div class="park-entitys-box">
- <div class="park-title" alt="校外街路侧停车场">
- </div>
- <div class="park-sign-box">
- <div>
- <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="校外街路侧停车场" title="校外街路侧停车场">
- </div>
- <div>
- <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
- </div>
- </div>
- </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);
- });
-
- const positions6 = this.generatePosition(10);
- positions6.forEach((item, index) => {
- const label = new this.DC.Label(item, "123");
- label.setStyle({
- fillColor: this.DC.Color.PURPLE,
- outlineColor: this.DC.Color.WHITE, // 边框颜色
- outlineWidth: 2, // 边框大小，
- font: "10px sans-serif",
- pixelOffset: { x: 0, y: -16 },
- });
- this.comeLayer.addOverlay(label);
-
- const billboard = new this.DC.Billboard(
- item,
- "/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;
+ }
+ },
+ changePoiton(data) {
+ // console.log(data);
+ const list = [];
+ let num = data.length;
+ for (let i = 0; i < num; i++) {
+ list.push(new this.DC.Position(data[i].jd, data[i].wd, 0));
+ }
+ return list;
},
mobileOpenImgs1() {
let imgsDom = document.getElementById("mobileBigImgs");
--
Gitblit v1.9.3