refactor: 重构 Cesium 相关代码
This commit is contained in:
严浩
6
.vscode/settings.json
vendored
6
.vscode/settings.json
vendored
@ -3,9 +3,9 @@
|
||||
"source.fixAll.eslint": "explicit",
|
||||
"source.fixAll.stylelint": "explicit",
|
||||
"source.fixAll.oxc": "explicit",
|
||||
// "source.fixAll.eslint": "never",
|
||||
// "source.fixAll.stylelint": "never",
|
||||
// "source.fixAll.oxc": "never",
|
||||
"source.fixAll.eslint": "never",
|
||||
"source.fixAll.stylelint": "never",
|
||||
"source.fixAll.oxc": "never",
|
||||
"source.organizeImports": "never"
|
||||
},
|
||||
"editor.formatOnSave": true,
|
||||
|
||||
@ -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(); // 确保清空
|
||||
}
|
||||
}
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
/* prettier-ignore */
|
||||
export const TOOLTIP_MAP = {
|
||||
NORAD_CAT_ID_卫星编号: "5位数字，如'63158'，表示NORAD卫星唯一目录编号",
|
||||
|
||||
@ -13,6 +13,14 @@ const groundStations = ref<GroundStationOptions[]>([
|
||||
{ height: 20, id: 'gs-gz', latitude: 23.1291, longitude: 113.2644, name: '广州站' },
|
||||
]);
|
||||
|
||||
// 新增：定义选中站点 ID 的响应式引用
|
||||
const selectedIds = ref<string[]>([]);
|
||||
|
||||
// 计算 Checkbox Group 的 options
|
||||
const stationOptions = computed(() =>
|
||||
groundStations.value.map((station) => ({ label: station.name, value: station.id })),
|
||||
);
|
||||
|
||||
// 添加一个随机站点
|
||||
const addRandomStation = () => {
|
||||
const randomId = `gs-random-${Math.random().toString(36).slice(7)}`;
|
||||
@ -26,37 +34,42 @@ const addRandomStation = () => {
|
||||
longitude: randomLon,
|
||||
name: `随机站 ${randomId.slice(-4)}`,
|
||||
});
|
||||
selectedIds.value.push(randomId); // 同时将新站点 ID 添加到选中项
|
||||
consola.info('添加随机站点:', groundStations.value.at(-1)); // 使用 .at() 访问最后一个元素
|
||||
};
|
||||
|
||||
// 移除最后一个站点
|
||||
const removeLastStation = () => {
|
||||
if (groundStations.value.length > 0) {
|
||||
const removed = groundStations.value.pop();
|
||||
consola.info('移除站点:', removed);
|
||||
} else {
|
||||
consola.warn('没有站点可以移除');
|
||||
if (selectedIds.value.length > 0) {
|
||||
selectedIds.value.pop(); // 移除选中项
|
||||
}
|
||||
};
|
||||
|
||||
// 清空所有站点
|
||||
// 清空所有选中项
|
||||
const clearAllStations = () => {
|
||||
groundStations.value = [];
|
||||
consola.info('已清空所有站点');
|
||||
selectedIds.value = []; // 同时清空选中项
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-screen w-screen p-4 flex flex-col">
|
||||
<div class="flex-shrink-0 mb-2 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>
|
||||
<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>
|
||||
</div>
|
||||
<!-- 新增：站点选择区域 -->
|
||||
<div v-if="groundStations.length > 0">
|
||||
<span class="mr-2">选择要高亮的站点:</span>
|
||||
<a-checkbox-group v-model:value="selectedIds" :options="stationOptions" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow w-full rounded-lg border overflow-hidden">
|
||||
<!-- 将响应式列表绑定到 prop -->
|
||||
<h-cesium-viewer :ground-station-list="groundStations">
|
||||
<!-- 将响应式列表和选中 ID 列表绑定到 prop -->
|
||||
<h-cesium-viewer :ground-station-list="groundStations" :selected-station-ids="selectedIds">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user