【类 型】：feat 地图点击 指点飞行
【原 因】： 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
tk
parent
35d983454a
commit
bfe0a6ae3c
@ -135,6 +135,10 @@ export default {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
enableGuided: { // 是否开启 飞机点飞功能
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
enableFollow: { // 开启跟随组件
|
||||
type: Boolean,
|
||||
default: false
|
||||
@ -205,30 +209,57 @@ export default {
|
||||
// this.map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 })
|
||||
})
|
||||
|
||||
// 判断地图开启了点飞功能
|
||||
if (this.enableGuided) {
|
||||
// 长按事件 传longPress到组件外部调用
|
||||
let pressTimer
|
||||
this.map.on('mousedown', (event) => {
|
||||
// pc端点击事件
|
||||
let pressTimer = null
|
||||
let isLongPress = false // 标记是否为长按
|
||||
let startPoint = null // 记录按下时的位置
|
||||
// pc操作
|
||||
this.map.on('mousedown', (event) => { // 按下鼠标左键
|
||||
startPoint = { x: event.point.x, y: event.point.y } // 记录起始位置
|
||||
isLongPress = false // 重置标记
|
||||
pressTimer = setTimeout(() => {
|
||||
const lonLat = { lon: this.map.unproject(event.point).lng, lat: this.map.unproject(event.point).lat }
|
||||
// 将经纬度信息传递到组件外部
|
||||
this.$emit('longPress', lonLat)
|
||||
}, 1000) // 作为长按的时间阈值
|
||||
isLongPress = true // 设置为长按状态
|
||||
}, 200) // 设置长按延迟时间
|
||||
})
|
||||
this.map.on('mouseup', (event) => { // 提起鼠标左键
|
||||
clearTimeout(pressTimer) // 清除定时器
|
||||
const currentPoint = { x: event.point.x, y: event.point.y }
|
||||
const dx = currentPoint.x - startPoint.x
|
||||
const dy = currentPoint.y - startPoint.y
|
||||
if (Math.sqrt(dx * dx + dy * dy) <= 5 && isLongPress) { // 没有发生拖拽地图
|
||||
const lonLat = {
|
||||
lon: this.map.unproject(currentPoint).lng,
|
||||
lat: this.map.unproject(currentPoint).lat
|
||||
}
|
||||
this.$emit('longPress', lonLat) // 将经纬度信息传递到组件外部
|
||||
this.makeGuidedMarker(lonLat, this.map) // 创建标记
|
||||
}
|
||||
})
|
||||
// 触摸屏操作
|
||||
this.map.on('touchstart', (event) => { // 按下鼠标左键
|
||||
clearTimeout(pressTimer) // 清除定时器
|
||||
startPoint = { x: event.point.x, y: event.point.y } // 记录起始位置
|
||||
isLongPress = false // 重置标记
|
||||
pressTimer = setTimeout(() => {
|
||||
isLongPress = true // 设置为长按状态
|
||||
}, 200) // 设置长按延迟时间
|
||||
})
|
||||
this.map.on('touchend', (event) => { // 提起鼠标左键
|
||||
const currentPoint = { x: event.point.x, y: event.point.y }
|
||||
const dx = currentPoint.x - startPoint.x
|
||||
const dy = currentPoint.y - startPoint.y
|
||||
if (Math.sqrt(dx * dx + dy * dy) <= 5 && isLongPress) { // 没有发生拖拽地图
|
||||
const lonLat = {
|
||||
lon: this.map.unproject(currentPoint).lng,
|
||||
lat: this.map.unproject(currentPoint).lat
|
||||
}
|
||||
this.$emit('longPress', lonLat) // 将经纬度信息传递到组件外部
|
||||
this.makeGuidedMarker(lonLat, this.map) // 创建标记
|
||||
}
|
||||
})
|
||||
this.map.on('touchstart', (event) => {
|
||||
// 移动端点击事件
|
||||
pressTimer = setTimeout(() => {
|
||||
const lonLat = { lon: this.map.unproject(event.point).lng, lat: this.map.unproject(event.point).lat }
|
||||
// 将经纬度信息传递到组件外部
|
||||
this.$emit('longPress', lonLat)
|
||||
}, 1000) // 作为长按的时间阈值
|
||||
})
|
||||
// 松手时点击事件不够 清除定时器模拟长按事件
|
||||
const clearPressTimer = () => {
|
||||
clearTimeout(pressTimer)
|
||||
}
|
||||
this.map.on('mouseup', clearPressTimer)
|
||||
this.map.on('touchend', clearPressTimer)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
@ -525,6 +556,24 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @abstract 创建指点飞行标记
|
||||
* @param {Array} lonLat - 经纬度数组，格式为 [longitude, latitude]
|
||||
* @param {Object} map - mapboxgl 的地图实例
|
||||
*/
|
||||
makeGuidedMarker (lonLat, map) {
|
||||
// 删除之前的所有标记
|
||||
if (this.guidedMarker) {
|
||||
this.guidedMarker.remove()
|
||||
this.guidedMarker = null // 清除当前标记
|
||||
}
|
||||
// 创建一个标记对象
|
||||
this.guidedMarker = new mapboxgl.Marker({
|
||||
draggable: false// 关闭拖拽
|
||||
})
|
||||
.setLngLat(lonLat)
|
||||
.addTo(map)
|
||||
},
|
||||
/**
|
||||
* @description: 创建飞机轨迹 ps:原理删除之前的轨迹 重新绘制
|
||||
* @param {arr} coordinatesArray 飞机经纬高度数组
|
||||
|
||||
@ -1,12 +1,31 @@
|
||||
<template>
|
||||
<div class="h-100">
|
||||
<map-box ref="mapbox" :enableFollow="true" :enblueScale="!$store.state.app.isWideScreen">
|
||||
<!-- 地图组件 -->
|
||||
<map-box ref="mapbox" :enableGuided="true" :enableFollow="true" :enblueScale="!$store.state.app.isWideScreen"
|
||||
@longPress="handleLongPress">
|
||||
<template #content>
|
||||
<BatteryStatus :plane="plane" />
|
||||
<PlaneStatus :plane="plane" />
|
||||
<ControllerTabs :plane="plane" @mapXOffset="mapXOffset" @makeRoute="makeRoute" @clearRoute="clearRoute" />
|
||||
</template>
|
||||
</map-box>
|
||||
<!-- 弹出框 -->
|
||||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="320px" top="30vh" @close="closeCallback"
|
||||
@open="openCallback">
|
||||
<!-- 点飞设置弹出框 -->
|
||||
<template v-if="dialogItem == 'guidedBox'">
|
||||
<template>
|
||||
<font>高度设置</font>
|
||||
<el-input-number v-model="guidedAlt" label="高度设置"></el-input-number>
|
||||
<font class="m-l-5">米</font>
|
||||
</template>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button size="medium" @click="dialogVisible = false">关闭</el-button>
|
||||
<el-button size="medium" type="primary"
|
||||
@click="publishFun(`{guidedMode:{lon:${guidedLonLat.lon},lat:${guidedLonLat.lat},alt:${guidedAlt}}`);">飞至</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -20,6 +39,11 @@ export default {
|
||||
name: 'Planes',
|
||||
data () {
|
||||
return {
|
||||
dialogTitle: '', // 弹出框 标题
|
||||
dialogItem: '', // 弹出框 项目类型判断
|
||||
dialogVisible: false, // 弹出框 显隐
|
||||
guidedLonLat: {}, // 点飞 的经纬度
|
||||
guidedAlt: '', // 点飞的高度
|
||||
mapBoxKey: '', // 初始化一个变量用于控制map-box组件的重新渲染
|
||||
planesId: this.$route.params.id,
|
||||
localCount: 0 // 本地存储计数器
|
||||
@ -57,6 +81,23 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 弹出框 关闭事件回调 */
|
||||
closeCallback () {
|
||||
this.dialogVisible = false
|
||||
this.dialogItem = ''
|
||||
},
|
||||
/** 弹出框 打开事件回调 */
|
||||
openCallback () {
|
||||
},
|
||||
// 地图长按事件 记录地图经纬度
|
||||
handleLongPress (lonLat) {
|
||||
this.dialogTitle = '点飞'
|
||||
this.dialogVisible = true
|
||||
this.dialogItem = 'guidedBox'
|
||||
this.guidedLonLat = lonLat // 设置点击的经纬度
|
||||
const posLen = this.plane.planeState.position.length
|
||||
this.guidedAlt = this.plane.planeState.position[posLen - 1][2]// 取出 点击时飞机的高度
|
||||
},
|
||||
/**
|
||||
* @description: 创建飞机图标
|
||||
*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user