From bcffe48c50e36ae4e474207ea8005529b6c27816 Mon Sep 17 00:00:00 2001
From: air <30444667+sszdot@users.noreply.github.com>
Date: Mon, 23 Jun 2025 21:38:47 +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=9Atest=20=E3=80=90=E5=8E=9F=20=20=E5=9B=A0=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A=E6=B5=8B=E8=AF=95=E9=9B=86=E7=BE=A4=20=E9=87=8D?=
 =?UTF-8?q?=E5=BF=83=E7=82=B9=20=E4=B8=AD=E5=BF=83=E7=82=B9=20=E5=8D=95?=
 =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95=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

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

diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue
index 2ed2b08..96e715b 100644
--- a/src/components/MapBox.vue
+++ b/src/components/MapBox.vue
@@ -1089,6 +1089,65 @@ export default {
           this.map.resize()
         }, 200)
       }
+    },
+    drawTestPoints (positions, center) {
+      // 清除旧的图层和数据源（可选）
+      if (this.map.getSource('test-points')) this.map.removeSource('test-points')
+      if (this.map.getLayer('test-points')) this.map.removeLayer('test-points')
+      if (this.map.getSource('center-point')) this.map.removeSource('center-point')
+      if (this.map.getLayer('center-point')) this.map.removeLayer('center-point')
+
+      // 构造蓝色飞机点的 GeoJSON
+      const features = positions.map(pos => ({
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [pos[0], pos[1]]
+        }
+      }))
+
+      this.map.addSource('test-points', {
+        type: 'geojson',
+        data: {
+          type: 'FeatureCollection',
+          features: features
+        }
+      })
+
+      this.map.addLayer({
+        id: 'test-points',
+        type: 'circle',
+        source: 'test-points',
+        paint: {
+          'circle-radius': 6,
+          'circle-color': '#3399ff' // 蓝色
+        }
+      })
+
+      // 添加重心点（红色）
+      this.map.addSource('center-point', {
+        type: 'geojson',
+        data: {
+          type: 'FeatureCollection',
+          features: [{
+            type: 'Feature',
+            geometry: {
+              type: 'Point',
+              coordinates: [center.lon, center.lat]
+            }
+          }]
+        }
+      })
+
+      this.map.addLayer({
+        id: 'center-point',
+        type: 'circle',
+        source: 'center-point',
+        paint: {
+          'circle-radius': 8,
+          'circle-color': '#ff3333' // 红色
+        }
+      })
     }
   },
   beforeDestroy () {
diff --git a/src/views/layout/components/main/home/index.vue b/src/views/layout/components/main/home/index.vue
index 7c54e44..a3ddd24 100644
--- a/src/views/layout/components/main/home/index.vue
+++ b/src/views/layout/components/main/home/index.vue
@@ -68,6 +68,37 @@ export default {
     }
   },
   mounted () {
+    setTimeout(() => {
+      // 中心点（经纬度）
+      const centerLng = 100.0000
+      const centerLat = 40.0000
+
+      // 生成随机点数组（10个点）
+      const testPositions = Array.from({ length: 10 }, () => {
+        const offsetLng = centerLng + (Math.random() - 0.5) * 0.001 // ±0.0005
+        const offsetLat = centerLat + (Math.random() - 0.5) * 0.001
+        const alt = 100 + Math.floor(Math.random() * 100) // 高度 100~200
+        return [offsetLng, offsetLat, alt]
+      })
+
+      // 计算重心点
+      const center = testPositions.reduce((acc, pos) => {
+        acc.lon += pos[0]
+        acc.lat += pos[1]
+        acc.alt += pos[2]
+        return acc
+      }, { lon: 0, lat: 0, alt: 0 })
+
+      const count = testPositions.length
+      const centerPoint = {
+        lon: center.lon / count,
+        lat: center.lat / count,
+        alt: center.alt / count
+      }
+
+      // 调用 mapbox 地图组件的绘图函数
+      this.$refs.mapbox.drawTestPoints(testPositions, centerPoint)
+    }, 3000)
   },
   watch: {
     /**