From 919596422fd359e62a8b224d1321c13d843c2fae Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 06 Dec 2023 16:07:03 +0800
Subject: [PATCH] pc端，导航逻辑梳理
---
src/components/campusNav/index.vue | 533 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 278 insertions(+), 255 deletions(-)
diff --git a/src/components/campusNav/index.vue b/src/components/campusNav/index.vue
index 543619f..7309cf5 100644
--- a/src/components/campusNav/index.vue
+++ b/src/components/campusNav/index.vue
@@ -1,73 +1,79 @@
<template>
- <public-box class="campus-nav-box">
- <template slot="public-box-header">
- <div class="title">
- <img class="icon deblurring" :src="publicPath + 'img/icon/xndh.png'" alt />
- <span>校区内导航</span>
- </div>
- <img class="close deblurring" :src="publicPath + 'img/navicon/close.png'" alt @click="closeModel" />
- </template>
- <template slot="public-box-content">
- <div class="tab">
- <ul v-if="twoOrThree == '真三维'">
- <li @click="tabClick('步行')" :class="{ on: tabOneFlag }">
- <i></i>
- 步行
- </li>
- <li @click="tabClick('驾车')" :class="{ on: tabTwoFlag }">
- <i></i>
- 驾车
- </li>
- </ul>
- <v-else>
- <ul>
- <li>江西科技师范大学欢迎您！</li>
+ <div>
+ <public-box class="campus-nav-box">
+ <template slot="public-box-header">
+ <div class="title">
+ <img class="icon deblurring" :src="publicPath + 'img/icon/xndh.png'" alt />
+ <span>校区内导航</span>
+ </div>
+ <img class="close deblurring" :src="publicPath + 'img/navicon/close.png'" alt @click="closeModel" />
+ </template>
+ <template slot="public-box-content">
+ <div class="tab">
+ <ul v-if="twoOrThree == '真三维'">
+ <li @click="tabClick('步行')" :class="{ on: tabOneFlag }">
+ <i></i>
+ 步行
+ </li>
+ <li @click="tabClick('驾车')" :class="{ on: tabTwoFlag }">
+ <i></i>
+ 驾车
+ </li>
</ul>
- </v-else>
- </div>
- <div class="container">
- <div>
- <div id="ToNameContainer">
- <el-input v-model="toNameText" @input="toNameChange" placeholder="起点……">
- <template slot="prepend">
- <i class="el-icon-location mydingwei" 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="originChange(item)">{{
- item.mechanismname
- }}</li>
- </ul>
+ <v-else>
+ <ul>
+ <li>江西科技师范大学欢迎您！</li>
+ </ul>
+ </v-else>
+ </div>
+ <div class="container">
+ <div>
+ <div id="ToNameContainer">
+ <el-input v-model="toNameText" @input="toNameChange" placeholder="起点……">
+ <template slot="prepend">
+ <i class="el-icon-location mydingwei" 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="originChange(item)">{{
+ item.mechanismname
+ }}</li>
+ </ul>
+ </div>
+ </div>
+ <div id="ComeNameContainer">
+ <el-input v-model="comeNameText" @input="comeNameChange" placeholder="终点……">
+ <template slot="prepend">
+ <i class="el-icon-location mydingwei" 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="terminusChange(item)">{{
+ item.mechanismname
+ }}</li>
+ </ul>
+ </div>
</div>
</div>
- <div id="ComeNameContainer">
- <el-input v-model="comeNameText" @input="comeNameChange" placeholder="终点……">
- <template slot="prepend">
- <i class="el-icon-location mydingwei" 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="terminusChange(item)">{{
- item.mechanismname
- }}</li>
- </ul>
- </div>
+ <div>
+ <el-button @click="startNavigation" type="primary">导航</el-button>
</div>
</div>
- <div>
- <el-button @click="startNavigation" type="primary">导航</el-button>
- </div>
- </div>
- <div class="path-box" v-show="pathBoxShow">
- <ul>
- <li v-for="(item, index) in pathBoxList" :key="index">{{ item.instruction }}</li>
- </ul>
- </div>
- </template>
- </public-box>
+ <div class="path-box" v-show="pathBoxShow">
+ <ul>
+ <li v-for="(item, index) in pathBoxList" :key="index">{{ item.instruction }}</li>
+ </ul>
+ </div>
+ </template>
+ </public-box>
+
+ <div id="overlay" v-show="toolTipShow">
+ {{ toolTipText }}
+ </div>
+ </div>
</template>
<script>
@@ -75,7 +81,7 @@
import { getSearchList } from '@/api/pc/public/search'
import axios from 'axios'
-import { Tooltip } from 'ol/control'
+import OlOverlay from "ol/Overlay"
import VectorLayer from "ol/layer/Vector"
import VectorSource from "ol/source/Vector"
@@ -85,11 +91,15 @@
import Point from 'ol/geom/Point.js'
import { Icon, Style, Fill, Text, Stroke } from 'ol/style.js'
+import { WGS84ToGCJ02 } from '@/utils/CoordTransform'
+
const CamPusNavLayer = {
campusStartLayer: null,
campusEndLayer: null,
campusRouteLayer: null
}
+
+let overlayLayer
export default {
name: 'campusNav',
@@ -113,7 +123,11 @@
pathBoxShow: false,
pathBoxList: [],
- isOverRouter: false // 是否启用了导航
+ isOverRouter: false, // 是否启用了导航
+
+ toolTipShow: false,
+ toolTipTitle: '',
+ toolTipText: ''
}
},
computed: {
@@ -171,132 +185,110 @@
chouseDian (val) {
const that = this
- that.clearLayer() // 清除完成的导航
- if (that.isOverRouter) {
- // 若是已经有导航，恢复未点击图标
- if (val == 'start') {
- // 初始化图标图层
- if (CamPusNavLayer.campusEndLayer == null) {
- CamPusNavLayer.campusEndLayer = new global.DC.VectorLayer('campusEndLayer')
- global.viewer.addLayer(CamPusNavLayer.campusEndLayer)
- } else {
- CamPusNavLayer.campusEndLayer.clear()
- }
- // console.log("baoliuend", "see");
+ that.clearLayer('campusRouteLayer', true)
+
+ // 添加标记
+ if (val == 'start') {
+ that.clearLayer('campusStartLayer')
+
+ that.toolTipTitle = '点击选择起点'
+
+ if (that.isOverRouter) {
that.$store.commit('SET_STARTINGPOINT', [])
- const endEntity = new global.DC.Billboard(
- new global.DC.Position(
- Number(this.terminus[0]),
- Number(this.terminus[1]),
- Number(this.terminus[2])
- ),
- this.publicPath + 'img/navicon/end.png'
- )
- CamPusNavLayer.campusEndLayer.addOverlay(endEntity)
- } else if (val == 'end') {
- // 初始化图标图层
- if (CamPusNavLayer.campusStartLayer == null) {
- CamPusNavLayer.campusStartLayer = new global.DC.VectorLayer('campusStartLayer')
- global.viewer.addLayer(CamPusNavLayer.campusStartLayer)
- } else {
- CamPusNavLayer.campusStartLayer.clear()
- }
- // console.log("baoliustart", "see");
+
+ CamPusNavLayer.campusStartLayer.getSource().addFeature(that.getCurItemFeature({
+ lng: this.startingPoint[0],
+ lat: this.startingPoint[1],
+ url: this.publicPath + 'img/navicon/start.png',
+ }))
+ }
+ } else if (val == 'end') {
+ that.clearLayer('campusEndLayer')
+
+ that.toolTipTitle = '点击选择终点'
+
+ if (that.isOverRouter) {
that.$store.commit('SET_TERMINUS', [])
- const startEntity = new global.DC.Billboard(
- new global.DC.Position(
- Number(this.startingPoint[0]),
- Number(this.startingPoint[1]),
- Number(this.startingPoint[2])
- ),
- this.publicPath + 'img/navicon/start.png'
- )
- CamPusNavLayer.campusStartLayer.addOverlay(startEntity)
+
+ CamPusNavLayer.campusRouteLayer.getSource().addFeature(that.getCurItemFeature({
+ lng: this.terminus[0],
+ lat: this.terminus[1],
+ url: this.publicPath + 'img/navicon/end.png',
+ }))
}
}
- // console.log(val, "see1");
this.butChouse = val
// 关闭其他地图事件
that.$store.commit('set_closeMapClick', true)
- // 添加标记
- const tooltip = new Tooltip({})
- tooltip.show([longitude, latitude], '自定义内容')
-
- // tooltip.enable = true
- // let title = ''
- if (val == 'start') {
- title = '点击选择起点'
- // 初始化图标图层
- if (CamPusNavLayer.campusStartLayer == null) {
- CamPusNavLayer.campusStartLayer = new global.DC.VectorLayer('campusStartLayer')
- global.viewer.addLayer(CamPusNavLayer.campusStartLayer)
- } else {
- CamPusNavLayer.campusStartLayer.clear()
- }
- } else if (val == 'end') {
- title = '点击选择终点'
- // 初始化图标图层
- if (CamPusNavLayer.campusEndLayer == null) {
- CamPusNavLayer.campusEndLayer = new global.DC.VectorLayer('campusEndLayer')
- global.viewer.addLayer(CamPusNavLayer.campusEndLayer)
- } else {
- CamPusNavLayer.campusEndLayer.clear()
- }
- }
that.overChouse = false // 开启事件
- // 地图选点
- that.clicks = global.viewer.on(global.DC.MouseEventType.CLICK, (e) => {
- if (that.overChouse) {
- return
- }
- const lnglat = [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat]
- // console.log(lnglat, "see11");
- // console.log(that.butChouse, "see11");
- // 应用数据
- if (that.butChouse == 'start') {
- that.toNameText = '自定义起点'
- // 传输坐标数据
- that.$store.commit('SET_STARTINGPOINT', [...lnglat, 0])
- // 起点
- const startEntity = new global.DC.Billboard(
- new global.DC.Position(
- Number(lnglat[0]),
- Number(lnglat[1]),
- Number(0)
- ),
- this.publicPath + 'img/navicon/start.png'
- )
- CamPusNavLayer.campusStartLayer.addOverlay(startEntity)
- } else if (that.butChouse == 'end') {
- that.comeNameText = '自定义终点'
- // 传输坐标数据
- that.$store.commit('SET_TERMINUS', [...lnglat, 0])
- // 终点
- const endEntity = new global.DC.Billboard(
- new global.DC.Position(
- Number(lnglat[0]),
- Number(lnglat[1]),
- Number(0)
- ),
- this.publicPath + 'img/navicon/end.png'
- )
- CamPusNavLayer.campusEndLayer.addOverlay(endEntity)
- }
- title = ''
- tooltip.enable = false
- that.overChouse = true // 关闭事件
- // 开启其他地图事件
+
+ that.map2D.on('click', that.mapHandlerClick)
+ that.map2D.on('pointermove', that.mapHandlerMove)
+ },
+
+ mapHandlerClick (event) {
+ const that = this
+ const coordinate = that.map2D.getEventCoordinate(event.originalEvent)
+
+ if (that.butChouse == 'start') {
+ that.toNameText = '自定义起点'
+ // 传输坐标数据
+ that.$store.commit('SET_STARTINGPOINT', [...coordinate, 0])
+
+ CamPusNavLayer.campusStartLayer.getSource().addFeature(that.getCurItemFeature({
+ lng: Number(coordinate[0]),
+ lat: Number(coordinate[1]),
+ url: this.publicPath + 'img/navicon/start.png',
+ }))
+ } else if (that.butChouse == 'end') {
+ that.comeNameText = '自定义终点'
+ // 传输坐标数据
+ that.$store.commit('SET_TERMINUS', [...coordinate, 0])
+
+ CamPusNavLayer.campusEndLayer.getSource().addFeature(that.getCurItemFeature({
+ lng: Number(coordinate[0]),
+ lat: Number(coordinate[1]),
+ url: this.publicPath + 'img/navicon/end.png',
+ }))
+ }
+
+ this.toolTipShow = false
+
+ that.map2D.un('click', that.mapHandlerClick)
+ that.map2D.un('pointermove', that.mapHandlerMove)
+
+ setTimeout(() => {
that.$store.commit('set_closeMapClick', false)
+ }, 500)
+ },
+
+ mapHandlerMove (event) {
+ const that = this
+ that.moveOverlay(event.coordinate)
+ },
+
+ addOverlay (center) {
+ //此处的overlayLayer要是全局变量，其他的函数内要用到
+ overlayLayer = new OlOverlay({
+ element: document.getElementById('overlay'),
+ position: center,
+ positioning: 'center-center',
+ stopEvent: false
})
- that.moves = global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, (e) => {
- if (that.overChouse) {
- return
- }
- // let lnglat = [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat];
- tooltip.showAt(e.windowPosition, title)
- })
+ this.map2D.addOverlay(overlayLayer)
+ },
+
+ moveOverlay (coorC) {
+ if (!overlayLayer) {
+ this.addOverlay(coorC)
+ }
+
+ this.toolTipShow = true
+ this.toolTipText = this.toolTipTitle
+
+ overlayLayer.setPosition(coorC)
},
closeModel () {
@@ -315,23 +307,16 @@
this.pathBoxShow = false
if (CamPusNavLayer.campusRouteLayer != null) {
- CamPusNavLayer.campusRouteLayer.clear()
+ CamPusNavLayer.campusRouteLayer.getSource().clear()
this.isOverRouter = false
}
- // 清除自定义位置
- if (CamPusNavLayer.campusStartLayer != null) {
- CamPusNavLayer.campusStartLayer.clear()
- // CamPusNavLayer.campusStartLayer = null;
- }
- if (CamPusNavLayer.campusEndLayer != null) {
- CamPusNavLayer.campusEndLayer.clear()
- // CamPusNavLayer.campusEndLayer = null;
- }
+
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)
+ that.$store.commit('set_closeMapClick', false)
},
tabClick (param) {
@@ -342,22 +327,10 @@
startNavigation () {
const that = this
- // 清除自定义位置
- if (CamPusNavLayer.campusStartLayer != null) {
- CamPusNavLayer.campusStartLayer.clear()
- // CamPusNavLayer.campusStartLayer = null;
- }
- if (CamPusNavLayer.campusEndLayer != null) {
- CamPusNavLayer.campusEndLayer.clear()
- // CamPusNavLayer.campusEndLayer = null;
- }
+ that.clearLayer('campusRouteLayer', true)
+ that.clearLayer('campusStartLayer')
+ that.clearLayer('campusEndLayer')
- if (CamPusNavLayer.campusRouteLayer == null) {
- CamPusNavLayer.campusRouteLayer = new global.DC.VectorLayer('campusRouteLayer')
- global.viewer.addLayer(CamPusNavLayer.campusRouteLayer)
- } else {
- CamPusNavLayer.campusRouteLayer.clear()
- }
if (this.startingPoint == null) {
this.$message('请输入起点！！！')
}
@@ -365,26 +338,17 @@
this.$message('请输入终点！！！')
}
- // 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])
- ),
- this.publicPath + 'img/navicon/start.png'
- )
- 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])
- ),
- this.publicPath + 'img/navicon/end.png'
- )
- CamPusNavLayer.campusRouteLayer.addOverlay(endEntity)
+ CamPusNavLayer.campusStartLayer.getSource().addFeature(that.getCurItemFeature({
+ lng: this.startingPoint[0],
+ lat: this.startingPoint[1],
+ url: this.publicPath + 'img/navicon/start.png',
+ }))
+
+ CamPusNavLayer.campusEndLayer.getSource().addFeature(that.getCurItemFeature({
+ lng: this.terminus[0],
+ lat: this.terminus[1],
+ url: this.publicPath + 'img/navicon/end.png',
+ }))
var routes = ''
@@ -393,8 +357,9 @@
var endLog = Number(this.terminus[0]).toFixed(6)
var endLat = Number(this.terminus[1]).toFixed(6)
- var origin = global.DC.CoordTransform.WGS84ToGCJ02(startLog, startLat)
- var destination = global.DC.CoordTransform.WGS84ToGCJ02(endLog, endLat)
+ var origin = WGS84ToGCJ02(startLog, startLat)
+ var destination = WGS84ToGCJ02(endLog, endLat)
+
if (this.twoOrThree == '真三维') {
if (this.navigationWay == '步行') {
axios
@@ -586,12 +551,16 @@
}
})
.then((res) => {
- if (res.data.info == 'OVER_DIRECTION_RANGE') {
+ if (res.data.info == 'OVER_DIRECTION_RANGE' || 'error' in res.data) {
this.$message({
message: '超出步行范围！',
type: 'warning',
- duration: 3000
+ duration: 3000,
+ onClose () {
+ that.clearLayer('campusRouteLayer', true)
+ }
})
+
}
this.pathBoxList = []
@@ -605,14 +574,8 @@
routes =
startLog + ',' + startLat + ';' + routes + endLog + ',' + endLat
- const polyline = new global.DC.Polyline(routes)
- polyline.setStyle({
- width: 6,
- material: global.DC.Color.RED,
- clampToGround: true
- })
+ CamPusNavLayer.campusRouteLayer.getSource().addFeature(that.drawPolyline(routes))
- CamPusNavLayer.campusRouteLayer.addOverlay(polyline)
if (this.twoOrThree == '真三维') {
global.viewer.flyTo(CamPusNavLayer.campusRouteLayer)
} else {
@@ -633,22 +596,8 @@
latitude = (endLat - startLat) / 2 + startLat
}
that.isOverRouter = true
- global.viewer.camera.setView({
- // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
- // fromDegrees()方法，将经纬度和高程转换为世界坐标
- destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- longitude,
- latitude,
- 600
- ),
- orientation: {
- // 指向
- heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0
- }
- })
+
+ this.map2D.getView().setCenter([longitude, latitude])
}
})
} else {
@@ -721,11 +670,62 @@
}
},
- clearLayer () {
- if (CamPusNavLayer.campusRouteLayer != null) {
- CamPusNavLayer.campusRouteLayer.clear()
+ getCurItemFeature (params) {
+ const iconFeature = new Feature({
+ geometry: new Point([Number(params.lng), Number(params.lat)]),
+ type: 'navigationPoint'
+ })
+
+ iconFeature.setStyle(new Style({
+ image: new Icon({
+ scale: 1,
+ imgSize: [48, 48],
+ src: params.url,
+ // 设置图标偏移
+ anchor: [24, 44],
+ // X方向单位：分数
+ anchorXUnits: 'pixels',
+ // Y方向单位：像素
+ anchorYUnits: 'pixels',
+ })
+ }))
+
+ return iconFeature
+ },
+
+ drawPolyline (item) {
+ let lineFeature = new Feature({
+ geometry: new LineString(item)
+ })
+
+ let style = new Style({
+ stroke: new Stroke({
+ color: 'red', // 线条颜色，根据需要设置
+ width: 6 // 线条宽度，根据需要设置
+ })
+ })
+
+ // 设置线要素的样式
+ lineFeature.setStyle(style)
+
+ return lineFeature
+ },
+
+ clearLayer (layerName, flag = false) {
+ if (flag) {
this.pathBoxList = []
this.pathBoxShow = false
+ }
+
+ if (CamPusNavLayer[layerName] == null) {
+ CamPusNavLayer[layerName] = new VectorLayer({
+ // 图标图层
+ zIndex: 33,
+ source: new VectorSource(),
+ })
+ this.map2D.addLayer(CamPusNavLayer[layerName])
+ } else {
+ CamPusNavLayer[layerName].getSource().clear()
}
},
@@ -838,4 +838,27 @@
}
</script>
-<style lang="scss" scope></style>
+<style lang="scss" scope>
+#overlay {
+ padding: 0 10px;
+ height: 36px;
+ line-height: 36px;
+ transform: translate(calc(50% + 16px), 0);
+ color: #fff;
+ background: #000;
+ border-radius: 8px;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 0;
+ width: 0;
+ height: 0;
+ border: 8px solid #000;
+ //可以通过改变边框的颜色来控制三角形的方向
+ border-color: transparent #000 transparent transparent;
+ transform: translate(-100%, -50%);
+ }
+}
+</style>
--
Gitblit v1.9.3