【类 型】：feat 地图点击 指点飞行

【原  因】：
【过  程】：
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

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
+      if (this.enableGuided) {
-      this.map.on('mousedown', (event) => {
+        // 长按事件 传longPress到组件外部调用
-        // pc端点击事件
+        let pressTimer = null
-        pressTimer = setTimeout(() => {
+        let isLongPress = false // 标记是否为长按
-          const lonLat = { lon: this.map.unproject(event.point).lng, lat: this.map.unproject(event.point).lat }
+        let startPoint = null // 记录按下时的位置
-          // 将经纬度信息传递到组件外部
+        // pc操作
-          this.$emit('longPress', lonLat)
+        this.map.on('mousedown', (event) => { // 按下鼠标左键
-        }, 1000) // 作为长按的时间阈值
+          startPoint = { x: event.point.x, y: event.point.y } // 记录起始位置
-      })
+          isLongPress = false // 重置标记
-      this.map.on('touchstart', (event) => {
+          pressTimer = setTimeout(() => {
-        // 移动端点击事件
+            isLongPress = true // 设置为长按状态
-        pressTimer = setTimeout(() => {
+          }, 200) // 设置长按延迟时间
-          const lonLat = { lon: this.map.unproject(event.point).lng, lat: this.map.unproject(event.point).lat }
+        })
-          // 将经纬度信息传递到组件外部
+        this.map.on('mouseup', (event) => { // 提起鼠标左键
-          this.$emit('longPress', lonLat)
+          clearTimeout(pressTimer) // 清除定时器
-        }, 1000) // 作为长按的时间阈值
+          const currentPoint = { x: event.point.x, y: event.point.y }
-      })
+          const dx = currentPoint.x - startPoint.x
-      // 松手时点击事件不够 清除定时器模拟长按事件
+          const dy = currentPoint.y - startPoint.y
-      const clearPressTimer = () => {
+          if (Math.sqrt(dx * dx + dy * dy) <= 5 && isLongPress) { // 没有发生拖拽地图
-        clearTimeout(pressTimer)
+            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 飞机经纬高度数组

src/views/layout/components/main/planes/index.vue

@@ -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: 创建飞机图标
      */