-
+
+
diff --git a/src/components/h-cesium-viewer/helper/_TOOLTIP_MAP.ts b/src/components/h-cesium-viewer/helper/_TOOLTIP_MAP.ts
index 6ef7487..d10f59b 100644
--- a/src/components/h-cesium-viewer/helper/_TOOLTIP_MAP.ts
+++ b/src/components/h-cesium-viewer/helper/_TOOLTIP_MAP.ts
@@ -16,5 +16,5 @@ export const TOOLTIP_MAP = {
ARG_OF_PERICENTER_近地点幅角: "8位数字,如'181.9338',表示近地点相对升交点的角度(度),范围0°-360°",
MEAN_ANOMALY_平近点角: "8位数字,如'171.6150',表示历元时的平近点角(度),范围0°-360°",
MEAN_MOTION_平均运动: "11位数字,如'2.21786616',表示卫星每天绕地球的圈数(圈/天)",
- REV_AT_EPOCH_历元时的圈数: "5位数字,如'13',表示卫星在历元时完成的轨道圈数,最后以为是校验和,共6位",
+ REV_AT_EPOCH_历元时的圈数: "5位数字,如'13',表示卫星在历元时完成的轨道圈数",
};
diff --git a/src/components/h-cesium-viewer/helper/_VIEWER_OPTIONS.ts b/src/components/h-cesium-viewer/helper/_VIEWER_OPTIONS.ts
index d6939b2..4427653 100644
--- a/src/components/h-cesium-viewer/helper/_VIEWER_OPTIONS.ts
+++ b/src/components/h-cesium-viewer/helper/_VIEWER_OPTIONS.ts
@@ -6,7 +6,9 @@ export const VIEWER_OPTIONS_FN = (): Viewer.ConstructorOptions => {
return {
animation: true, // .cesium-viewer-animationContainer https://cesium.com/learn/ion-sdk/ref-doc/Animation.html
baseLayer: Cesium.ImageryLayer.fromProviderAsync(
- Cesium.TileMapServiceImageryProvider.fromUrl(Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')),
+ Cesium.TileMapServiceImageryProvider.fromUrl(
+ Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII'),
+ ),
),
baseLayerPicker: false,
fullscreenButton: !true, // 全屏按钮
diff --git a/src/components/h-cesium-viewer/helper/configureCesium.ts b/src/components/h-cesium-viewer/helper/configureCesium.ts
index 6027b81..8b05df2 100644
--- a/src/components/h-cesium-viewer/helper/configureCesium.ts
+++ b/src/components/h-cesium-viewer/helper/configureCesium.ts
@@ -20,18 +20,30 @@ export function configureCesium() {
// Animation 的时间日期格式化
Cesium.AnimationViewModel.defaultDateFormatter = function (date) {
- const dataZone8 = Cesium.JulianDate.addMinutes(date, minutes, new Cesium.JulianDate());
+ const dataZone8 = Cesium.JulianDate.addMinutes(
+ date,
+ minutes,
+ new Cesium.JulianDate(),
+ );
return Cesium.JulianDate.toIso8601(dataZone8).slice(0, 10);
};
Cesium.AnimationViewModel.defaultTimeFormatter = function (time) {
- const dataZone8 = Cesium.JulianDate.addMinutes(time, minutes, new Cesium.JulianDate());
+ const dataZone8 = Cesium.JulianDate.addMinutes(
+ time,
+ minutes,
+ new Cesium.JulianDate(),
+ );
return Cesium.JulianDate.toIso8601(dataZone8).slice(11, 19);
};
// Timeline 的时间日期格式化
// @ts-expect-error node_modules/@cesium/widgets/Source/Timeline/Timeline.js
Cesium.Timeline.prototype.makeLabel = function (time) {
- const dataZone8 = Cesium.JulianDate.addMinutes(time, minutes, new Cesium.JulianDate());
+ const dataZone8 = Cesium.JulianDate.addMinutes(
+ time,
+ minutes,
+ new Cesium.JulianDate(),
+ );
return Cesium.JulianDate.toIso8601(dataZone8).slice(0, 19);
};
}
diff --git a/src/components/h-cesium-viewer/helper/configureMapTile.ts b/src/components/h-cesium-viewer/helper/configureMapTile.ts
index 0b6c5cb..6cbcac9 100644
--- a/src/components/h-cesium-viewer/helper/configureMapTile.ts
+++ b/src/components/h-cesium-viewer/helper/configureMapTile.ts
@@ -19,8 +19,11 @@ export function configureMapTile(viewer: Cesium.Viewer) {
tooltip: '高德地图',
});
// 设置高德地图为默认图层
- viewer.baseLayerPicker.viewModel.imageryProviderViewModels.unshift(customLayerViewModel);
- const selectedViewModel = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[0];
+ viewer.baseLayerPicker.viewModel.imageryProviderViewModels.unshift(
+ customLayerViewModel,
+ );
+ const selectedViewModel =
+ viewer.baseLayerPicker.viewModel.imageryProviderViewModels[0];
if (!selectedViewModel) {
console.error('未找到默认底图');
return;
diff --git a/src/components/h-cesium-viewer/helper/configureTimeLine.ts b/src/components/h-cesium-viewer/helper/configureTimeLine.ts
index b989e32..e2b66ca 100644
--- a/src/components/h-cesium-viewer/helper/configureTimeLine.ts
+++ b/src/components/h-cesium-viewer/helper/configureTimeLine.ts
@@ -2,9 +2,16 @@ import * as Cesium from 'cesium';
const 默认场景的时间跨度 = 2 * 60 * 60; // 2小时
-export function configureTimeLine(viewer: Cesium.Viewer, totalSeconds = 默认场景的时间跨度) {
+export function configureTimeLine(
+ viewer: Cesium.Viewer,
+ totalSeconds = 默认场景的时间跨度,
+) {
const start = Cesium.JulianDate.fromIso8601(new Date().toISOString());
- const stop = Cesium.JulianDate.addSeconds(start, totalSeconds, new Cesium.JulianDate());
+ const stop = Cesium.JulianDate.addSeconds(
+ start,
+ totalSeconds,
+ new Cesium.JulianDate(),
+ );
// 设置时钟范围
viewer.clock.startTime = start.clone();
diff --git a/src/components/h-cesium-viewer/types.ts b/src/components/h-cesium-viewer/types.ts
index 13a90ad..4b34db8 100644
--- a/src/components/h-cesium-viewer/types.ts
+++ b/src/components/h-cesium-viewer/types.ts
@@ -1,4 +1,7 @@
-import type { GroundStationOptions, SatelliteOptions } from './h-cesium-viewer-class';
+import type {
+ GroundStationOptions,
+ SatelliteOptions,
+} from './h-cesium-viewer-class';
/**
* 地面站状态接口
@@ -7,8 +10,8 @@ import type { GroundStationOptions, SatelliteOptions } from './h-cesium-viewer-c
export interface GroundStationState {
/** 地面站配置数组 */
groundStations: GroundStationOptions[];
- /** 选中的地面站 ID 数组 */
- selectedIds: string[];
+ /** 选中的地面站 ID 集合 */
+ selectedIds: Set
;
}
/**
@@ -18,6 +21,6 @@ export interface GroundStationState {
export interface SatelliteState {
/** 卫星配置数组 */
satellites: SatelliteOptions[];
- /** 选中的卫星 ID 数组 */
- selectedIds: string[];
+ /** 选中的卫星 ID 集合 */
+ selectedIds: Set;
}
diff --git a/src/components/h-cesium-viewer/useHCesiumViewerCls.ts b/src/components/h-cesium-viewer/useHCesiumViewerCls.ts
index 16a4e90..0d6bbe1 100644
--- a/src/components/h-cesium-viewer/useHCesiumViewerCls.ts
+++ b/src/components/h-cesium-viewer/useHCesiumViewerCls.ts
@@ -1,5 +1,6 @@
// src/utils/useHCesiumViewerCls.ts
-import { HCesiumViewerCls } from '@/components/h-cesium-viewer/h-cesium-viewer-class';
+
+import { HCesiumViewerCls } from './h-cesium-viewer-class';
/**
* 管理 HCesiumViewerCls 实例的生命周期。
diff --git a/src/components/h-cesium-viewer/useHCesiumViewerClsGroundStation.ts b/src/components/h-cesium-viewer/useHCesiumViewerClsGroundStation.ts
index e9a2468..8d89a3b 100644
--- a/src/components/h-cesium-viewer/useHCesiumViewerClsGroundStation.ts
+++ b/src/components/h-cesium-viewer/useHCesiumViewerClsGroundStation.ts
@@ -1,17 +1,22 @@
// src/utils/useHCesiumViewerClsGroundStation.ts
-import type { GroundStationOptions, HCesiumViewerCls } from '@/components/h-cesium-viewer/h-cesium-viewer-class';
+
import type { MaybeRefOrGetter } from 'vue';
+import type {
+ GroundStationOptions,
+ HCesiumViewerCls,
+} from './h-cesium-viewer-class';
+
/**
* 管理 Cesium Viewer 中的地面站实体,根据选中的 ID 列表进行同步。
* @param hCesiumViewerInst - HCesiumViewerCls 实例或其 getter。
* @param groundStationList - 包含所有可用地面站选项的数组或 getter。
- * @param selectedStationIds - 包含当前选中地面站 ID 的数组或 getter。
+ * @param selectedStationIds - 包含当前选中地面站 ID 的 Set 或 getter。
*/
export function useHCesiumViewerClsGroundStation(
hCesiumViewerInst: MaybeRefOrGetter,
groundStationList: MaybeRefOrGetter | undefined>,
- selectedStationIds: MaybeRefOrGetter,
+ selectedStationIds: MaybeRefOrGetter | undefined>,
) {
// 创建一个从 ID 到站点选项的映射,方便查找
const stationMap = computed(() => {
@@ -31,9 +36,10 @@ export function useHCesiumViewerClsGroundStation(
return;
}
- const selectedIds = toValue(selectedStationIds) ?? [];
- const selectedIdsSet = new Set(selectedIds); // 需要显示的站点 ID
- const currentEntityIds = new Set(viewerInstance.currentStationEntities.keys()); // 当前已显示的站点 ID
+ const selectedIdsSet = toValue(selectedStationIds) ?? new Set(); // 直接获取 Set,如果为 undefined 则创建空 Set
+ const currentEntityIds = new Set(
+ viewerInstance.currentStationEntities.keys(),
+ ); // 当前已显示的站点 ID
// 1. 移除不再选中的站点
for (const entityId of currentEntityIds) {
@@ -52,7 +58,9 @@ export function useHCesiumViewerClsGroundStation(
viewerInstance.addGroundStation(stationToAdd);
} else {
// 如果在 groundStationList 中找不到对应的站点信息,发出警告
- consola.warn(`无法找到 ID 为 "${selectedId}" 的站点信息,无法添加到地图。`);
+ console.warn(
+ `无法找到 ID 为 "${selectedId}" 的站点信息,无法添加到地图。`,
+ );
}
}
}
diff --git a/src/components/h-cesium-viewer/useHCesiumViewerClsSatellite.ts b/src/components/h-cesium-viewer/useHCesiumViewerClsSatellite.ts
index 7dc943e..f21bb21 100644
--- a/src/components/h-cesium-viewer/useHCesiumViewerClsSatellite.ts
+++ b/src/components/h-cesium-viewer/useHCesiumViewerClsSatellite.ts
@@ -1,17 +1,22 @@
// src/components/h-cesium-viewer/useHCesiumViewerClsSatellite.ts
-import type { HCesiumViewerCls, SatelliteOptions } from '@/components/h-cesium-viewer/h-cesium-viewer-class';
+
import type { MaybeRefOrGetter } from 'vue';
+import type {
+ HCesiumViewerCls,
+ SatelliteOptions,
+} from './h-cesium-viewer-class';
+
/**
* 管理 Cesium Viewer 中的卫星实体,根据选中的 ID 列表进行同步。
* @param hCesiumViewerInst - HCesiumViewerCls 实例或其 getter。
* @param satelliteList - 包含所有可用卫星选项的数组或 getter。
- * @param selectedSatelliteIds - 包含当前选中卫星 ID 的数组或 getter。
+ * @param selectedSatelliteIds - 包含当前选中卫星 ID 的 Set 或 getter。
*/
export function useHCesiumViewerClsSatellite(
hCesiumViewerInst: MaybeRefOrGetter,
satelliteList: MaybeRefOrGetter | undefined>,
- selectedSatelliteIds: MaybeRefOrGetter,
+ selectedSatelliteIds: MaybeRefOrGetter | undefined>,
) {
// 创建一个从 ID 到卫星选项的映射,方便查找
const satelliteMap = computed(() => {
@@ -31,9 +36,10 @@ export function useHCesiumViewerClsSatellite(
return;
}
- const selectedIds = toValue(selectedSatelliteIds) ?? [];
- const selectedIdsSet = new Set(selectedIds); // 需要显示的卫星 ID
- const currentEntityIds = new Set(viewerInstance.currentSatelliteEntities.keys()); // 当前已显示的卫星 ID
+ const selectedIdsSet = toValue(selectedSatelliteIds) ?? new Set(); // 直接获取 Set,如果为 undefined 则创建空 Set
+ const currentEntityIds = new Set(
+ viewerInstance.currentSatelliteEntities.keys(),
+ ); // 当前已显示的卫星 ID
// 1. 移除不再选中的卫星
for (const entityId of currentEntityIds) {
@@ -49,10 +55,15 @@ export function useHCesiumViewerClsSatellite(
// 如果选中的 ID 对应的实体当前未显示,则添加
const satelliteToAdd = satelliteMap.value.get(selectedId); // 从映射中查找卫星信息
if (satelliteToAdd) {
+ console.debug(
+ `添加卫星 "${satelliteToAdd.id}" 到地图,TLE: ${satelliteToAdd.tle}`,
+ );
viewerInstance.addSatellite(satelliteToAdd);
} else {
// 如果在 satelliteList 中找不到对应的卫星信息,发出警告
- consola.warn(`无法找到 ID 为 "${selectedId}" 的卫星信息,无法添加到地图。`);
+ console.warn(
+ `无法找到 ID 为 "${selectedId}" 的卫星信息,无法添加到地图。`,
+ );
}
}
}
diff --git a/src/pages/cesium-viewer.page.vue b/src/pages/cesium-viewer.page.vue
index 86a68ac..007d030 100644
--- a/src/pages/cesium-viewer.page.vue
+++ b/src/pages/cesium-viewer.page.vue
@@ -9,7 +9,7 @@ import type { GroundStationState, SatelliteState } from '@/components/h-cesium-v
// 地面站和选中状态
const groundStationState = reactive({
groundStations: [],
- selectedIds: [],
+ selectedIds: new Set(),
});
groundStationState.groundStations = [
{ height: 50, id: 'gs-bj', latitude: 39.9042, longitude: 116.4074, name: '北京站' },
@@ -20,7 +20,7 @@ groundStationState.groundStations = [
// >>>>>>>>> 卫星状态管理 >>>>>>>>>
const satelliteState = reactive({
satellites: [],
- selectedIds: [],
+ selectedIds: new Set(),
});
// 初始化卫星列表
@@ -51,6 +51,14 @@ const satelliteCheckboxOptions = computed(() =>
})),
);
+// 为卫星 a-checkbox-group 创建计算属性,处理 Set 和 Array 的转换
+const selectedSatelliteIdsArray = computed({
+ get: () => [...satelliteState.selectedIds], // 从 Set 转换为 Array
+ set: (val: string[]) => {
+ satelliteState.selectedIds = new Set(val); // 从 Array 转换回 Set
+ },
+});
+
// <<<<<<<<< 卫星状态管理 <<<<<<<<<
// 计算 Checkbox Group 的 options
@@ -71,7 +79,7 @@ const addRandomStation = () => {
longitude: randomLon,
name: `随机站 ${randomId.slice(-4)}`,
});
- groundStationState.selectedIds.push(randomId); // 同时将新站点 ID 添加到选中项
+ groundStationState.selectedIds.add(randomId); // 同时将新站点 ID 添加到选中项
consola.info('添加随机站点:', groundStationState.groundStations.at(-1)); // 使用 .at() 访问最后一个元素
};
@@ -82,7 +90,7 @@ const removeLastStation = () => {
if (removedStation) {
consola.info('移除站点:', removedStation);
// 同时从选中项中移除
- groundStationState.selectedIds = groundStationState.selectedIds.filter((id) => id !== removedStation.id);
+ groundStationState.selectedIds.delete(removedStation.id);
}
}
};
@@ -90,9 +98,17 @@ const removeLastStation = () => {
// 清空所有选中项
const clearAllStations = () => {
groundStationState.groundStations = [];
- groundStationState.selectedIds = []; // 清空选中项
+ groundStationState.selectedIds.clear(); // 清空选中项
consola.info('清空所有站点');
};
+
+// 为 a-checkbox-group 创建计算属性,处理 Set 和 Array 的转换
+const selectedStationIdsArray = computed({
+ get: () => [...groundStationState.selectedIds], // 从 Set 转换为 Array
+ set: (val: string[]) => {
+ groundStationState.selectedIds = new Set(val); // 从 Array 转换回 Set
+ },
+});
@@ -113,22 +129,22 @@ const clearAllStations = () => {
>清空所有
当前站点数: {{ groundStationState.groundStations.length }}
- | 选中站点数: {{ groundStationState.selectedIds.length }}
+ | 选中站点数: {{ groundStationState.selectedIds.size }}