From 99b5aeb0427ee78e5489a79623a50c47ee074254 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Tue, 1 Apr 2025 16:20:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E5=9C=B0=E9=9D=A2?=
 =?UTF-8?q?=E7=AB=99=E7=AE=A1=E7=90=86=E9=80=BB=E8=BE=91=EF=BC=8C=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=20GroundStationState=20=E6=8E=A5=E5=8F=A3=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6=E9=97=B4=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E4=BC=A0=E9=80=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../h-cesium-viewer/h-cesium-viewer-class.ts  |  8 +-
 src/components/h-cesium-viewer/index.vue      | 74 +++++--------------
 src/components/h-cesium-viewer/types.ts       | 12 +++
 .../h-cesium-viewer/useHCesiumViewerCls.ts    | 24 ++++++
 .../useHCesiumViewerClsGroundStation.ts       | 65 ++++++++++++++++
 src/pages/cesium-viewer.page.vue              | 58 ++++++++-------
 6 files changed, 151 insertions(+), 90 deletions(-)
 create mode 100644 src/components/h-cesium-viewer/types.ts
 create mode 100644 src/components/h-cesium-viewer/useHCesiumViewerCls.ts
 create mode 100644 src/components/h-cesium-viewer/useHCesiumViewerClsGroundStation.ts

