From e40ee62d3e9b71ffe3432d32a53a00c4097b5708 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 31 Dec 2021 09:03:28 +0800
Subject: [PATCH] +3d 2.5d
---
src/components/mobileLeftNav/index.vue | 388 +++++++++++++++++++-----------------------------------
1 files changed, 138 insertions(+), 250 deletions(-)
diff --git a/src/components/mobileLeftNav/index.vue b/src/components/mobileLeftNav/index.vue
index aba8411..5f84749 100644
--- a/src/components/mobileLeftNav/index.vue
+++ b/src/components/mobileLeftNav/index.vue
@@ -20,12 +20,15 @@
<script>
import { mapGetters } from "vuex";
import {
- getListdoor, //出入
- getListaed, //AED
- getListparking, //停车场
+ // getListdoor, //出入
+ // getListaed, //AED
+ // getListparking, //停车场
getListarchitecture, //全景
getListarchitecture1, //标签
+ getListroad, //道路
+ getListcat, //出入-AED-停车场
} from "@/api/mobile/piont/index";
+import { getListVideo } from "@/api/mobile/monitor/index";
export default {
name: "mobileLeftNav",
watch: {
@@ -53,20 +56,6 @@
imgStyle: {
right: "0",
},
- // coutrolStyle: {
- // position: " absolute",
- // left: "-26px",
- // top: "114px",
- // right: "auto",
- // width: "25px",
- // height: "60px",
- // backgroundColor: "#fff",
- // borderRadius: "10px",
- // display: "flex",
- // alignItems: "center",
- // justifyContent: "center",
- // transition: "left 3s",
- // },
leftNavData: [
{
flag: false,
@@ -76,18 +65,19 @@
checked: "/img/leftnav/tag-checked.png",
layer: "tagLayer",
methods: getListarchitecture1,
- imgSrc: "img/mobile/pink.png",
+ imgSrc: "https://map.hit.edu.cn/images/tarrow_xq.png",
+ // 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",
- // methods: getListdoor,
- // imgSrc: "img/mobile/green.png",
- // },
+ {
+ flag: false,
+ label: "道路",
+ img: "/img/leftnav/way.png",
+ normal: "/img/leftnav/way.png",
+ checked: "/img/leftnav/way-checked.png",
+ layer: "wayLayer",
+ methods: getListroad,
+ imgSrc: "img/mobile/green.png",
+ },
{
flag: false,
label: "实景",
@@ -96,7 +86,19 @@
checked: "/img/leftnav/scene-checked.png",
layer: "sceneLayer",
methods: getListarchitecture,
- imgSrc: "img/mobile/blue.png",
+ imgSrc: "img/leftnav/map-panorama.png",
+ // imgSrc: "img/mobile/blue.png",
+ },
+ {
+ flag: false,
+ label: "监控",
+ img: "/img/leftnav/monitor.png",
+ normal: "/img/leftnav/monitor.png",
+ checked: "/img/leftnav/monitor-checked.png",
+ layer: "videoLayer",
+ methods: getListVideo,
+ imgSrc: "/img/leftnav/map-monitor.png",
+ // imgSrc: "img/mobile/blue.png",
},
// {
// flag: false,
@@ -115,8 +117,10 @@
normal: "/img/leftnav/aed.png",
checked: "/img/leftnav/aed-checked.png",
layer: "aedLayer",
- methods: getListaed,
- imgSrc: "img/mobile/pink.png",
+ methods: getListcat,
+ type: 9,
+ imgSrc: "img/leftnav/map-aed.png",
+ // imgSrc: "img/mobile/pink.png",
},
{
flag: false,
@@ -125,8 +129,10 @@
normal: "/img/leftnav/park.png",
checked: "/img/leftnav/park-checked.png",
layer: "parkLayer",
- methods: getListparking,
- imgSrc: "img/mobile/popcorn.png",
+ methods: getListcat,
+ type: 11,
+ imgSrc: "https://map.hit.edu.cn/images/p-biao.png",
+ // imgSrc: "img/mobile/popcorn.png",
},
{
flag: false,
@@ -135,8 +141,10 @@
normal: "/img/leftnav/come.png",
checked: "/img/leftnav/come-checked.png",
layer: "comeLayer",
- methods: getListdoor,
- imgSrc: "img/mobile/purple.png",
+ methods: getListcat,
+ type: 12,
+ imgSrc: "img/leftnav/map-activity.png",
+ // imgSrc: "img/mobile/purple.png",
},
],
viewer: null,
@@ -144,6 +152,7 @@
tagLayer: null,
wayLayer: null,
sceneLayer: null,
+ videoLayer: null,
activityLayer: null,
aedLayer: null,
parkLayer: null,
@@ -158,15 +167,6 @@
changeIconHide() {
let isif = this.iconHide;
this.$store.commit("MSET_ICONHIDE", !isif);
- },
- generatePosition(num) {
- const list = [];
- for (let i = 0; i < num; i++) {
- const lng = 121.0493 + Math.random() * 0.5;
- const lat = 31.2583 + Math.random() * 0.5;
- list.push(new this.DC.Position(lng, lat, 0));
- }
- return list;
},
leftNavClick(item) {
//判断并关闭已开启标签
@@ -202,7 +202,8 @@
// console.log(posi);
this.$store.dispatch("mapFlyTo", {
//飞入
- lntLat: [posi.lng + 0.01187, posi.lat - 0.0308, 4000],
+ lntLat: [posi.lng + 0.00917, posi.lat - 0.0188, 2100],
+ // lntLat: [posi.lng + 0.01187, posi.lat - 0.0308, 4000],
// lntLat: [121.50492752204283, 31.21567802276832, 2530],
heading: 0,
pitch: -45,
@@ -224,6 +225,9 @@
this.sceneLayer = new this.DC.HtmlLayer("sceneLayer");
viewer.addLayer(this.sceneLayer);
+ this.videoLayer = new this.DC.HtmlLayer("videoLayer");
+ viewer.addLayer(this.videoLayer);
+
// this.activityLayer = new this.DC.VectorLayer("activityLayer");
this.activityLayer = new this.DC.HtmlLayer("activityLayer");
viewer.addLayer(this.activityLayer);
@@ -239,229 +243,113 @@
this.comeLayer = new this.DC.HtmlLayer("comeLayer");
viewer.addLayer(this.comeLayer);
- // 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 ourD = this.leftNavData[n];
+ let d = ourD.type ? { lifetype: ourD.type } : {};
+ ourD.methods(d).then((res) => {
+ let dom;
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],
- `
+ if (ourD.label == "标签") {
+ dom = `
<div class="tag-entitys-box">
<div class="tag-content">
${data[k].mechanismname}
</div>
<div class="tag-angle-content">
- <img src="${this.leftNavData[n].imgSrc}">
+ <img src="${ourD.imgSrc}">
</div>
</div>
- `
- );
+ `;
+ } else if (ourD.label == "道路") {
+ // <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;">
+ // ${data[k].mechanismname}
+ // </div>
+ dom = `
+ <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;">
+ ${data[k].roadname}
+ </div>
+ <div class="way-sign-box">
+ <img src="https://map.hit.edu.cn/images/roadsign3.png">
+ </div>
+ </div>
+ `;
+ } else if (ourD.label == "实景") {
+ // <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;">
+ // ${data[k].mechanismname}
+ // </div>
+ dom = `
+ <div class="way-entitys-box mobile-way-entitys-box">
+ <div class="way-sign-box ">
+ <img src="img/leftnav/map-panorama.png">
+ </div>
+ </div>
+ `;
+ } else if (ourD.label == "AED") {
+ dom = `
+ <div class="mobiletag-entitys-box">
+ <div class="tag-content">
+ ${data[k].mechanismname}
+ </div>
+ <div class="tag-angle-content">
+ <img src="${ourD.imgSrc}">
+ </div>
+ </div>
+ `;
+ } else if (ourD.label == "停车") {
+ dom = `
+ <div class="park-entitys-box">
+ <div class="park-title" alt="${data[k].mechanismname}">
+ </div>
+ <div class="park-sign-box">
+ <div>
+ <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="${data[k].mechanismname}" title="${data[k].mechanismname}">
+ </div>
+ <div>
+ <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
+ </div>
+ </div>
+ </div>
+ `;
+ } else if (ourD.label == "出入") {
+ dom = `
+ <div class="mobiletag-entitys-box-pink">
+ <div class="tag-content">
+ ${data[k].mechanismname}
+ </div>
+ <div class="tag-angle-content">
+ <img src="${ourD.imgSrc}">
+ </div>
+ </div>
+ `;
+ } else if (ourD.label == "监控") {
+ dom = `
+ <div class="mobiletag-entitys-box-pink">
+ <div class="tag-content">
+ 监控
+ </div>
+ <div class="tag-angle-content">
+ <img src="${ourD.imgSrc}">
+ </div>
+ </div>
+ `;
+ }
+ const divIcon = new that.DC.DivIcon(position[k], dom);
//订阅事件
divIcon.on(DC.MouseEventType.CLICK, (e) => {
// console.log(data[k]);
let d = {
- name: data[k].mechanismname,
+ name:
+ data[k].mechanismname ||
+ data[k].roadname ||
+ (ourD.label == "监控" ? "监控" : "无显示名字"),
bgImg: data[k].tpurl,
+ video: data[k].videourl || "",
+ from: "labels",
introduce: data[k].introduce,
};
// 定制化窗体
--
Gitblit v1.9.3