From e575d42358521a55549e869ab4baf4902e339481 Mon Sep 17 00:00:00 2001
From: air <30444667+sszdot@users.noreply.github.com>
Date: Sat, 14 Jun 2025 21:42:02 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=20=20=E5=9E=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9Afeat=20=E3=80=90=E5=8E=9F=20=20=E5=9B=A0=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A=E9=A3=9E=E8=A1=8C=E6=95=B0=E6=8D=AE=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=20=E6=B7=BB=E5=8A=A0=E5=9C=B0=E5=9B=BE=E7=BB=84=E4=BB=B6=20?=
 =?UTF-8?q?=E8=A7=84=E5=88=92=E8=B7=AF=E5=BE=84=20=20=E6=9C=AA=E5=AE=8C?=
 =?UTF-8?q?=E5=BE=85=E7=BB=AD=E5=90=83=20=E3=80=90=E8=BF=87=20=20=E7=A8=8B?=
 =?UTF-8?q?=E3=80=91=EF=BC=9A=20=E3=80=90=E5=BD=B1=20=20=E5=93=8D=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MapBox.vue                     | 43 ++++++++++++++
 .../components/main/register/flyData.vue      | 58 ++++++++++++++++---
 src/views/layout/index.vue                    |  1 -
 3 files changed, 92 insertions(+), 10 deletions(-)

diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue
index 9ce0d83..e3ea6b4 100644
--- a/src/components/MapBox.vue
+++ b/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 飞机经纬高度数组
diff --git a/src/views/layout/components/main/register/flyData.vue b/src/views/layout/components/main/register/flyData.vue
index 258da0e..756c6be 100644
--- a/src/views/layout/components/main/register/flyData.vue
+++ b/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)
       }
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 790bf2c..65f53ae 100644
--- a/src/views/layout/index.vue
+++ b/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