diff --git a/src/components/h-cesium-viewer/h-cesium-viewer-class.ts b/src/components/h-cesium-viewer/h-cesium-viewer-class.ts
index ee48430..2b38d38 100644
--- a/src/components/h-cesium-viewer/h-cesium-viewer-class.ts
+++ b/src/components/h-cesium-viewer/h-cesium-viewer-class.ts
@@ -33,7 +33,7 @@ export class HCesiumViewerCls {
    */
   addGroundStation(options: GroundStationOptions): Cesium.Entity | null {
     if (!this.viewer) {
-      console.error('视图未初始化。无法添加地面站。'); // 使用 console.error 替代抛出错误，以便在 index.vue 中处理
+      console.error('视图未初始化。无法添加地面站。');
       return null;
     }
 
@@ -101,13 +101,8 @@ export class HCesiumViewerCls {
     }
   }
 
-  // 移除 highlightStation 和 unhighlightStation 方法
-
   clearAllGroundStations() {
-    // ... (清理逻辑不变)
     if (!this.viewer) return;
-    // 优化：直接遍历 Map 清理，避免重复查找
-    // 使用 for...of 循环替代 forEach
     for (const entity of this.currentStationEntities.values()) {
       this.viewer?.entities.remove(entity);
     }
@@ -115,7 +110,6 @@ export class HCesiumViewerCls {
   }
 
   destroy() {
-    // ... (销毁逻辑不变)
     if (this.viewer) {
       this.clearAllGroundStations();
       this.viewer.destroy();
diff --git a/src/components/h-cesium-viewer/index.vue b/src/components/h-cesium-viewer/index.vue
index 7527358..59fff2d 100644
--- a/src/components/h-cesium-viewer/index.vue
+++ b/src/components/h-cesium-viewer/index.vue
@@ -1,62 +1,28 @@
 <script setup lang="ts">
 import 'cesium/Build/Cesium/Widgets/widgets.css';
 
-import { type GroundStationOptions, HCesiumViewerCls } from './h-cesium-viewer-class';
+// GroundStationOptions 不再直接使用，已在 types.ts 中被 GroundStationState 引用
+import type { GroundStationState } from './types'; // 从 types.ts 导入
+
+import { useHCesiumViewerCls } from './useHCesiumViewerCls';
+import { useHCesiumViewerClsGroundStation } from './useHCesiumViewerClsGroundStation';
+
+// GroundStationState 接口已移至 types.ts
 
 const props = defineProps<{
-  groundStationList?: Array<GroundStationOptions>;
-  selectedStationIds?: string[];
+  groundStationState?: GroundStationState;
 }>();
 
-const hCesiumViewerInst = new HCesiumViewerCls();
-if ($__DEV__) Object.assign(globalThis, { hCesiumViewerInst });
+// 1. 管理 Cesium Viewer 实例生命周期
+const { hCesiumViewerInst } = useHCesiumViewerCls('cesiumContainer');
 
-// 创建一个从 ID 到站点选项的映射，方便查找
-const stationMap = computed(() => {
-  const map = new Map<string, GroundStationOptions>();
-  // 使用 for...of 循环替代 forEach
-  for (const station of props.groundStationList ?? []) {
-    map.set(station.id, station);
-  }
-  return map;
-}); // <-- 修正：添加了缺失的 );
-
-onMounted(() => {
-  hCesiumViewerInst.initCesiumViewer('cesiumContainer');
-
-  // watchEffect: 同步 selectedStationIds 到 Cesium 实体
-  // 这个 effect 现在负责添加和移除实体
-  watchEffect(() => {
-    const selectedIdsSet = new Set(props.selectedStationIds ?? []); // 需要显示的站点 ID
-    const currentEntityIds = new Set(hCesiumViewerInst.currentStationEntities.keys()); // 当前已显示的站点 ID
-
-    // 1. 移除不再选中的站点
-    for (const entityId of currentEntityIds) {
-      if (!selectedIdsSet.has(entityId)) {
-        // 如果当前显示的实体不在新的选中列表里，则移除
-        hCesiumViewerInst.removeGroundStationById(entityId);
-      }
-    }
-
-    // 2. 添加新增的选中站点
-    for (const selectedId of selectedIdsSet) {
-      if (!currentEntityIds.has(selectedId)) {
-        // 如果选中的 ID 对应的实体当前未显示，则添加
-        const stationToAdd = stationMap.value.get(selectedId); // 从映射中查找站点信息
-        if (stationToAdd) {
-          hCesiumViewerInst.addGroundStation(stationToAdd);
-        } else {
-          // 如果在 groundStationList 中找不到对应的站点信息，发出警告
-          console.warn(`无法找到 ID 为 "${selectedId}" 的站点信息，无法添加到地图。`);
-        }
-      }
-    }
-  });
-});
-
-onBeforeUnmount(() => {
-  hCesiumViewerInst.destroy();
-});
+// 2. 同步地面站实体
+// 将实例的 getter 和 props 的 getter 传递给组合函数
+useHCesiumViewerClsGroundStation(
+  () => hCesiumViewerInst, // 传递 getter 以处理实例可能为 null 的情况
+  () => props.groundStationState?.groundStations, // 从新的 prop 中获取列表
+  () => props.groundStationState?.selectedIds, // 从新的 prop 中获取选中 ID
+);
 </script>
 
 <template>
@@ -70,10 +36,4 @@ onBeforeUnmount(() => {
   min-height: 300px;
   background-color: #000;
 }
-:deep(.cesium-widget),
-:deep(.cesium-widget canvas) {
-  width: 100%;
-  height: 100%;
-  touch-action: none;
-}
 </style>
diff --git a/src/components/h-cesium-viewer/types.ts b/src/components/h-cesium-viewer/types.ts
new file mode 100644
index 0000000..73831fe
--- /dev/null
+++ b/src/components/h-cesium-viewer/types.ts
@@ -0,0 +1,12 @@
+import type { GroundStationOptions } from './h-cesium-viewer-class';
+
+/**
+ * 地面站状态接口
+ * 包含地面站列表和当前选中的地面站 ID 列表
+ */
+export interface GroundStationState {
+  /** 地面站配置数组 */
+  groundStations: GroundStationOptions[];
+  /** 选中的地面站 ID 数组 */
+  selectedIds: string[];
+}
diff --git a/src/components/h-cesium-viewer/useHCesiumViewerCls.ts b/src/components/h-cesium-viewer/useHCesiumViewerCls.ts
new file mode 100644
index 0000000..16a4e90
--- /dev/null
+++ b/src/components/h-cesium-viewer/useHCesiumViewerCls.ts
@@ -0,0 +1,24 @@
+// src/utils/useHCesiumViewerCls.ts
+import { HCesiumViewerCls } from '@/components/h-cesium-viewer/h-cesium-viewer-class';
+
+/**
+ * 管理 HCesiumViewerCls 实例的生命周期。
+ * @param containerId - Cesium Viewer 容器的 DOM ID。
+ * @returns 返回 HCesiumViewerCls 实例。
+ */
+export function useHCesiumViewerCls(containerId: string) {
+  const hCesiumViewerInst = new HCesiumViewerCls();
+  if ($__DEV__) Object.assign(globalThis, { hCesiumViewerInst }); // 仅在开发模式下暴露到全局
+
+  onMounted(() => {
+    hCesiumViewerInst.initCesiumViewer(containerId);
+  });
+
+  onBeforeUnmount(() => {
+    hCesiumViewerInst.destroy();
+  });
+
+  return {
+    hCesiumViewerInst,
+  };
+}
diff --git a/src/components/h-cesium-viewer/useHCesiumViewerClsGroundStation.ts b/src/components/h-cesium-viewer/useHCesiumViewerClsGroundStation.ts
new file mode 100644
index 0000000..e9a2468
--- /dev/null
+++ b/src/components/h-cesium-viewer/useHCesiumViewerClsGroundStation.ts
@@ -0,0 +1,65 @@
+// src/utils/useHCesiumViewerClsGroundStation.ts
+import type { GroundStationOptions, HCesiumViewerCls } from '@/components/h-cesium-viewer/h-cesium-viewer-class';
+import type { MaybeRefOrGetter } from 'vue';
+
+/**
+ * 管理 Cesium Viewer 中的地面站实体，根据选中的 ID 列表进行同步。
+ * @param hCesiumViewerInst - HCesiumViewerCls 实例或其 getter。
+ * @param groundStationList - 包含所有可用地面站选项的数组或 getter。
+ * @param selectedStationIds - 包含当前选中地面站 ID 的数组或 getter。
+ */
+export function useHCesiumViewerClsGroundStation(
+  hCesiumViewerInst: MaybeRefOrGetter<HCesiumViewerCls | null>,
+  groundStationList: MaybeRefOrGetter<Array<GroundStationOptions> | undefined>,
+  selectedStationIds: MaybeRefOrGetter<string[] | undefined>,
+) {
+  // 创建一个从 ID 到站点选项的映射，方便查找
+  const stationMap = computed(() => {
+    const map = new Map<string, GroundStationOptions>();
+    const list = toValue(groundStationList) ?? [];
+    for (const station of list) {
+      map.set(station.id, station);
+    }
+    return map;
+  });
+
+  // watchEffect: 同步 selectedStationIds 到 Cesium 实体
+  watchEffect(() => {
+    const viewerInstance = toValue(hCesiumViewerInst);
+    if (!viewerInstance) {
+      // 如果 viewer 实例尚未初始化或已销毁，则不执行任何操作
+      return;
+    }
+
+    const selectedIds = toValue(selectedStationIds) ?? [];
+    const selectedIdsSet = new Set(selectedIds); // 需要显示的站点 ID
+    const currentEntityIds = new Set(viewerInstance.currentStationEntities.keys()); // 当前已显示的站点 ID
+
+    // 1. 移除不再选中的站点
+    for (const entityId of currentEntityIds) {
+      if (!selectedIdsSet.has(entityId)) {
+        // 如果当前显示的实体不在新的选中列表里，则移除
+        viewerInstance.removeGroundStationById(entityId);
+      }
+    }
+
+    // 2. 添加新增的选中站点
+    for (const selectedId of selectedIdsSet) {
+      if (!currentEntityIds.has(selectedId)) {
+        // 如果选中的 ID 对应的实体当前未显示，则添加
+        const stationToAdd = stationMap.value.get(selectedId); // 从映射中查找站点信息
+        if (stationToAdd) {
+          viewerInstance.addGroundStation(stationToAdd);
+        } else {
+          // 如果在 groundStationList 中找不到对应的站点信息，发出警告
+          consola.warn(`无法找到 ID 为 "${selectedId}" 的站点信息，无法添加到地图。`);
+        }
+      }
+    }
+  });
+
+  // 返回 stationMap 可能在某些场景下有用，例如调试或扩展
+  return {
+    stationMap, // 可以考虑是否真的需要返回这个
+  };
+}
diff --git a/src/pages/cesium-viewer.page.vue b/src/pages/cesium-viewer.page.vue
index 78d8ac9..d9f8583 100644
--- a/src/pages/cesium-viewer.page.vue
+++ b/src/pages/cesium-viewer.page.vue
@@ -4,21 +4,23 @@ meta:
 </route>
 
 <script setup lang="ts">
-import type { GroundStationOptions } from '@/components/h-cesium-viewer/h-cesium-viewer-class';
+// GroundStationOptions 不再直接使用，已在 types.ts 中被 GroundStationState 引用
+import type { GroundStationState } from '@/components/h-cesium-viewer/types'; // 导入共享的接口
 
-// 定义地面站列表的响应式引用
-const groundStations = ref<GroundStationOptions[]>([
-  { height: 50, id: 'gs-bj', latitude: 39.9042, longitude: 116.4074, name: '北京站' },
-  { height: 10, id: 'gs-sh', latitude: 31.2304, longitude: 121.4737, name: '上海站' },
-  { height: 20, id: 'gs-gz', latitude: 23.1291, longitude: 113.2644, name: '广州站' },
-]);
-
-// 新增：定义选中站点 ID 的响应式引用
-const selectedIds = ref<string[]>([]);
+// 使用 reactive 管理地面站和选中状态
+const groundStationState = reactive<GroundStationState>({
+  // 使用导入的接口
+  groundStations: [
+    { height: 50, id: 'gs-bj', latitude: 39.9042, longitude: 116.4074, name: '北京站' },
+    { height: 10, id: 'gs-sh', latitude: 31.2304, longitude: 121.4737, name: '上海站' },
+    { height: 20, id: 'gs-gz', latitude: 23.1291, longitude: 113.2644, name: '广州站' },
+  ],
+  selectedIds: [],
+});
 
 // 计算 Checkbox Group 的 options
 const stationOptions = computed(() =>
-  groundStations.value.map((station) => ({ label: station.name, value: station.id })),
+  groundStationState.groundStations.map((station) => ({ label: station.name, value: station.id })),
 );
 
 // 添加一个随机站点
@@ -27,33 +29,33 @@ const addRandomStation = () => {
   const randomLon = Math.random() * 360 - 180; // -180 to 180
   const randomLat = Math.random() * 180 - 90; // -90 to 90
   const randomHeight = Math.random() * 1000; // 0 to 1000 meters
-  groundStations.value.push({
+  groundStationState.groundStations.push({
     height: randomHeight,
     id: randomId,
     latitude: randomLat,
     longitude: randomLon,
     name: `随机站 ${randomId.slice(-4)}`,
   });
-  selectedIds.value.push(randomId); // 同时将新站点 ID 添加到选中项
-  consola.info('添加随机站点:', groundStations.value.at(-1)); // 使用 .at() 访问最后一个元素
+  groundStationState.selectedIds.push(randomId); // 同时将新站点 ID 添加到选中项
+  consola.info('添加随机站点:', groundStationState.groundStations.at(-1)); // 使用 .at() 访问最后一个元素
 };
 
 // 移除最后一个站点
 const removeLastStation = () => {
-  if (groundStations.value.length > 0) {
-    const removedStation = groundStations.value.pop();
+  if (groundStationState.groundStations.length > 0) {
+    const removedStation = groundStationState.groundStations.pop();
     if (removedStation) {
       consola.info('移除站点:', removedStation);
       // 同时从选中项中移除
-      selectedIds.value = selectedIds.value.filter((id) => id !== removedStation.id);
+      groundStationState.selectedIds = groundStationState.selectedIds.filter((id) => id !== removedStation.id);
     }
   }
 };
 
 // 清空所有选中项
 const clearAllStations = () => {
-  groundStations.value = [];
-  selectedIds.value = []; // 清空选中项
+  groundStationState.groundStations = [];
+  groundStationState.selectedIds = []; // 清空选中项
   consola.info('清空所有站点');
 };
 </script>
@@ -63,20 +65,24 @@ const clearAllStations = () => {
     <div class="flex-shrink-0 mb-4 space-y-2">
       <div class="space-x-2">
         <a-button type="primary" @click="addRandomStation">添加随机站点</a-button>
-        <a-button @click="removeLastStation" :disabled="groundStations.length === 0">移除最后一个</a-button>
-        <a-button danger @click="clearAllStations" :disabled="groundStations.length === 0">清空所有</a-button>
-        <span>当前站点数: {{ groundStations.length }}</span>
-        <span> | 选中站点数: {{ selectedIds.length }}</span>
+        <a-button @click="removeLastStation" :disabled="groundStationState.groundStations.length === 0"
+          >移除最后一个</a-button
+        >
+        <a-button danger @click="clearAllStations" :disabled="groundStationState.groundStations.length === 0"
+          >清空所有</a-button
+        >
+        <span>当前站点数: {{ groundStationState.groundStations.length }}</span>
+        <span> | 选中站点数: {{ groundStationState.selectedIds.length }}</span>
       </div>
       <!-- 新增：站点选择区域 -->
-      <div v-if="groundStations.length > 0">
+      <div v-if="groundStationState.groundStations.length > 0">
         <span class="mr-2">选择要高亮的站点:</span>
-        <a-checkbox-group v-model:value="selectedIds" :options="stationOptions" />
+        <a-checkbox-group v-model:value="groundStationState.selectedIds" :options="stationOptions" />
       </div>
     </div>
     <div class="flex-grow w-full rounded-lg border overflow-hidden">
       <!-- 将响应式列表和选中 ID 列表绑定到 prop -->
-      <h-cesium-viewer :ground-station-list="groundStations" :selected-station-ids="selectedIds">
+      <h-cesium-viewer :ground-station-state="groundStationState">
         <div class="absolute top-0 left-0 z-10 p-2 bg-black/30 rounded-br-lg">
           <span class="text-white text-xs">叠加 UI 示例</span>
         </div>