h-cesium-viewer

src/components/h-cesium-viewer/h-cesium-viewer-class.ts

@@ -1,31 +1,24 @@
 import * as Cesium from 'cesium';
 import { eciToEcf, gstime, propagate, type SatRec, twoline2satrec } from 'satellite.js';
 
-import { VIEWER_OPTIONS_FN } from './VIEWER_OPTIONS';
+import type { GroundStationOptions, SatelliteOptions } from './h-cesium-viewer-class.types'; // 2小时
 
-export interface GroundStationOptions {
-  height?: number; // 可选高度，默认为0
-  id: string; // 站点的唯一标识符
-  latitude: number;
-  longitude: number;
-  name: string;
-  pixelSize?: number; // 点的可选像素大小
-}
+import { VIEWER_OPTIONS_FN } from './helper/_VIEWER_OPTIONS';
+import { configureCesium } from './helper/configureCesium';
+import { configureTimeLine } from './helper/configureTimeLine';
 
-// 卫星选项接口
-export interface SatelliteOptions {
-  id: string; // 卫星的唯一标识符
-  orbitDurationHours?: number; // 轨道显示时长（小时），默认为 2
-  showOrbit?: boolean; // 是否显示完整轨道线，默认为 true
-  timeStepSeconds?: number; // 轨道计算步长（秒），默认为 30
-  tle: string; // 包含卫星名称和两行 TLE 数据的字符串，格式如下:
-  // NAME
-  // TLE1
-  // TLE2
-}
+const 默认轨道时长秒 = 2 * 60 * 60;
+
+export { type GroundStationOptions, type SatelliteOptions } from './h-cesium-viewer-class.types';
+
+Cesium.Ion.defaultAccessToken = import.meta.env.VITE_CESIUM_ION_TOKEN; // 用了离线地图的情况是不需要的。
+
+Object.assign(globalThis, { Cesium });
+
+configureCesium();
 
 export class HCesiumViewerCls {
-  private viewer: Cesium.Viewer | null = null;
+  viewer: Cesium.Viewer | null = null;
   // 用于存储当前地面站实体的 Map
   currentStationEntities: Map<string, Cesium.Entity> = new Map();
   // 用于存储当前卫星实体的 Map (包括轨道实体)
@@ -45,6 +38,10 @@ export class HCesiumViewerCls {
   initCesiumViewer(container: ConstructorParameters<typeof Cesium.Viewer>[0]) {
     this.viewer = new Cesium.Viewer(container, VIEWER_OPTIONS_FN());
 
+    configureTimeLine(this.viewer);
+
+    this.viewer.scene.debugShowFramesPerSecond = true;
+
     // 初始化时清空可能存在的旧实体引用
     this.currentStationEntities.clear();
     this.currentSatelliteEntities.clear();
@@ -158,7 +155,7 @@ export class HCesiumViewerCls {
     const {
       id,
       tle,
-      orbitDurationHours = 2, // 默认轨道时长 2 小时
+      orbitDurationSeconds = 默认轨道时长秒,
       timeStepSeconds = 30, // 默认步长 30 秒
       showOrbit = true, // 默认显示轨道
     } = options;
@@ -215,18 +212,17 @@ export class HCesiumViewerCls {
           color: randomBaseColor, // 使用随机基色
         }),
         width: 2,
-        leadTime: (orbitDurationHours * 3600) / 2, // 显示未来一半时间的轨迹
-        trailTime: (orbitDurationHours * 3600) / 2, // 显示过去一半时间的轨迹
+        leadTime: orbitDurationSeconds / 2, // 显示未来一半时间的轨迹
+        trailTime: orbitDurationSeconds / 2, // 显示过去一半时间的轨迹
       },
     });
 
     // --- 计算轨道 ---
-    const totalSeconds = orbitDurationHours * 60 * 60;
     const startTime = this.viewer.clock.currentTime; // 使用当前 viewer 的时间作为起点
     const positionProperty = new Cesium.SampledPositionProperty();
     const orbitPositions: Cesium.Cartesian3[] = []; // 用于存储完整轨道点
 
-    for (let i = 0; i <= totalSeconds; i += timeStepSeconds) {
+    for (let i = 0; i <= orbitDurationSeconds; i += timeStepSeconds) {
       const time = Cesium.JulianDate.addSeconds(startTime, i, new Cesium.JulianDate());
       const jsDate = Cesium.JulianDate.toDate(time);
 
@@ -311,7 +307,7 @@ export class HCesiumViewerCls {
       ellipse: {
         semiMajorAxis: coverageRadius,
         semiMinorAxis: coverageRadius, // 假设圆形覆盖
-        material: randomBaseColor.withAlpha(0.2), // 基于随机基色的半透明填充
+        material: randomBaseColor.withAlpha(0.2 + 0.3), // 基于随机基色的半透明填充
         heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 贴合地形
         outline: true,
         outlineColor: randomBaseColor.withAlpha(0.8), // 基于随机基色的较深半透明轮廓