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/leftNav/index.vue | 128 +++++++++++++++++++++++++-----------------
1 files changed, 75 insertions(+), 53 deletions(-)
diff --git a/src/components/leftNav/index.vue b/src/components/leftNav/index.vue
index 01bffa1..4d134e8 100644
--- a/src/components/leftNav/index.vue
+++ b/src/components/leftNav/index.vue
@@ -14,7 +14,7 @@
<script>
-import { getAEDkList, getParkList, getComeList, getSceneList, getTagList } from '@/api/pc/leftNav/index'
+import { getLifeList, getMonitorList, getSceneList, getWayList, getTagList } from '@/api/pc/leftNav/index'
export default {
name: 'leftNav',
@@ -48,12 +48,20 @@
},
{
flag: false,
- label: '活动',
- img: '/img/leftnav/activity.png',
- normal: '/img/leftnav/activity.png',
- checked: '/img/leftnav/activity-checked.png',
- layer: 'activityLayer'
+ label: '监控',
+ img: '/img/leftnav/monitor.png',
+ normal: '/img/leftnav/monitor.png',
+ checked: '/img/leftnav/monitor-checked.png',
+ layer: 'monitorLayer'
},
+ // {
+ // flag: false,
+ // label: '活动',
+ // img: '/img/leftnav/activity.png',
+ // normal: '/img/leftnav/activity.png',
+ // checked: '/img/leftnav/activity-checked.png',
+ // layer: 'activityLayer'
+ // },
{
flag: false,
label: 'AED',
@@ -84,6 +92,7 @@
tagLayer: null,
wayLayer: null,
sceneLayer: null,
+ monitorLayer: null,
activityLayer: null,
aedLayer: null,
parkLayer: null,
@@ -126,10 +135,10 @@
viewer.addLayer(this.wayLayer)
this.sceneLayer = new this.DC.VectorLayer('sceneLayer')
viewer.addLayer(this.sceneLayer)
-
+ this.monitorLayer = new this.DC.VectorLayer('monitorLayer')
+ viewer.addLayer(this.monitorLayer)
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')
@@ -155,22 +164,33 @@
this.tagLayer.show = false
})
- const positions2 = this.generatePosition(5)
- positions2.forEach((item, index) => {
- const divIcon = new this.DC.DivIcon(
- item,
- `
+ getWayList().then(res => {
+ res.data.data.forEach(item => {
+ const divIcon = new this.DC.DivIcon(
+ new that.DC.Position(Number(item.jd), Number(item.wd), 0),
+ `
<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;">
- 工建街
+ ${item.roadname}
</div>
<div class="way-sign-box">
<img src="https://map.hit.edu.cn/images/roadsign3.png">
</div>
</div>
`
- )
- this.wayLayer.addOverlay(divIcon)
+ )
+ this.wayLayer.addOverlay(divIcon)
+ })
+ this.wayLayer.show = false
+ })
+
+ getMonitorList().then(res => {
+ res.data.data.forEach(item => {
+ const billboard = new this.DC.Billboard(new that.DC.Position(Number(item.jd), Number(item.wd), 0), '/img/leftnav/map-monitor.png')
+ billboard.size = [20, 20]
+ this.monitorLayer.addOverlay(billboard)
+ })
+ this.monitorLayer.show = false
})
getSceneList().then(res => {
@@ -182,7 +202,7 @@
this.sceneLayer.show = false
})
- getAEDkList().then(res => {
+ getLifeList({ lifetype: 9 }).then(res => {
res.data.data.forEach(item => {
const label = new this.DC.Label(new that.DC.Position(Number(item.jd), Number(item.wd), 0), item.mechanismname)
label.setStyle({
@@ -203,7 +223,7 @@
this.aedLayer.show = false
})
- getParkList().then(res => {
+ getLifeList({ lifetype: 11 }).then(res => {
res.data.data.forEach(item => {
const divIcon = new this.DC.DivIcon(
new that.DC.Position(Number(item.jd), Number(item.wd), 0),
@@ -227,7 +247,7 @@
this.parkLayer.show = false
})
- getComeList().then(res => {
+ getLifeList({ lifetype: 12 }).then(res => {
res.data.data.forEach(item => {
const label = new that.DC.Label(new that.DC.Position(Number(item.jd), Number(item.wd), 0), item.mechanismname)
label.setStyle({
@@ -247,10 +267,6 @@
})
this.comeLayer.show = false
})
-
- this.tagLayer.show = false
- this.wayLayer.show = false
- this.sceneLayer.show = false
}
}
}
@@ -259,39 +275,45 @@
<style scoped lang='scss'>
.left-nav {
position: fixed;
- top: 15%;
- right: 6%;
+ top: 100px;
+ right: 20px;
+ // bottom: 20px;
+ // left: 0;
z-index: 1;
- li {
- margin-bottom: 8px;
- font-weight: 400;
- display: block;
- width: 98px;
- height: 33px;
- line-height: 33px;
- background-color: #fff;
- border-radius: 17px;
- text-align: center;
- font-size: 0;
- cursor: pointer;
+ ul {
+ // display: flex;
+ li {
+ // margin: 0 8px;
+ margin-bottom: 12px;
+ font-weight: 400;
+ display: block;
+ width: 98px;
+ height: 33px;
+ line-height: 33px;
+ background-color: #fff;
+ border-radius: 17px;
+ text-align: center;
+ font-size: 0;
+ cursor: pointer;
- img {
- width: 24px;
- height: 24px;
- vertical-align: middle;
- margin-right: 10px;
- image-rendering: -moz-crisp-edges;
- image-rendering: -o-crisp-edges;
- image-rendering: -webkit-optimize-contrast;
- image-rendering: crisp-edges;
- -ms-interpolation-mode: nearest-neighbor;
- }
+ img {
+ width: 24px;
+ height: 24px;
+ vertical-align: middle;
+ margin-right: 10px;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: -o-crisp-edges;
+ image-rendering: -webkit-optimize-contrast;
+ image-rendering: crisp-edges;
+ -ms-interpolation-mode: nearest-neighbor;
+ }
- span {
- display: inline-block;
- vertical-align: middle;
- font-size: 14px;
- color: #2f2f2f;
+ span {
+ display: inline-block;
+ vertical-align: middle;
+ font-size: 14px;
+ color: #2f2f2f;
+ }
}
}
}
--
Gitblit v1.9.3