From 81f54040c2cb65537c6c6e1db8358a39a57dea0d Mon Sep 17 00:00:00 2001
From: mayisheng <admin>
Date: Mon, 15 Aug 2022 16:14:01 +0800
Subject: [PATCH] 1
---
src/components/campusNav/index.vue | 200 +++++++++++++++++++++++++++-----------------------
1 files changed, 108 insertions(+), 92 deletions(-)
diff --git a/src/components/campusNav/index.vue b/src/components/campusNav/index.vue
index ee06236..c6e43a2 100644
--- a/src/components/campusNav/index.vue
+++ b/src/components/campusNav/index.vue
@@ -5,7 +5,7 @@
<img class="icon deblurring" src="/img/icon/xndh.png" alt />
<span>校区内导航</span>
</div>
- <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
+ <img class="close deblurring" src="/img/navicon/close.png" alt @click="closeModel" />
</template>
<template slot="public-box-content">
<div class="tab">
@@ -73,15 +73,21 @@
import { mapGetters } from 'vuex'
import { getSearchList } from '@/api/pc/public/search'
import axios from 'axios'
+
+const CamPusNavLayer = {
+ campusStartLayer: null,
+ campusEndLayer: null,
+ campusRouteLayer: null
+}
+
export default {
name: 'campusNav',
data () {
return {
+
tabOneFlag: true,
tabTwoFlag: false,
- DC: null,
navigationWay: '步行',
- routeLayer: null,
toNameText: '',
comeNameText: '',
toNameList: [],
@@ -91,8 +97,6 @@
overChouse: false,
butChouse: '',
- startLayer: null,
- endLayer: null,
pathBoxShow: false,
pathBoxList: [],
@@ -102,7 +106,6 @@
},
computed: {
...mapGetters([
- 'viewer',
'twoOrThree',
// 起点
'startingPoint',
@@ -142,7 +145,6 @@
}
},
created () {
- this.DC = global.DC
},
mounted () {
const leftBut = document.querySelectorAll('.el-input-group__prepend')
@@ -162,42 +164,42 @@
// 若是已经有导航，恢复未点击图标
if (val == 'start') {
// 初始化图标图层
- if (this.endLayer == null) {
- this.endLayer = new this.DC.VectorLayer('endLayer')
- this.viewer.addLayer(this.endLayer)
+ if (CamPusNavLayer.campusEndLayer == null) {
+ CamPusNavLayer.campusEndLayer = new global.DC.VectorLayer('campusEndLayer')
+ global.viewer.addLayer(CamPusNavLayer.campusEndLayer)
} else {
- this.endLayer.clear()
+ CamPusNavLayer.campusEndLayer.clear()
}
// console.log("baoliuend", "see");
that.$store.commit('SET_STARTINGPOINT', [])
- const endEntity = new that.DC.Billboard(
- new that.DC.Position(
+ const endEntity = new global.DC.Billboard(
+ new global.DC.Position(
Number(this.terminus[0]),
Number(this.terminus[1]),
Number(this.terminus[2])
),
'/img/navicon/end.png'
)
- that.endLayer.addOverlay(endEntity)
+ CamPusNavLayer.campusEndLayer.addOverlay(endEntity)
} else if (val == 'end') {
// 初始化图标图层
- if (this.startLayer == null) {
- this.startLayer = new this.DC.VectorLayer('startLayer')
- this.viewer.addLayer(this.startLayer)
+ if (CamPusNavLayer.campusStartLayer == null) {
+ CamPusNavLayer.campusStartLayer = new global.DC.VectorLayer('campusStartLayer')
+ global.viewer.addLayer(CamPusNavLayer.campusStartLayer)
} else {
- this.startLayer.clear()
+ CamPusNavLayer.campusStartLayer.clear()
}
// console.log("baoliustart", "see");
that.$store.commit('SET_TERMINUS', [])
- const startEntity = new that.DC.Billboard(
- new that.DC.Position(
+ const startEntity = new global.DC.Billboard(
+ new global.DC.Position(
Number(this.startingPoint[0]),
Number(this.startingPoint[1]),
Number(this.startingPoint[2])
),
'/img/navicon/start.png'
)
- that.startLayer.addOverlay(startEntity)
+ CamPusNavLayer.campusStartLayer.addOverlay(startEntity)
}
}
@@ -206,31 +208,31 @@
// 关闭其他地图事件
that.$store.commit('set_closeMapClick', true)
// 添加标记
- const tooltip = that.viewer.tooltip
+ const tooltip = global.viewer.tooltip
tooltip.enable = true
let title = ''
if (val == 'start') {
title = '点击选择起点'
// 初始化图标图层
- if (this.startLayer == null) {
- this.startLayer = new this.DC.VectorLayer('startLayer')
- this.viewer.addLayer(this.startLayer)
+ if (CamPusNavLayer.campusStartLayer == null) {
+ CamPusNavLayer.campusStartLayer = new global.DC.VectorLayer('campusStartLayer')
+ global.viewer.addLayer(CamPusNavLayer.campusStartLayer)
} else {
- this.startLayer.clear()
+ CamPusNavLayer.campusStartLayer.clear()
}
} else if (val == 'end') {
title = '点击选择终点'
// 初始化图标图层
- if (this.endLayer == null) {
- this.endLayer = new this.DC.VectorLayer('endLayer')
- this.viewer.addLayer(this.endLayer)
+ if (CamPusNavLayer.campusEndLayer == null) {
+ CamPusNavLayer.campusEndLayer = new global.DC.VectorLayer('campusEndLayer')
+ global.viewer.addLayer(CamPusNavLayer.campusEndLayer)
} else {
- this.endLayer.clear()
+ CamPusNavLayer.campusEndLayer.clear()
}
}
that.overChouse = false // 开启事件
// 地图选点
- that.clicks = that.viewer.on(that.DC.MouseEventType.CLICK, (e) => {
+ that.clicks = global.viewer.on(global.DC.MouseEventType.CLICK, (e) => {
if (that.overChouse) {
return
}
@@ -243,29 +245,29 @@
// 传输坐标数据
that.$store.commit('SET_STARTINGPOINT', [...lnglat, 0])
// 起点
- const startEntity = new that.DC.Billboard(
- new that.DC.Position(
+ const startEntity = new global.DC.Billboard(
+ new global.DC.Position(
Number(lnglat[0]),
Number(lnglat[1]),
Number(0)
),
'/img/navicon/start.png'
)
- that.startLayer.addOverlay(startEntity)
+ CamPusNavLayer.campusStartLayer.addOverlay(startEntity)
} else if (that.butChouse == 'end') {
that.comeNameText = '自定义终点'
// 传输坐标数据
that.$store.commit('SET_TERMINUS', [...lnglat, 0])
// 终点
- const endEntity = new that.DC.Billboard(
- new that.DC.Position(
+ const endEntity = new global.DC.Billboard(
+ new global.DC.Position(
Number(lnglat[0]),
Number(lnglat[1]),
Number(0)
),
'/img/navicon/end.png'
)
- that.endLayer.addOverlay(endEntity)
+ CamPusNavLayer.campusEndLayer.addOverlay(endEntity)
}
title = ''
tooltip.enable = false
@@ -273,7 +275,7 @@
// 开启其他地图事件
that.$store.commit('set_closeMapClick', false)
})
- that.moves = that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => {
+ that.moves = global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, (e) => {
if (that.overChouse) {
return
}
@@ -281,6 +283,7 @@
tooltip.showAt(e.windowPosition, title)
})
},
+
closeModel () {
if (this.$route.path.indexOf('/campusnavi') != -1) {
this.$store.dispatch('delVisitedViews', this.$route)
@@ -293,18 +296,21 @@
this.comeNameText = ''
this.comeNameList = []
this.comeNameShow = false
- if (this.routeLayer != null) {
- this.routeLayer.clear()
+ this.pathBoxList = []
+ this.pathBoxShow = false
+
+ if (CamPusNavLayer.campusRouteLayer != null) {
+ CamPusNavLayer.campusRouteLayer.clear()
this.isOverRouter = false
}
// 清除自定义位置
- if (this.startLayer != null) {
- this.startLayer.clear()
- // this.startLayer = null;
+ if (CamPusNavLayer.campusStartLayer != null) {
+ CamPusNavLayer.campusStartLayer.clear()
+ // CamPusNavLayer.campusStartLayer = null;
}
- if (this.endLayer != null) {
- this.endLayer.clear()
- // this.endLayer = null;
+ if (CamPusNavLayer.campusEndLayer != null) {
+ CamPusNavLayer.campusEndLayer.clear()
+ // CamPusNavLayer.campusEndLayer = null;
}
this.$store.commit('SET_COMENAME', '')
this.$store.commit('SET_TERMINUS', null)
@@ -322,20 +328,20 @@
startNavigation () {
const that = this
// 清除自定义位置
- if (this.startLayer != null) {
- this.startLayer.clear()
- // this.startLayer = null;
+ if (CamPusNavLayer.campusStartLayer != null) {
+ CamPusNavLayer.campusStartLayer.clear()
+ // CamPusNavLayer.campusStartLayer = null;
}
- if (this.endLayer != null) {
- this.endLayer.clear()
- // this.endLayer = null;
+ if (CamPusNavLayer.campusEndLayer != null) {
+ CamPusNavLayer.campusEndLayer.clear()
+ // CamPusNavLayer.campusEndLayer = null;
}
- if (this.routeLayer == null) {
- this.routeLayer = new this.DC.VectorLayer('navigation')
- this.viewer.addLayer(this.routeLayer)
+ if (CamPusNavLayer.campusRouteLayer == null) {
+ CamPusNavLayer.campusRouteLayer = new global.DC.VectorLayer('campusRouteLayer')
+ global.viewer.addLayer(CamPusNavLayer.campusRouteLayer)
} else {
- this.routeLayer.clear()
+ CamPusNavLayer.campusRouteLayer.clear()
}
if (this.startingPoint == null) {
this.$message('请输入起点！！！')
@@ -344,26 +350,26 @@
this.$message('请输入终点！！！')
}
- // var start = this.DC.Transform.transformWGS84ToCartesian()
- const startEntity = new this.DC.Billboard(
- new this.DC.Position(
+ // var start = global.DC.Transform.transformWGS84ToCartesian()
+ const startEntity = new global.DC.Billboard(
+ new global.DC.Position(
Number(this.startingPoint[0]),
Number(this.startingPoint[1]),
Number(this.startingPoint[2])
),
'/img/navicon/start.png'
)
- this.routeLayer.addOverlay(startEntity)
- // var end = this.DC.Transform.transformWGS84ToCartesian()
- const endEntity = new this.DC.Billboard(
- new this.DC.Position(
+ CamPusNavLayer.campusRouteLayer.addOverlay(startEntity)
+ // var end = global.DC.Transform.transformWGS84ToCartesian()
+ const endEntity = new global.DC.Billboard(
+ new global.DC.Position(
Number(this.terminus[0]),
Number(this.terminus[1]),
Number(this.terminus[2])
),
'/img/navicon/end.png'
)
- this.routeLayer.addOverlay(endEntity)
+ CamPusNavLayer.campusRouteLayer.addOverlay(endEntity)
var routes = ''
@@ -372,8 +378,8 @@
var endLog = Number(this.terminus[0]).toFixed(6)
var endLat = Number(this.terminus[1]).toFixed(6)
- var origin = this.DC.CoordTransform.WGS84ToGCJ02(startLog, startLat)
- var destination = this.DC.CoordTransform.WGS84ToGCJ02(endLog, endLat)
+ var origin = global.DC.CoordTransform.WGS84ToGCJ02(startLog, startLat)
+ var destination = global.DC.CoordTransform.WGS84ToGCJ02(endLog, endLat)
if (this.navigationWay == '步行') {
axios
@@ -407,7 +413,7 @@
item.polyline.forEach((it) => {
it = it.split(',')
lineArr.push(
- this.DC.CoordTransform.GCJ02ToWGS84(it[0], it[1]).join(',')
+ global.DC.CoordTransform.GCJ02ToWGS84(it[0], it[1]).join(',')
)
})
@@ -423,18 +429,22 @@
routes =
startLog + ',' + startLat + ';' + routes + endLog + ',' + endLat
- const polyline = new this.DC.Polyline(routes)
+ const polyline = new global.DC.Polyline(routes)
polyline.setStyle({
- width: 3,
- material: new this.DC.PolylineTrailMaterialProperty({
- color: this.DC.Color.RED,
- speed: 10
+ width: 6,
+ arcType: true,
+ material: new global.DC.PolylineImageTrailMaterialProperty({
+ color: global.DC.Namespace.Cesium.Color.fromBytes(10, 255, 10),
+ speed: 60,
+ image: '/img/icon/right.png',
+ repeat: { x: 320, y: 1 }
}),
clampToGround: true
})
- this.routeLayer.addOverlay(polyline)
+
+ CamPusNavLayer.campusRouteLayer.addOverlay(polyline)
if (this.twoOrThree == '真三维') {
- this.viewer.flyTo(this.routeLayer)
+ global.viewer.flyTo(CamPusNavLayer.campusRouteLayer)
} else {
var longitude = null
var latitude = null
@@ -453,19 +463,19 @@
latitude = (endLat - startLat) / 2 + startLat
}
that.isOverRouter = true
- this.viewer.camera.setView({
+ global.viewer.camera.setView({
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
// fromDegrees()方法，将经纬度和高程转换为世界坐标
- destination: this.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
longitude,
latitude,
600
),
orientation: {
// 指向
- heading: this.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
// 视角
- pitch: this.DC.Namespace.Cesium.Math.toRadians(-90),
+ pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
roll: 0.0
}
})
@@ -493,7 +503,7 @@
item.polyline.forEach((it) => {
it = it.split(',')
lineArr.push(
- this.DC.CoordTransform.GCJ02ToWGS84(it[0], it[1]).join(',')
+ global.DC.CoordTransform.GCJ02ToWGS84(it[0], it[1]).join(',')
)
})
@@ -507,19 +517,23 @@
routes =
startLog + ',' + startLat + ';' + routes + endLog + ',' + endLat
- const polyline = new this.DC.Polyline(routes)
+ const polyline = new global.DC.Polyline(routes)
polyline.setStyle({
- width: 3,
- material: new this.DC.PolylineTrailMaterialProperty({
- color: this.DC.Color.RED,
- speed: 10
+ width: 6,
+ arcType: true,
+ material: new global.DC.PolylineImageTrailMaterialProperty({
+ color: global.DC.Namespace.Cesium.Color.fromBytes(10, 255, 10),
+ speed: 60,
+ image: '/img/icon/right.png',
+ repeat: { x: 320, y: 1 }
}),
clampToGround: true
})
- this.routeLayer.addOverlay(polyline)
+
+ CamPusNavLayer.campusRouteLayer.addOverlay(polyline)
if (this.twoOrThree == '真三维') {
- this.viewer.flyTo(this.routeLayer)
+ global.viewer.flyTo(CamPusNavLayer.campusRouteLayer)
} else {
var longitude = null
var latitude = null
@@ -538,19 +552,19 @@
latitude = (endLat - startLat) / 2 + startLat
}
that.isOverRouter = true
- this.viewer.camera.setView({
+ global.viewer.camera.setView({
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
// fromDegrees()方法，将经纬度和高程转换为世界坐标
- destination: this.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
longitude,
latitude,
600
),
orientation: {
// 指向
- heading: this.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
// 视角
- pitch: this.DC.Namespace.Cesium.Math.toRadians(-90),
+ pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
roll: 0.0
}
})
@@ -560,8 +574,10 @@
},
clearLayer () {
- if (this.routeLayer != null) {
- this.routeLayer.clear()
+ if (CamPusNavLayer.campusRouteLayer != null) {
+ CamPusNavLayer.campusRouteLayer.clear()
+ this.pathBoxList = []
+ this.pathBoxShow = false
}
},
--
Gitblit v1.9.3