refactor: 重构 Cesium 相关代码

2025-04-01 01:51:02 +08:00
parent 2c6a4287d2
commit 7072f171e0
5 changed files with 117 additions and 95 deletions
--- a/src/components/h-cesium-viewer/h-cesium-viewer-class.ts
+++ b/src/components/h-cesium-viewer/h-cesium-viewer-class.ts
@ -3,7 +3,6 @@ import * as Cesium from 'cesium';
 import { VIEWER_OPTIONS_FN } from './VIEWER_OPTIONS';

 export interface GroundStationOptions {
-  color?: Cesium.Color; // 点的可选颜色
  height?: number; // 可选高度，默认为0
  id: string; // 站点的唯一标识符
  latitude: number;
@ -13,7 +12,9 @@ export interface GroundStationOptions {
 }

 export class HCesiumViewerCls {
-  viewer: Cesium.Viewer | null = null;
+  private viewer: Cesium.Viewer | null = null;
+  // 用于存储当前地面站实体的 Map
+  currentStationEntities: Map<string, Cesium.Entity> = new Map();

  /**
   * 初始化 Cesium Viewer
@ -21,32 +22,31 @@ export class HCesiumViewerCls {
   */
  initCesiumViewer(container: ConstructorParameters<typeof Cesium.Viewer>[0]) {
    this.viewer = new Cesium.Viewer(container, VIEWER_OPTIONS_FN());
+    // 初始化时清空可能存在的旧实体引用
+    this.currentStationEntities.clear();
  }

  /**
   * 向视图中添加地面站实体
   * @param options - 地面站的选项参数
-   * @returns 添加的实体对象。
+   * @returns 添加的实体对象，如果添加失败则返回 null。
   */
-  addGroundStation(options: GroundStationOptions): Cesium.Entity {
+  addGroundStation(options: GroundStationOptions): Cesium.Entity | null {
    if (!this.viewer) {
-      throw new Error('视图未初始化。请先调用 initCesiumViewer 方法。');
+      console.error('视图未初始化。无法添加地面站。'); // 使用 console.error 替代抛出错误，以便在 index.vue 中处理
+      return null;
    }

-    const {
-      height = 0, // 如果未提供，默认高度为0
-      id,
-      latitude,
-      longitude,
-      name,
-      pixelSize = 10, // 默认像素大小
-    } = options;
+    // 检查是否已存在相同 ID 的实体
+    if (this.currentStationEntities.has(options.id)) {
+      console.warn(`ID 为 "${options.id}" 的地面站实体已存在，跳过添加。`);
+      return this.currentStationEntities.get(options.id) || null;
+    }

+    // 解构赋值获取站点信息
+    const { height = 0, id, latitude, longitude, name, pixelSize = 10 } = options;
    const position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);

-    // 生成随机颜色
-    const randomColor = Cesium.Color.fromRandom();
-
    const groundStationEntity = new Cesium.Entity({
      // 使用传入的 id 作为实体的唯一标识符
      id: id,
@ -60,7 +60,7 @@ export class HCesiumViewerCls {
      },
      name: name,
      point: {
-        color: randomColor, // 使用随机颜色
+        color: Cesium.Color.fromRandom(), // 随机颜色
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 2,
        pixelSize,
@ -68,29 +68,59 @@ export class HCesiumViewerCls {
      position: position,
    });

-    return this.viewer.entities.add(groundStationEntity);
+    const addedEntity = this.viewer.entities.add(groundStationEntity);
+    // 添加成功后，将其存入 Map
+    this.currentStationEntities.set(id, addedEntity);
+    return addedEntity;
  }

  /**
-   * 从视图中移除指定的地面站实体
-   * @param entity - 要移除的地面站实体对象 (由 addGroundStation 返回)
+   * 从视图中移除指定的地面站实体 (通过 ID)
+   * @param entityId - 要移除的地面站实体的 ID
   * @returns 如果成功移除则返回 true，否则返回 false
   */
-  removeGroundStation(entity: Cesium.Entity): boolean {
+  removeGroundStationById(entityId: string): boolean {
    if (!this.viewer) {
      console.error('视图未初始化。无法移除地面站。');
      return false;
    }
-    return this.viewer.entities.remove(entity);
+    const entityToRemove = this.currentStationEntities.get(entityId);
+    if (entityToRemove) {
+      const removed = this.viewer.entities.remove(entityToRemove);
+      if (removed) {
+        // 移除成功后，从 Map 中删除
+        this.currentStationEntities.delete(entityId);
+        return true;
+      } else {
+        console.warn(`尝试从 Cesium 移除 ID 为 "${entityId}" 的实体失败。`);
+        return false; // Cesium 移除失败
+      }
+    } else {
+      // console.warn(`未在 Map 中找到 ID 为 "${entityId}" 的地面站实体，无法移除。`); // 可能在 clearAll 时触发，不一定是警告
+      return false; // Map 中未找到
+    }
+  }
+
+  // 移除 highlightStation 和 unhighlightStation 方法
+
+  clearAllGroundStations() {
+    // ... (清理逻辑不变)
+    if (!this.viewer) return;
+    // 优化：直接遍历 Map 清理，避免重复查找
+    // 使用 for...of 循环替代 forEach
+    for (const entity of this.currentStationEntities.values()) {
+      this.viewer?.entities.remove(entity);
+    }
+    this.currentStationEntities.clear();
  }

-  /**
-   * 销毁 Cesium Viewer 实例并清理资源
-   */
  destroy() {
+    // ... (销毁逻辑不变)
    if (this.viewer) {
+      this.clearAllGroundStations();
      this.viewer.destroy();
      this.viewer = null;
    }
+    this.currentStationEntities.clear(); // 确保清空
  }
 }
--- a/src/components/h-cesium-viewer/index.vue
+++ b/src/components/h-cesium-viewer/index.vue
@ -1,57 +1,53 @@
 <script setup lang="ts">
 import 'cesium/Build/Cesium/Widgets/widgets.css';
-import * as Cesium from 'cesium'; // 引入 Cesium 类型

 import { type GroundStationOptions, HCesiumViewerCls } from './h-cesium-viewer-class';

 const props = defineProps<{
  groundStationList?: Array<GroundStationOptions>;
+  selectedStationIds?: string[];
 }>();

 const hCesiumViewerInst = new HCesiumViewerCls();
-Object.assign(globalThis, { hCesiumViewer: hCesiumViewerInst });
+if ($__DEV__) Object.assign(globalThis, { hCesiumViewerInst });

-// 使用 Map 存储当前显示的站点实体，键为站点唯一标识符，值为 Cesium.Entity
-// 使用 ref 包裹 Map 以便在 watchEffect 中正确跟踪其变化
-const currentStationEntities = ref<Map<string, Cesium.Entity>>(new Map());
+// 创建一个从 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');
-  Object.assign(globalThis, { hCesiumViewer: hCesiumViewerInst });

-  // 使用 watchEffect 监听 props.groundStationList 的变化并同步 Cesium 实体
+  // watchEffect: 同步 selectedStationIds 到 Cesium 实体
+  // 这个 effect 现在负责添加和移除实体
  watchEffect(() => {
-    const newStations = props.groundStationList ?? []; // 处理 props 可能为 undefined 的情况，默认为空数组
-    const newStationKeys = new Set(newStations.map((station) => station.id)); // 使用 station.id 作为键
-    const currentKeys = new Set(currentStationEntities.value.keys()); // 当前 Cesium 中所有站点的键集合
+    const selectedIdsSet = new Set(props.selectedStationIds ?? []); // 需要显示的站点 ID
+    const currentEntityIds = new Set(hCesiumViewerInst.currentStationEntities.keys()); // 当前已显示的站点 ID

-    // 1. 移除不再存在于新列表中的站点
-    // 遍历当前 Cesium 中的站点键
-    for (const key of currentKeys) {
-      // 如果当前键不在新列表的键集合中，则说明该站点需要被移除
-      if (!newStationKeys.has(key)) {
-        const entityToRemove = currentStationEntities.value.get(key);
-        if (entityToRemove) {
-          // consola.debug(`移除地面站: ${key}`); // 调试日志：输出移除信息
-          hCesiumViewerInst.removeGroundStation(entityToRemove); // 从 Cesium 中移除实体
-          currentStationEntities.value.delete(key); // 从内部 Map 中移除引用
-        }
+    // 1. 移除不再选中的站点
+    for (const entityId of currentEntityIds) {
+      if (!selectedIdsSet.has(entityId)) {
+        // 如果当前显示的实体不在新的选中列表里，则移除
+        hCesiumViewerInst.removeGroundStationById(entityId);
      }
    }

-    // 2. 添加新列表中的、当前尚未显示的站点
-    // 遍历新列表中的站点
-    for (const station of newStations) {
-      const key = station.id; // 使用 station.id 作为键
-      // 如果新站点的键不在当前 Cesium 的键集合中，则说明该站点是新增的
-      if (!currentKeys.has(key)) {
-        // consola.debug(`添加地面站: ${key}`); // 调试日志：输出添加信息
-        const newEntity = hCesiumViewerInst.addGroundStation(station); // 向 Cesium 添加实体
-        if (newEntity) {
-          currentStationEntities.value.set(key, newEntity); // 将新实体的引用添加到内部 Map
+    // 2. 添加新增的选中站点
+    for (const selectedId of selectedIdsSet) {
+      if (!currentEntityIds.has(selectedId)) {
+        // 如果选中的 ID 对应的实体当前未显示，则添加
+        const stationToAdd = stationMap.value.get(selectedId); // 从映射中查找站点信息
+        if (stationToAdd) {
+          hCesiumViewerInst.addGroundStation(stationToAdd);
        } else {
-          // 如果添加失败（例如 viewer 问题），记录错误
-          consola.error(`添加地面站失败: ${key}`);
+          // 如果在 groundStationList 中找不到对应的站点信息，发出警告
+          console.warn(`无法找到 ID 为 "${selectedId}" 的站点信息，无法添加到地图。`);
        }
      }
    }
@ -59,37 +55,21 @@ onMounted(() => {
 });

 onBeforeUnmount(() => {
-  // 组件卸载前，清理所有由该组件添加的地面站实体
-  if (hCesiumViewerInst.viewer) {
-    // consola.debug('组件卸载，清理所有地面站...'); // 调试日志
-    for (const entity of currentStationEntities.value.values()) {
-      // 确保 viewer 仍然存在，避免在销毁过程中出错
-      if (hCesiumViewerInst.viewer && hCesiumViewerInst.viewer.entities) {
-        hCesiumViewerInst.removeGroundStation(entity);
-      }
-    }
-  }
-  currentStationEntities.value.clear(); // 清空内部 Map
-  // 销毁 Cesium Viewer 实例，释放资源
  hCesiumViewerInst.destroy();
-  // consola.debug('Cesium Viewer 已销毁。'); // 调试日志
 });
 </script>

 <template>
  <div id="cesiumContainer" class="h-full w-full relative inset-0 isolate">
-    <!-- 插槽允许父组件在 Cesium Viewer 上层叠加 UI 元素 -->
    <slot />
  </div>
 </template>

 <style scoped>
-/* 为 Cesium 容器提供基本样式，确保其可见 */
 #cesiumContainer {
-  min-height: 300px; /* 示例：设置一个最小高度，防止容器塌陷 */
-  background-color: #000; /* 可以设置一个背景色，直到 Cesium 加载完成 */
+  min-height: 300px;
+  background-color: #000;
 }
-/* 确保 Cesium 的 canvas 填满容器 */
 :deep(.cesium-widget),
 :deep(.cesium-widget canvas) {
  width: 100%;