h-cesium-viewer

src/components/h-cesium-viewer/helper/_TOOLTIP_MAP.ts

@@ -0,0 +1,20 @@
+/* prettier-ignore */
+export const TOOLTIP_MAP = {
+  NORAD_CAT_ID_卫星编号: "5位数字，如'63158'，表示NORAD卫星唯一目录编号",
+  CLASSIFICATION_TYPE_卫星分类: "1个字母，如'U'，表示数据分类",
+  OBJECT_ID_国际标识符: "8个字符，如'25045B'（年份+发射编号+部件），不足时右侧补空格",
+  EPOCH_历元时间: "14位数字，如'25071.65907894'，表示轨道数据的参考时间（年份+年积日.一天中的小数部分）",
+  MEAN_MOTION_DOT_平均运动一阶导数: "10位数字，如'.00072212'，表示平均运动变化率的一半，单位圈/天²，左侧补空格",
+  MEAN_MOTION_DDOT_平均运动二阶导数: "8位科学计数法，如'-50502-6'表示-5.0502×10⁻⁶圈/天³，最后一位是指数",
+  BSTAR_BSTAR拖曳项: "BSTAR参数。8位科学计数法，如'39937-3'表示0.39937×10⁻³/地球半径，表示大气拖曳影响",
+  EPHEMERIS_TYPE_星历类型: "通常为'0'，表示使用SGP4星历模型",
+  ELEMENT_SET_NO_元素集编号: "4位数字，如'9999'，表示TLE版本号",
+  // CHECKSUM_校验和: "1位数字，用于验证数据完整性，可选项",
+  INCLINATION_轨道倾角: "8位数字，如'19.0363'，表示轨道与赤道平面的夹角（度），范围0°-180°",
+  RA_OF_ASC_NODE_升交点赤经: "8位数字，如'63.0294'，表示轨道升交点的赤经（度），范围0°-360°",
+  ECCENTRICITY_离心率: "7位数字，无小数点，如'7375486'表示0.7375486，小数点隐含在最前面",
+  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位",
+};

src/components/h-cesium-viewer/helper/_VIEWER_OPTIONS.ts

@@ -0,0 +1,33 @@
+import type { Viewer } from 'cesium';
+
+import * as Cesium from 'cesium';
+
+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')),
+    ),
+    baseLayerPicker: false,
+    fullscreenButton: !true, // 全屏按钮
+    geocoder: false, // = IonGeocodeProviderType.DEFAULT] - 在使用Geocoder小部件进行搜索时使用的地理编码服务或服务。如果设置为false，则不会创建Geocoder小部件。
+
+    // globe: false, // 地球
+    homeButton: true, // Home按钮
+    infoBox: false, // InfoBox小部件。
+    navigationHelpButton: false, // 是否显示导航帮助按钮
+    orderIndependentTranslucency: false, // 顺序无关透明度
+    projectionPicker: !true, // 投影选择器
+    requestRenderMode: !true, // 如果为真，渲染帧将仅在场景内部发生变化时需要时发生。启用此功能可以减少应用程序的CPU/GPU使用率，并在移动设备上节省更多电量，但在此模式下需要使用{@link Scene#requestRender}显式渲染新帧。在API的其他部分对场景进行更改后，在许多情况下都需要这样做。请参阅{@link https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/|使用显式渲染提高性能}。
+    sceneModePicker: true, // 是否显示场景模式选择器(2D/3D切换)
+    selectionIndicator: true,
+    shadows: true, // Determines if shadows are cast by light sources.
+
+    /* animationContainer: !true, */
+    /* timelineContainer: true, */
+    /* bottomContainer: document.createElement('p'), // The DOM element or ID that will contain the bottomContainer.  If not specified, the bottomContainer is added to the widget itself. */
+    shouldAnimate: !true,
+    showRenderLoopErrors: true, // 如果为真，当发生渲染循环错误时，此小部件将自动向用户显示包含错误的HTML面板。
+    timeline: true,
+  };
+};

src/components/h-cesium-viewer/helper/configureCesium.ts

@@ -0,0 +1,46 @@
+import * as Cesium from 'cesium';
+
+export function configureCesium() {
+  if (document.querySelector('#hide-cesium-viewer-bottom') === null) {
+    document.head.append(
+      Object.assign(document.createElement('style'), {
+        id: 'hide-cesium-viewer-bottom',
+        innerHTML: `
+.cesium-viewer-bottom {
+  display: none !important;
+}
+`.trim(),
+        type: 'text/css',
+      }),
+    );
+  }
+
+  /* 时间日期格式化 */ {
+    const minutes = 0 - new Date().getTimezoneOffset(); // 0 - (-480);
+
+    // Animation 的时间日期格式化
+    Cesium.AnimationViewModel.defaultDateFormatter = function (date) {
+      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());
+      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());
+      return Cesium.JulianDate.toIso8601(dataZone8).slice(0, 19);
+    };
+  }
+
+  // 默认视图区域
+  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
+    75, // 西经
+    10, // 南纬
+    140, // 东经
+    60, // 北纬
+  );
+}

src/components/h-cesium-viewer/helper/configureMapTile.ts

@@ -0,0 +1,34 @@
+import * as Cesium from 'cesium';
+
+const provider = new Cesium.UrlTemplateImageryProvider({
+  maximumLevel: 18,
+  minimumLevel: 3,
+  url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+});
+
+export function configureMapTile(viewer: Cesium.Viewer) {
+  if (viewer.baseLayerPicker) {
+    // 如果有底图选择器
+    const customLayerViewModel = new Cesium.ProviderViewModel({
+      category: 'Cesium ion', // 或 'Other 、Cesium ion'、'Bing Maps' 等
+      creationFunction() {
+        return provider;
+      },
+      iconUrl: 'gaodeImage.png',
+      name: '高德地图',
+      tooltip: '高德地图',
+    });
+    // 设置高德地图为默认图层
+    viewer.baseLayerPicker.viewModel.imageryProviderViewModels.unshift(customLayerViewModel);
+    const selectedViewModel = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[0];
+    if (!selectedViewModel) {
+      console.error('未找到默认底图');
+      return;
+    }
+    viewer.baseLayerPicker.viewModel.selectedImagery = selectedViewModel;
+  } else {
+    // 如果没有底图选择器
+    viewer.imageryLayers.removeAll();
+    viewer.imageryLayers.addImageryProvider(provider);
+  }
+}

src/components/h-cesium-viewer/helper/configureTimeLine.ts

@@ -0,0 +1,20 @@
+import * as Cesium from 'cesium';
+
+const 默认场景的时间跨度 = 2 * 60 * 60; // 2小时
+
+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());
+
+  // 设置时钟范围
+  viewer.clock.startTime = start.clone();
+  viewer.clock.stopTime = stop.clone();
+  viewer.clock.currentTime = start.clone();
+  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
+  viewer.clock.multiplier = 30; // 30倍速播放
+
+  // 设置时间轴范围
+  viewer.timeline.zoomTo(start, stop);
+
+  viewer.clock.shouldAnimate = true;
+}