From d05077e9ed22f41664b407dcc24a5b70ff7bb3c8 Mon Sep 17 00:00:00 2001
From: huangchenhao <123673748@qq.com>
Date: Fri, 28 Nov 2025 09:25:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=BA=E5=8F=AA=E6=9C=89?=
 =?UTF-8?q?=E5=B0=8F=E4=BA=8E50km=E7=9A=84=E5=AE=9E=E4=BD=93=E6=89=8D?=
 =?UTF-8?q?=E4=BC=9A=E8=B7=B3=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../composables/useMapMarkers.js              | 70 +++++++++++++++++--
 .../3DSituationalAwarenessRefactor/index.vue  | 11 ++-
 2 files changed, 74 insertions(+), 7 deletions(-)

diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js
index f925685..2a6322f 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js
@@ -796,7 +796,7 @@ export function useMapMarkers() {
    * @param {number} [options.heightOffset=10] - 相对地面的高度偏移（米）
    * @returns {Promise<void>}
    */
-  const addReserveCenterMarkers = async (viewer, reserveData, options = {}) => {
+  const addReserveCenterMarkers = async (viewer, reserveData, options = {}, disasterCenter = {}) => {
     if (!viewer) {
       console.warn('[useMapMarkers] addReserveCenterMarkers: viewer 为空')
       return
@@ -812,6 +812,7 @@ export function useMapMarkers() {
     }
 
     console.log('[useMapMarkers] 开始添加储备中心和预置点标记...', reserveData.length)
+    console.log('reserverData@@@@@', reserveData)
 
     const entities = []
 
@@ -852,8 +853,29 @@ export function useMapMarkers() {
         // return;
       }
 
+
+
       console.log(`[useMapMarkers] 添加标记: ${item.gl1Yjllmc}, 级别: ${levelString} (${levelName})`)
 
+
+
+      // 3. 计算距离(如果接口未提供)
+
+      let distance = null
+      if (
+        item.gl1Lng !== null &&
+        item.gl1Lat !== null &&
+        typeof disasterCenter?.longitude === 'number' &&
+        typeof disasterCenter?.latitude === 'number'
+      ) {
+        distance = Number(
+          calculateDistance(
+            { longitude: item.gl1Lng, latitude: item.gl1Lat },
+            { longitude: disasterCenter.longitude, latitude: disasterCenter.latitude }
+          ).toFixed(2)
+        )
+      }
+
       const entity = viewer.entities.add({
         position: result.position,
         billboard: {
@@ -871,7 +893,8 @@ export function useMapMarkers() {
           name: item.gl1Yjllmc || `${levelName}应急点`,
           district: item.gl1Qxmc || '-',
           personnelCount: item.gl1Rysl || '0',
-          area: item.gl1Zdmj || '-'
+          area: item.gl1Zdmj || '-',
+          distance: distance || 0,
         }
       })
       entities.push(entity)
@@ -886,6 +909,46 @@ export function useMapMarkers() {
     }
   }
 
+
+  /**
+ * 角度转弧度
+ * @param {number} degrees - 角度值
+ * @returns {number} 弧度值
+ */
+  const toRadians = (degrees) => (degrees * Math.PI) / 180
+
+  /**
+ * 计算两个经纬度点之间的距离(公里)
+ * 使用 Haversine 公式
+ * @param {Object} pointA - { longitude, latitude }
+ * @param {Object} pointB - { longitude, latitude }
+ * @returns {number} 距离(km)
+ */
+  const EARTH_RADIUS_KM = 6371
+  const calculateDistance = (pointA, pointB) => {
+    if (
+      typeof pointA?.longitude !== 'number' ||
+      typeof pointA?.latitude !== 'number' ||
+      typeof pointB?.longitude !== 'number' ||
+      typeof pointB?.latitude !== 'number'
+    ) {
+      console.warn('[useDisasterData] calculateDistance: 坐标参数无效')
+      return 0
+    }
+
+    const lat1 = toRadians(pointA.latitude)
+    const lat2 = toRadians(pointB.latitude)
+    const deltaLat = toRadians(pointB.latitude - pointA.latitude)
+    const deltaLon = toRadians(pointB.longitude - pointA.longitude)
+
+    const a =
+      Math.sin(deltaLat / 2) ** 2 +
+      Math.cos(lat1) * Math.cos(lat2) * Math.sin(deltaLon / 2) ** 2
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+
+    return EARTH_RADIUS_KM * c
+  }
+
   /**
    * 根据API数据添加应急资源标记（养护站）
    * @param {Cesium.Viewer} viewer
@@ -987,12 +1050,11 @@ export function useMapMarkers() {
       return
     }
 
-    // 收集所有需要动画的实体（包含所有类型）
     const allEntities = [
       ...markerEntities.value,
       ...emergencyResourceEntities.value,
       ...reserveCenterEntities.value
-    ].filter(e => e.billboard) // 只需要有billboard的实体
+    ].filter(e => e.billboard && e.properties?.distance?.getValue() <= 50)
 
     console.log('allEntities', allEntities)
 
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
index a37c936..aa944d7 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
@@ -1267,9 +1267,14 @@ const loadReserveCentersAndPresets = async (
       if (mapStore.viewer) {
         console.log("[index.vue] 添加储备中心和预置点地图标记...");
         clearReserveCenterMarkers(mapStore.viewer);
-        await addReserveCenterMarkers(mapStore.viewer, response.data, {
-          heightOffset: 10,
-        });
+        await addReserveCenterMarkers(
+          mapStore.viewer,
+          response.data,
+          {
+            heightOffset: 10,
+          },
+          { longitude, latitude }
+        );
       } else {
         console.warn("[index.vue] 地图viewer未就绪，跳过标记更新");
       }