diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue index ae3705a..9aa830a 100644 --- a/src/components/MapBox.vue +++ b/src/components/MapBox.vue @@ -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 }) }) - // 长按事件 传longPress到组件外部调用 - let pressTimer - this.map.on('mousedown', (event) => { - // pc端点击事件 - pressTimer = setTimeout(() => { - const lonLat = { lon: this.map.unproject(event.point).lng, lat: this.map.unproject(event.point).lat } - // 将经纬度信息传递到组件外部 - this.$emit('longPress', lonLat) - }, 1000) // 作为长按的时间阈值 - }) - 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) + // 判断地图开启了点飞功能 + if (this.enableGuided) { + // 长按事件 传longPress到组件外部调用 + 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(() => { + 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('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 飞机经纬高度数组 diff --git a/src/views/layout/components/main/planes/index.vue b/src/views/layout/components/main/planes/index.vue index 2e318b0..b1a8cb6 100644 --- a/src/views/layout/components/main/planes/index.vue +++ b/src/views/layout/components/main/planes/index.vue @@ -1,12 +1,31 @@ @@ -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: 创建飞机图标 */