From b41db64b0dc4c5fecb40caf788a1a80e7e4e7eb5 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 31 Dec 2021 15:24:15 +0800
Subject: [PATCH] +
---
src/components/campusNav/index.vue | 153 +++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 135 insertions(+), 18 deletions(-)
diff --git a/src/components/campusNav/index.vue b/src/components/campusNav/index.vue
index 1a14fe6..09370d2 100644
--- a/src/components/campusNav/index.vue
+++ b/src/components/campusNav/index.vue
@@ -5,8 +5,8 @@
@mousedown="move"
:class="{'move': moveFlag}">
<div class="title">
- <img class="icon"
- src="/img/icon/jg.png"
+ <img class="icon deblurring"
+ src="/img/icon/xndh.png"
alt="">
<span>
校内导航
@@ -20,12 +20,12 @@
<div class="container">
<div class="tab">
<ul>
- <li @click="tabClick"
+ <li @click="tabClick('步行')"
:class="{on:tabOneFlag}">
<i></i>
步行
</li>
- <li @click="tabClick"
+ <li @click="tabClick('驾车')"
:class="{on:tabTwoFlag}">
<i></i>
驾车
@@ -50,7 +50,8 @@
</div>
</div>
<div>
- <el-button type="danger">导航</el-button>
+ <el-button @click="startNavigation"
+ type="primary">导航</el-button>
</div>
</div>
</div>
@@ -58,22 +59,35 @@
</template>
<script>
+import { mapGetters } from 'vuex'
+import axios from 'axios'
export default {
name: 'campusNav',
data () {
return {
moveFlag: false,
tabOneFlag: true,
- tabTwoFlag: false
+ tabTwoFlag: false,
+ DC: null,
+ navigationWay: '步行',
+ routeLayer: null
}
},
- props: {
- comeName: {
- type: String
- },
- getToName: {
- type: String
- }
+ computed: {
+ ...mapGetters([
+ 'viewer',
+ // 起点
+ 'startingPoint',
+ // 终点
+ 'terminus',
+ // 出发名称
+ 'getToName',
+ // 到达名称
+ 'comeName'
+ ])
+ },
+ created () {
+ this.DC = global.DC
},
methods: {
move (e) {
@@ -122,12 +136,114 @@
document.onmouseup = null
}
},
+
closeModel () {
- this.$parent.closeCampusNav()
+ if (this.$route.path.indexOf('/campusnavi') != -1) {
+ this.$store.dispatch('delVisitedViews', this.$route)
+ this.$router.push('/pcLayout/default')
+ }
+
+ this.$store.commit('SET_COMENAME', '')
+ this.$store.commit('SET_TERMINUS', null)
+ this.$store.commit('SET_GETTONAME', '')
+ this.$store.commit('SET_STARTINGPOINT', null)
+ this.$store.commit('SET_CAMPUSNAVFLAG', false)
},
- tabClick () {
+
+ tabClick (param) {
+ this.navigationWay = param
this.tabOneFlag = !this.tabOneFlag
this.tabTwoFlag = !this.tabTwoFlag
+ },
+
+ startNavigation () {
+ if (this.routeLayer == null) {
+ this.routeLayer = new this.DC.VectorLayer('navigation')
+ this.viewer.addLayer(this.routeLayer)
+ } else {
+ this.routeLayer.clear()
+ }
+ if (this.startingPoint == null) {
+ this.$message('请输入起点！！！')
+ }
+ if (this.terminus == null) {
+ this.$message('请输入终点！！！')
+ }
+
+ // var start = this.DC.Transform.transformWGS84ToCartesian()
+ const startEntity = new this.DC.Billboard(new this.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(Number(this.terminus[0]), Number(this.terminus[1]), Number(this.terminus[2])), '/img/navicon/end.png')
+ this.routeLayer.addOverlay(endEntity)
+
+ var routes = ''
+
+ if (this.navigationWay == '步行') {
+ axios.get('https://restapi.amap.com/v3/direction/walking', {
+ params: {
+ origin: `${Number(this.startingPoint[0]).toFixed(6)},${Number(this.startingPoint[1]).toFixed(6)}`,
+ destination: `${Number(this.terminus[0]).toFixed(6)},${Number(this.terminus[1]).toFixed(6)}`,
+ key: '4b3e1db3211054ce5b466407cbb9d221',
+ output: 'json'
+ }
+ }).then(res => {
+ res.data.route.paths[0].steps.forEach(item => {
+ item.polyline += ';'
+ routes += item.polyline
+ })
+
+ routes = routes.substr(0, routes.length - 1)
+
+ const polyline = new this.DC.Polyline(routes)
+ polyline.setStyle({
+ width: 3,
+ material: new this.DC.PolylineTrailMaterialProperty({
+ color: this.DC.Color.RED,
+ speed: 10
+ }),
+ clampToGround: true
+ })
+ this.routeLayer.addOverlay(polyline)
+ this.viewer.flyTo(this.routeLayer)
+ })
+ } else {
+ axios.get('https://restapi.amap.com/v3/direction/driving', {
+ params: {
+ origin: `${Number(this.startingPoint[0]).toFixed(6)},${Number(this.startingPoint[1]).toFixed(6)}`,
+ destination: `${Number(this.terminus[0]).toFixed(6)},${Number(this.terminus[1]).toFixed(6)}`,
+ key: '4b3e1db3211054ce5b466407cbb9d221',
+ strategy: 2,
+ extensions: 'all',
+ output: 'json'
+ }
+ }).then(res => {
+ res.data.route.paths[0].steps.forEach(item => {
+ item.polyline += ';'
+ routes += item.polyline
+ })
+
+ routes = routes.substr(0, routes.length - 1)
+
+ const polyline = new this.DC.Polyline(routes)
+ polyline.setStyle({
+ width: 3,
+ material: new this.DC.PolylineTrailMaterialProperty({
+ color: this.DC.Color.RED,
+ speed: 10
+ }),
+ clampToGround: true
+ })
+ this.routeLayer.addOverlay(polyline)
+ this.viewer.flyTo(this.routeLayer)
+ })
+ }
+ },
+
+ clearLayer () {
+ if (this.routeLayer != null) {
+ this.routeLayer.clear()
+ }
}
}
}
@@ -151,14 +267,14 @@
width: 100%;
height: 36px;
line-height: 36px;
- background-color: #020c17;
+ background-color: #2196f3;
.title {
padding-left: 10px;
img {
- width: 18px;
- height: 18px;
+ width: 20px;
+ height: 20px;
vertical-align: middle;
}
@@ -179,6 +295,7 @@
margin: auto;
width: 14px;
height: 14px;
+ cursor: pointer;
}
}
--
Gitblit v1.9.3