From 99e7caffd516e775e7f208aaa97580a6e00d2146 Mon Sep 17 00:00:00 2001
From: air <30444667+sszdot@users.noreply.github.com>
Date: Mon, 16 Jun 2025 16:41:03 +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=E5=9C=B0=E5=9B=BE=E7=BB=84=E4=BB=B6=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E4=B8=80=E4=B8=AA=E4=BF=9D=E5=AD=98=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=88=B0=E6=9C=AC=E5=9C=B0=E7=9A=84=E6=8E=A7=E4=BB=B6=20=20?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD=20=E3=80=90=E8=BF=87=20=20=E7=A8=8B?=
 =?UTF-8?q?=E3=80=91=EF=BC=9A=E9=A3=9E=E8=A1=8C=E6=95=B0=E6=8D=AE=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1-=E9=A3=9E=E8=A1=8C=E8=BD=A8=E8=BF=B9=20=E6=8A=8A?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E4=BC=A0=E5=88=B0=E5=9C=B0=E5=9B=BE=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20=20=E6=9C=89=E6=8E=A7=E4=BB=B6=E6=8A=8A=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E4=BF=9D=E5=AD=98=E5=88=B0=E6=9C=AC=E5=9C=B0=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=20=E3=80=90=E5=BD=B1=20=20=E5=93=8D=E3=80=91=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动
---
 src/components/MapBox.vue                     | 20 ++++-
 src/utils/mapboxgl_plugs/index.js             | 73 +++++++++++++++++++
 .../components/main/register/flyData.vue      |  2 +-
 3 files changed, 93 insertions(+), 2 deletions(-)

diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue
index 34329a1..1f18079 100644
--- a/src/components/MapBox.vue
+++ b/src/components/MapBox.vue
@@ -6,7 +6,7 @@
 
 <script>
 import mapboxgl from 'mapbox-gl'
-import { MapboxStyleSwitcherControl, FollowControl, CustomFullscreenControl, NoFlyControl } from '@/utils/mapboxgl_plugs'
+import { MapboxStyleSwitcherControl, FollowControl, CustomFullscreenControl, NoFlyControl, SaveToFileControl } from '@/utils/mapboxgl_plugs'
 import planeIcon from '@/assets/svg/plane.svg'
 
 export default {
@@ -160,6 +160,14 @@ export default {
       type: Boolean,
       default: false
     },
+    enableSaveToFile: { // 开启 保存数据到文件 组件
+      type: Boolean,
+      default: false
+    },
+    getData: { // 从父级 获取数据
+      type: Function,
+      default: null
+    },
     enableNofly: { // 禁飞区 设置 组件
       type: Boolean,
       default: false
@@ -321,6 +329,16 @@ export default {
         }), 'top-right')
       }
 
+      // 保存数据到文件 控件 用于:1.保存历史飞行航线轨迹
+      if (this.enableSaveToFile && typeof this.getData === 'function') {
+        this.map.addControl(new SaveToFileControl({
+          Data: this.getData,
+          filename: `export_${Date.now()}.json`,
+          title: '保存当前数据',
+          icon: '💾'
+        }), 'top-left')
+      }
+
       // 禁飞区 设置组件
       if (this.enableNofly) {
         const defaultPolygons = [
diff --git a/src/utils/mapboxgl_plugs/index.js b/src/utils/mapboxgl_plugs/index.js
index 88c66d7..31e07e6 100644
--- a/src/utils/mapboxgl_plugs/index.js
+++ b/src/utils/mapboxgl_plugs/index.js
@@ -368,3 +368,76 @@ export class NoFlyControl {
     this._onSave(polygons)
   }
 }
+
+// 保存数据到文件控件
+export class SaveToFileControl {
+  constructor (options = {}) {
+    // 获取数据的方法，必须是一个函数，返回要保存的数据数组
+    this.getData = options.Data || (() => [])
+
+    // 保存时的默认文件名，可以通过传参自定义
+    this.filename = options.filename || `data_${Date.now()}.json`
+
+    // 按钮悬停时显示的提示文本
+    this.title = options.title || '保存数据'
+
+    // 按钮图标，可以是 emoji 或 HTML 字符
+    this.icon = options.icon || '💾'
+  }
+
+  // Mapbox 会调用该方法，将控件添加到地图上
+  onAdd (map) {
+    this._map = map
+
+    // 创建控件容器 div
+    this._container = document.createElement('div')
+    this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
+
+    // 创建按钮元素
+    const button = document.createElement('button')
+    button.className = 'mapboxgl-ctrl-icon'
+    button.type = 'button'
+    button.innerHTML = this.icon // 设置图标
+    button.title = this.title // 设置悬浮提示
+    button.onclick = () => this._saveToFile() // 点击事件处理：执行保存
+
+    // 将按钮添加到控件容器中
+    this._container.appendChild(button)
+
+    // 返回控件 DOM 元素，Mapbox 会将其插入地图
+    return this._container
+  }
+
+  // 保存数据为 JSON 文件的核心方法
+  _saveToFile () {
+    const data = this.getData() // 调用传入的 getData 方法获取数据
+
+    // 若数据为空，则提示并返回
+    if (!data || data.length === 0) {
+      alert('数据为空')
+      return
+    }
+
+    // 将数据序列化为 JSON 字符串（格式化缩进）
+    const content = JSON.stringify(data, null, 2)
+
+    // 创建一个 Blob 对象，用于生成文件下载链接
+    const blob = new Blob([content], { type: 'application/json' })
+
+    // 创建一个临时链接元素用于触发浏览器下载
+    const link = document.createElement('a')
+    link.href = URL.createObjectURL(blob) // 生成临时 URL
+    link.download = this.filename // 设置下载文件名
+    link.click() // 触发下载
+    URL.revokeObjectURL(link.href) // 释放临时 URL
+  }
+
+  // Mapbox 会调用该方法移除控件
+  onRemove () {
+    // 从地图中移除 DOM 元素
+    this._container.parentNode.removeChild(this._container)
+
+    // 清除对 map 实例的引用，防止内存泄漏
+    this._map = null
+  }
+}
diff --git a/src/views/layout/components/main/register/flyData.vue b/src/views/layout/components/main/register/flyData.vue
index 66e16a0..bf0a19c 100644
--- a/src/views/layout/components/main/register/flyData.vue
+++ b/src/views/layout/components/main/register/flyData.vue
@@ -13,7 +13,7 @@
 
       <div class="chart-area" v-if="flyDataList.length">
         <div v-if="boxShow" id="main" class="chart-container"></div>
-        <map-box v-else ref="mapbox" @map-ready="onMapReady"/>
+        <map-box v-else ref="mapbox" @map-ready="onMapReady" :enableSaveToFile="true" :getData="() => flyDataList"/>
       </div>
       <div v-else class="no-data-tip">暂无数据</div>
     </div>