74 lines
2.8 KiB
Vue
74 lines
2.8 KiB
Vue
<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>
|