From acb45c731c3ccd0a67061efb4e7bdf4f56005672 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 12 Jan 2022 08:52:13 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-web
---
src/components/campusNav/index.vue | 280 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 254 insertions(+), 26 deletions(-)
diff --git a/src/components/campusNav/index.vue b/src/components/campusNav/index.vue
index f10d29e..8a92a73 100644
--- a/src/components/campusNav/index.vue
+++ b/src/components/campusNav/index.vue
@@ -9,7 +9,7 @@
src="/img/icon/xndh.png"
alt="">
<span>
- 校内导航
+ 社区内导航
</span>
</div>
<img class="close"
@@ -34,19 +34,41 @@
</div>
<div class="content">
<div>
- <div>
- <el-input v-model="getToName"
+ <div id="ToNameContainer">
+ <el-input v-model="toNameText"
+ @input="toNameChange"
placeholder="起点……">
<template slot="prepend"><i class="el-icon-location"
style="color: green;"></i></template>
</el-input>
+ <div v-show="toNameShow"
+ class="toname-value-box">
+ <ul>
+ <li v-for="(item, index) in toNameList"
+ :key="index"
+ @click="loadPopup(item)">
+ {{item.name}}
+ </li>
+ </ul>
+ </div>
</div>
- <div>
- <el-input v-model="comeName"
+ <div id="ComeNameContainer">
+ <el-input v-model="comeNameText"
+ @input="comeNameChange"
placeholder="终点……">
<template slot="prepend"><i class="el-icon-location"
style="color: red;"></i></template>
</el-input>
+ <div v-show="comeNameShow"
+ class="comename-value-box">
+ <ul>
+ <li v-for="(item, index) in comeNameList"
+ :key="index"
+ @click="loadPopup(item)">
+ {{item.name}}
+ </li>
+ </ul>
+ </div>
</div>
</div>
<div>
@@ -60,6 +82,7 @@
<script>
import { mapGetters } from 'vuex'
+import { getSearchList } from '@/api/pc/public/search'
import axios from 'axios'
export default {
name: 'campusNav',
@@ -70,27 +93,43 @@
tabTwoFlag: false,
DC: null,
navigationWay: '步行',
- routeLayer: null
- }
- },
- props: {
- comeName: {
- type: String,
- default: ''
- },
- getToName: {
- type: String,
- default: ''
+ routeLayer: null,
+ toNameText: '',
+ comeNameText: '',
+ toNameList: [],
+ comeNameList: [],
+ toNameShow: false,
+ comeNameShow: false
+
}
},
computed: {
...mapGetters([
'viewer',
+ 'twoOrThree',
// 起点
'startingPoint',
// 终点
- 'terminus'
+ 'terminus',
+ // 出发名称
+ 'getToName',
+ // 到达名称
+ 'comeName'
])
+ },
+ watch: {
+ getToName: {
+ immediate: true,
+ handler (newCode, oldCode) {
+ this.toNameText = newCode
+ }
+ },
+ comeName: {
+ immediate: true,
+ handler (newCode, oldCode) {
+ this.comeNameText = newCode
+ }
+ }
},
created () {
this.DC = global.DC
@@ -142,14 +181,35 @@
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.toNameText = ''
+ this.toNameList = []
+ this.toNameShow = false
+ this.comeNameText = ''
+ this.comeNameList = []
+ this.comeNameShow = false
+ if (this.routeLayer != null) {
+ this.routeLayer.clear()
+ }
+ 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 (param) {
this.navigationWay = param
this.tabOneFlag = !this.tabOneFlag
this.tabTwoFlag = !this.tabTwoFlag
},
+
startNavigation () {
if (this.routeLayer == null) {
this.routeLayer = new this.DC.VectorLayer('navigation')
@@ -173,19 +233,41 @@
var routes = ''
+ var startLog = Number(this.startingPoint[0]).toFixed(6)
+ var startLat = Number(this.startingPoint[1]).toFixed(6)
+ 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)
+
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)}`,
+ origin: `${origin[0].toFixed(6) + ',' + origin[1].toFixed(6)}`,
+ destination: `${destination[0].toFixed(6) + ',' + destination[1].toFixed(6)}`,
key: '4b3e1db3211054ce5b466407cbb9d221',
output: 'json'
}
}).then(res => {
res.data.route.paths[0].steps.forEach(item => {
- item.polyline += ';'
- routes += item.polyline
+ item.polyline = item.polyline.split(';')
+
+ var lineArr = []
+
+ item.polyline.forEach(it => {
+ it = it.split(',')
+ lineArr.push(this.DC.CoordTransform.GCJ02ToWGS84(it[0], it[1]).join(','))
+ })
+
+ lineArr = lineArr.join(';')
+
+ lineArr += ';'
+
+ routes += lineArr
})
+
+ console.log(routes, 123)
routes = routes.substr(0, routes.length - 1)
@@ -199,13 +281,45 @@
clampToGround: true
})
this.routeLayer.addOverlay(polyline)
- this.viewer.flyTo(this.routeLayer)
+ if (this.twoOrThree == '3 维') {
+ this.viewer.flyTo(this.routeLayer)
+ } else {
+ var longitude = null
+ var latitude = null
+ startLog = Number(startLog)
+ endLog = Number(endLog)
+ if (startLog > endLog) {
+ longitude = (startLog - endLog) / 2 + endLog
+ } else {
+ longitude = (endLog - startLog) / 2 + startLog
+ }
+ startLat = Number(startLat)
+ endLat = Number(endLat)
+ if (startLat > endLat) {
+ latitude = (startLat - endLat) / 2 + endLat
+ } else {
+ latitude = (endLat - startLat) / 2 + startLat
+ }
+
+ this.viewer.camera.setView({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: this.DC.Namespace.Cesium.Cartesian3.fromDegrees(longitude, latitude, 300),
+ orientation: {
+ // 指向
+ heading: this.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: this.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ }
})
} 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)}`,
+ origin: `${startLog + ',' + startLat}`,
+ destination: `${endLog + ',' + endLat}`,
key: '4b3e1db3211054ce5b466407cbb9d221',
strategy: 2,
extensions: 'all',
@@ -229,13 +343,93 @@
clampToGround: true
})
this.routeLayer.addOverlay(polyline)
- this.viewer.flyTo(this.routeLayer)
+
+ if (this.twoOrThree == '3 维') {
+ this.viewer.flyTo(this.routeLayer)
+ } else {
+ var longitude = null
+ var latitude = null
+ startLog = Number(startLog)
+ endLog = Number(endLog)
+ if (startLog > endLog) {
+ longitude = (startLog - endLog) / 2 + endLog
+ } else {
+ longitude = (endLog - startLog) / 2 + startLog
+ }
+ startLat = Number(startLat)
+ endLat = Number(endLat)
+ if (startLat > endLat) {
+ latitude = (startLat - endLat) / 2 + endLat
+ } else {
+ latitude = (endLat - startLat) / 2 + startLat
+ }
+
+ this.viewer.camera.setView({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: this.DC.Namespace.Cesium.Cartesian3.fromDegrees(longitude, latitude, 300),
+ orientation: {
+ // 指向
+ heading: this.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: this.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ }
})
}
},
+
clearLayer () {
if (this.routeLayer != null) {
this.routeLayer.clear()
+ }
+ },
+
+ toNameChange () {
+ if (this.toNameText == '') {
+ this.toNameList = []
+ this.toNameShow = false
+ return
+ }
+ getSearchList({ mechanismName: this.toNameText }).then(res => {
+ if (res.data.data.length > 0) {
+ this.toNameList = res.data.data
+ this.toNameShow = true
+ }
+ })
+ },
+
+ comeNameChange () {
+ if (this.comeNameText == '') {
+ this.comeNameList = []
+ this.comeNameShow = false
+ return
+ }
+ getSearchList({ mechanismName: this.comeNameText }).then(res => {
+ if (res.data.data.length > 0) {
+ this.comeNameList = res.data.data
+ this.comeNameShow = true
+ }
+ })
+ },
+
+ shortcutShow (event) {
+ var toBox = document.getElementById('ToNameContainer')
+
+ if (toBox) {
+ if (!toBox.contains(event.target)) { // 这句是说如果我们点击到了id为myPanel以外的区域
+ this.toNameShow = false
+ }
+ }
+
+ var comeBox = document.getElementById('ComeNameContainer')
+
+ if (comeBox) {
+ if (!comeBox.contains(event.target)) { // 这句是说如果我们点击到了id为myPanel以外的区域
+ this.comeNameShow = false
+ }
}
}
}
@@ -359,6 +553,7 @@
}
.content {
+ position: relative;
padding: 0 10px;
display: flex;
align-items: center;
@@ -380,6 +575,39 @@
width: 100px;
text-align: center;
}
+
+ .toname-value-box,
+ .comename-value-box {
+ position: absolute;
+ top: 48px;
+ left: 65px;
+ width: auto;
+ min-width: 160px;
+ max-height: 520px;
+ color: #2c3e50;
+ background: #fff;
+ overflow-y: auto;
+ box-shadow: 0 0 14px 2px rgb(221, 221, 221);
+ border-radius: 5px;
+ z-index: 11;
+
+ ul {
+ li {
+ padding-left: 20px;
+ height: 36px;
+ line-height: 36px;
+ cursor: pointer;
+ }
+
+ li:hover {
+ background: #f5f5f5;
+ }
+ }
+ }
+
+ .comename-value-box {
+ top: 100px;
+ }
}
}
}
--
Gitblit v1.9.3