From 7804a3a4d61ff1d857973e974bbdf78a2e17feab Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 17 Dec 2021 15:08:36 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-web
---
src/components/leftNav/index.vue | 455 ++++++++++++++++++++++++++++----------------------------
1 files changed, 224 insertions(+), 231 deletions(-)
diff --git a/src/components/leftNav/index.vue b/src/components/leftNav/index.vue
index 63694bb..493e3c6 100644
--- a/src/components/leftNav/index.vue
+++ b/src/components/leftNav/index.vue
@@ -1,140 +1,142 @@
<template>
- <div class="left-nav">
- <ul>
- <li
- v-for="(item, index) in leftNavData"
- :key="index"
- @click="leftNavClick(item)"
- >
- <img :src="item.img" alt="" />
- <span>{{ item.label }}</span>
- </li>
- </ul>
- </div>
+ <div class="left-nav">
+ <ul>
+ <li v-for="(item, index) in leftNavData"
+ :key="index"
+ @click="leftNavClick(item)">
+ <img :src="item.img"
+ alt="">
+ <span>{{item.label}}</span>
+ </li>
+ </ul>
+ </div>
</template>
<script>
+
export default {
- name: "leftNav",
- computed: {},
- data() {
- return {
- leftNavData: [
- {
- flag: false,
- label: "标签",
- img: "img/leftnav/tag.png",
- normal: "img/leftnav/tag.png",
- checked: "img/leftnav/tag-checked.png",
- layer: "tagLayer",
- },
- {
- 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/scene.png",
- normal: "img/leftnav/scene.png",
- checked: "img/leftnav/scene-checked.png",
- layer: "sceneLayer",
- },
- {
- 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",
- img: "img/leftnav/aed.png",
- normal: "img/leftnav/aed.png",
- checked: "img/leftnav/aed-checked.png",
- layer: "aedLayer",
- },
- {
- flag: false,
- label: "停车",
- img: "img/leftnav/park.png",
- normal: "img/leftnav/park.png",
- checked: "img/leftnav/park-checked.png",
- layer: "parkLayer",
- },
- {
- flag: false,
- label: "出入",
- img: "img/leftnav/come.png",
- normal: "img/leftnav/come.png",
- checked: "img/leftnav/come-checked.png",
- layer: "comeLayer",
- },
- ],
- viewer: null,
- DC: null,
- tagLayer: null,
- wayLayer: null,
- sceneLayer: null,
- activityLayer: null,
- aedLayer: null,
- parkLayer: null,
- comeLayer: null,
- };
- },
- created() {
- this.DC = global.DC;
- },
- mounted() {},
- methods: {
- generatePosition(num) {
- const list = [];
- for (let i = 0; i < num; i++) {
- const lng = 121.1372 + Math.random() * 0.5;
- const lat = 31.0129 + Math.random() * 0.5;
- list.push(new this.DC.Position(lng, lat, 0));
- }
- return list;
+ name: 'leftNav',
+ computed: {},
+ data () {
+ return {
+ leftNavData: [
+ {
+ flag: false,
+ label: '标签',
+ img: '/img/leftnav/tag.png',
+ normal: '/img/leftnav/tag.png',
+ checked: '/img/leftnav/tag-checked.png',
+ layer: 'tagLayer'
+ },
+ {
+ 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/scene.png',
+ normal: '/img/leftnav/scene.png',
+ checked: '/img/leftnav/scene-checked.png',
+ layer: 'sceneLayer'
+ },
+ {
+ 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',
+ img: '/img/leftnav/aed.png',
+ normal: '/img/leftnav/aed.png',
+ checked: '/img/leftnav/aed-checked.png',
+ layer: 'aedLayer'
+ },
+ {
+ flag: false,
+ label: '停车',
+ img: '/img/leftnav/park.png',
+ normal: '/img/leftnav/park.png',
+ checked: '/img/leftnav/park-checked.png',
+ layer: 'parkLayer'
+ },
+ {
+ flag: false,
+ label: '出入',
+ img: '/img/leftnav/come.png',
+ normal: '/img/leftnav/come.png',
+ checked: '/img/leftnav/come-checked.png',
+ layer: 'comeLayer'
+ }
+ ],
+ viewer: null,
+ DC: null,
+ tagLayer: null,
+ wayLayer: null,
+ sceneLayer: null,
+ activityLayer: null,
+ aedLayer: null,
+ parkLayer: null,
+ comeLayer: null
+ }
},
- leftNavClick(item) {
- item.flag = !item.flag;
- if (item.flag == true) {
- item.img = item.checked;
- this[item.layer].show = true;
- } else {
- item.img = item.normal;
- this[item.layer].show = false;
- }
+ created () {
+ this.DC = global.DC
},
- initialize(viewer) {
- viewer.scene.globe.depthTestAgainstTerrain = false;
- 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);
+ mounted () {
- this.aedLayer = new this.DC.VectorLayer("aedLayer");
- viewer.addLayer(this.aedLayer);
+ },
+ methods: {
+ generatePosition (num) {
+ const list = []
+ for (let i = 0; i < num; i++) {
+ const lng = 121.44405783 + Math.random() * 0.5
+ const lat = 31.19480456 + Math.random() * 0.5
+ list.push(new this.DC.Position(lng, lat, 0))
+ }
+ return list
+ },
+ leftNavClick (item) {
+ item.flag = !item.flag
+ if (item.flag == true) {
+ item.img = item.checked
+ this[item.layer].show = true
+ } else {
+ item.img = item.normal
+ this[item.layer].show = false
+ }
+ },
+ initialize (viewer) {
+ viewer.scene.globe.depthTestAgainstTerrain = false
+ 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.parkLayer = new this.DC.HtmlLayer("parkLayer");
- viewer.addLayer(this.parkLayer);
- this.comeLayer = new this.DC.VectorLayer("comeLayer");
- viewer.addLayer(this.comeLayer);
+ this.aedLayer = new this.DC.VectorLayer('aedLayer')
+ viewer.addLayer(this.aedLayer)
- const positions1 = this.generatePosition(50);
- positions1.forEach((item, index) => {
- const divIcon = new this.DC.DivIcon(
- item,
- `
+ 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)
+ positions1.forEach((item, index) => {
+ const divIcon = new this.DC.DivIcon(
+ item,
+ `
<div class="tag-entitys-box">
<div class="tag-content">
南门口
@@ -144,15 +146,15 @@
</div>
</div>
`
- );
- this.tagLayer.addOverlay(divIcon);
- });
+ )
+ this.tagLayer.addOverlay(divIcon)
+ })
- const positions2 = this.generatePosition(50);
- positions2.forEach((item, index) => {
- const divIcon = new this.DC.DivIcon(
- item,
- `
+ 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;">
工建街
@@ -162,44 +164,38 @@
</div>
</div>
`
- );
- this.wayLayer.addOverlay(divIcon);
- });
+ )
+ 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];
- this.sceneLayer.addOverlay(billboard);
- });
+ const positions3 = this.generatePosition(50)
+ positions3.forEach(item => {
+ const billboard = new this.DC.Billboard(item, '/img/leftnav/map-panorama.png')
+ billboard.size = [16, 16]
+ this.sceneLayer.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 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];
+ const billboard = new this.DC.Billboard(item, '/img/leftnav/map-aed.png')
+ billboard.size = [16, 16]
- this.aedLayer.addOverlay(billboard);
- });
+ this.aedLayer.addOverlay(billboard)
+ })
- const positions5 = this.generatePosition(120);
- positions5.forEach((item, index) => {
- const divIcon = new this.DC.DivIcon(
- item,
- `
+ 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>
@@ -213,79 +209,76 @@
</div>
</div>
`
- );
- this.parkLayer.addOverlay(divIcon);
- });
+ )
+ this.parkLayer.addOverlay(divIcon)
+ })
- const positions6 = this.generatePosition(10);
- positions6.forEach((item, index) => {
- const label = new this.DC.Label(item, "数字视觉");
- 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 positions6 = this.generatePosition(10)
+ positions6.forEach((item, index) => {
+ const label = new this.DC.Label(item, '数字视觉')
+ 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];
+ const billboard = new this.DC.Billboard(item, '/img/leftnav/map-activity.png')
+ billboard.size = [16, 16]
- this.comeLayer.addOverlay(billboard);
- });
+ this.comeLayer.addOverlay(billboard)
+ })
- this.tagLayer.show = false;
- this.wayLayer.show = false;
- this.sceneLayer.show = false;
- this.aedLayer.show = false;
- this.parkLayer.show = false;
- this.comeLayer.show = false;
- },
- },
-};
+ this.tagLayer.show = false
+ this.wayLayer.show = false
+ this.sceneLayer.show = false
+ this.aedLayer.show = false
+ this.parkLayer.show = false
+ this.comeLayer.show = false
+ }
+ }
+}
</script>
<style scoped lang='scss'>
.left-nav {
- position: fixed;
- top: 15%;
- right: 6%;
- 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;
+ position: fixed;
+ top: 15%;
+ right: 6%;
+ 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;
- 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;
+ }
}
- }
}
</style>
--
Gitblit v1.9.3