【类 型】：feat

【原  因】：飞行数据统计 添加地图组件 规划路径  未完待续吃
【过  程】：
【影  响】：

src/components/MapBox.vue

@@ -625,6 +625,49 @@ export default {
         this.guidedMarker = null // 清除当前标记
       }
     },
+    /**
+   * @description 简单画线（飞机轨迹），忽略高度，仅绘制经纬度路径
+   * @param {Array} coordinatesArray - 坐标数组，每项为 [lng, lat, alt]
+   */
+    drawSimplePath (coordinatesArray) {
+      const coords2D = coordinatesArray.map(coord => [coord[0], coord[1]])
+
+      const geojson = {
+        type: 'Feature',
+        geometry: {
+          type: 'LineString',
+          coordinates: coords2D
+        }
+      }
+
+      // 如果已有旧图层，先移除（防止报错）
+      if (this.map.getLayer('path')) {
+        this.map.removeLayer('path')
+      }
+      if (this.map.getSource('path')) {
+        this.map.removeSource('path')
+      }
+
+      // 添加 source 和 layer
+      this.map.addSource('path', {
+        type: 'geojson',
+        data: geojson
+      })
+
+      this.map.addLayer({
+        id: 'path',
+        type: 'line',
+        source: 'path',
+        layout: {
+          'line-cap': 'round',
+          'line-join': 'round'
+        },
+        paint: {
+          'line-color': 'blue',
+          'line-width': 3
+        }
+      })
+    },
     /**
      * @description: 创建飞机轨迹 ps:原理删除之前的轨迹 重新绘制
      * @param {arr} coordinatesArray 飞机经纬高度数组

src/views/layout/components/main/register/flyData.vue

@@ -7,19 +7,22 @@
           <el-radio-button label="飞行时长"></el-radio-button>
           <el-radio-button label="飞行距离"></el-radio-button>
           <el-radio-button label="消耗电量"></el-radio-button>
+          <el-radio-button label="飞行轨迹"></el-radio-button>
         </el-radio-group>
       </div>
 
-      <div class="chart-area">
-        <div v-if="flyDataList.length" id="main" class="chart-container"></div>
-        <div v-else class="no-data-tip">暂无数据</div>
+      <div class="chart-area" v-if="flyDataList.length">
+        <div v-if="boxShow" id="main" class="chart-container"></div>
+        <map-box v-else ref="mapbox" />
       </div>
+      <div v-else class="no-data-tip">暂无数据</div>
     </div>
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
+import MapBox from '@/components/MapBox'
 import { getFlyData } from '@/utils/api/table'
 import DateRangePicker from '@/components/DateRangePicker'
 
@@ -36,11 +39,13 @@ export default {
       flyDataList: [],
       selectedPlaneIdArr: this.$store.state.app.toFlyDataIdArr,
       dateRange: [start, end],
-      radioClass: '飞行时长'
+      radioClass: '飞行时长',
+      boxShow: true
     }
   },
   components: {
-    DateRangePicker
+    DateRangePicker,
+    MapBox
   },
   computed: {
     source () {
@@ -145,10 +150,10 @@ export default {
     }
   },
   created () {
-    this.loadFlyData()
   },
   watch: {
     flyDataList (newVal) {
+      // 图标销毁 和 初始化
       if (!newVal.length && this.myChart) {
         this.myChart.dispose()
         this.myChart = null
@@ -157,6 +162,19 @@ export default {
           this.initChart()
         })
       }
+      // 多个飞机轨迹全部绘制
+      if (!this.boxShow && newVal.length) {
+        this.$nextTick(() => {
+          this.drawAllPathsOnMap()
+        })
+      }
+    },
+    boxShow (newVal) {
+      if (!newVal) { // boxShow 为 false，显示地图时重新绘制轨迹
+        this.$nextTick(() => {
+          this.drawAllPathsOnMap()
+        })
+      }
     },
     dateRange: {
       handler () {
@@ -169,11 +187,34 @@ export default {
         this.initChart()
       }
     },
-    radioClass () {
-      this.initChart()
+    radioClass (val) {
+      if (val === '飞行轨迹') {
+        this.boxShow = false
+      } else {
+        this.boxShow = true
+        this.$nextTick(() => {
+          this.initChart()
+        })
+      }
     }
   },
   methods: {
+    // 地图轨迹绘制
+    drawAllPathsOnMap () {
+      if (!this.$refs.mapbox) return
+      if (!this.flyDataList.length) return
+
+      // 清理旧轨迹（如果你的mapbox组件支持）
+      this.$refs.mapbox.clearPaths && this.$refs.mapbox.clearPaths()
+
+      this.flyDataList.forEach(item => {
+        if (item.gps_path) {
+          const pathArray = JSON.parse(item.gps_path)
+          this.$refs.mapbox.createPathWithArray(pathArray)
+        }
+      })
+    },
+    // 获取飞行数据
     async loadFlyData () {
       if (this.selectedPlaneIdArr.length === 0) {
         this.$router.push('/register/index')
@@ -191,7 +232,6 @@ export default {
       const res = await getFlyData(this.selectedPlaneIdArr, startTimestamp, endTimestamp)
       if (res.data.status === 1) {
         this.flyDataList = res.data.dataList
-        console.log('飞行数据列表:', this.flyDataList)
       } else {
         this.$message.error(res.data.msg)
       }

src/views/layout/index.vue

@@ -136,7 +136,6 @@ export default {
               // 更新mqtt信息 选择性更新状态
               for (const key in jsonData) {
                 if (key === 'heartBeat') {
-                  console.log('接收到心跳信息', plane)
                   // 每次接收到心跳时，更新随机数以触发 watch 监听
                   plane.planeState.heartRandom = Math.random()
                   plane.planeState.heartBeat = jsonData.heartBeat