feat(SAT): add CesiumViewer component and utility functions; update dependencies

src/pages/SAT/CesiumViewer.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import 'orbpro/style/widgets.css';
+import {
+  Viewer,
+  GoogleMaps,
+  Math as CesiumMath,
+  Cartographic,
+  Cartesian3,
+  viewerReferenceFrameMixin,
+  TileMapServiceImageryProvider,
+  ImageryLayer,
+  // VERSION,
+  EmbeddedTileServiceImageryProvider,
+  DynamicTimeline,
+  SpaceEntity,
+} from 'orbpro';
+
+import { demoOrbitGeneration } from './fns';
+
+let viewer: Viewer;
+
+onMounted(() => {
+  viewer = new Viewer('cesiumContainer', {
+    // globe: false, // 地球
+    baseLayerPicker: true,
+    homeButton: true, // Home按钮
+    fullscreenButton: !true, // 全屏按钮
+    geocoder: true, // = IonGeocodeProviderType.DEFAULT] - 在使用Geocoder小部件进行搜索时使用的地理编码服务或服务。如果设置为false，则不会创建Geocoder小部件。
+    infoBox: true, // InfoBox小部件。
+    navigationHelpButton: !true, // 是否显示导航帮助按钮
+    projectionPicker: !true, // 投影选择器
+    sceneModePicker: true, // 是否显示场景模式选择器(2D/3D切换)
+    animation: true, // 是否创建动画小部件
+    animationContainer: !true,
+    timeline: !true, // If set to false, the Timeline widget will not be created.
+    timelineContainer: true,
+    selectionIndicator: true,
+    requestRenderMode: !true, // 如果为真，渲染帧将仅在场景内部发生变化时需要时发生。启用此功能可以减少应用程序的CPU/GPU使用率，并在移动设备上节省更多电量，但在此模式下需要使用{@link Scene#requestRender}显式渲染新帧。在API的其他部分对场景进行更改后，在许多情况下都需要这样做。请参阅{@link https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/|使用显式渲染提高性能}。
+    showRenderLoopErrors: true, // 如果为真，当发生渲染循环错误时，此小部件将自动向用户显示包含错误的HTML面板。
+    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.
+    orderIndependentTranslucency: false, // 顺序无关透明度
+    shadows: true, // Determines if shadows are cast by light sources.
+  });
+  viewer.scene.debugShowFramesPerSecond = true;
+
+  new DynamicTimeline(viewer.timeline.container, viewer);
+
+  // @ts-expect-error Open console to debug app
+  globalThis.viewer = viewer;
+
+  /* if ($__DEV__)  */ demoOrbitGeneration(viewer);
+});
+</script>
+
+<template>
+  <div class="h-full flex flex-col gap-2">
+    <div class="shrink-0">
+      <Button @click="demoOrbitGeneration(viewer)">轨道生成</Button>
+    </div>
+    <div id="cesiumContainer" class="flex-1" />
+  </div>
+  <!--
+  {#if $selectedEntity}
+    <SelectionWidget {viewer} />
+  {/if}
+  -->
+</template>
+
+<style>
+#cesiumContainer {
+  width: 100%;
+}
+</style>