feat: 添加 Cesium Viewer 组件及相关功能，优化项目结构和配置
This commit is contained in:
严浩
33
src/components/h-cesium-viewer/VIEWER_OPTIONS.ts
Normal file
33
src/components/h-cesium-viewer/VIEWER_OPTIONS.ts
Normal file
@ -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,
|
||||
};
|
||||
};
|
||||
100
src/components/h-cesium-viewer/h-cesium-viewer-class.ts
Normal file
100
src/components/h-cesium-viewer/h-cesium-viewer-class.ts
Normal file
@ -0,0 +1,100 @@
|
||||
import * as Cesium from 'cesium';
|
||||
|
||||
import { VIEWER_OPTIONS_FN } from './VIEWER_OPTIONS';
|
||||
|
||||
export interface GroundStationOptions {
|
||||
// 调整顺序以符合 ESLint 规则
|
||||
color?: Cesium.Color; // 点的可选颜色
|
||||
height?: number; // 可选高度，默认为0
|
||||
id: string; // 站点的唯一标识符
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
name: string;
|
||||
pixelSize?: number; // 点的可选像素大小
|
||||
}
|
||||
|
||||
export class HCesiumViewerCls {
|
||||
viewer: Cesium.Viewer | null = null;
|
||||
|
||||
/**
|
||||
* 初始化 Cesium Viewer
|
||||
* @param container - 用于承载 Cesium Viewer 的 DOM 元素或其 ID
|
||||
*/
|
||||
initCesiumViewer(container: ConstructorParameters<typeof Cesium.Viewer>[0]) {
|
||||
this.viewer = new Cesium.Viewer(container, VIEWER_OPTIONS_FN());
|
||||
}
|
||||
|
||||
/**
|
||||
* 向视图中添加地面站实体
|
||||
* @param options - 地面站的选项参数
|
||||
* @returns 添加的实体对象，如果视图未初始化则返回 undefined
|
||||
*/
|
||||
addGroundStation(options: GroundStationOptions): Cesium.Entity | undefined {
|
||||
if (!this.viewer) {
|
||||
console.error('视图未初始化。请先调用 initCesiumViewer 方法。');
|
||||
return;
|
||||
}
|
||||
|
||||
const {
|
||||
// 调整解构赋值顺序
|
||||
// color = Cesium.Color.RED, // 默认颜色 - 已移除，将使用随机颜色
|
||||
height = 0, // 如果未提供，默认高度为0
|
||||
id, // 获取 id
|
||||
latitude,
|
||||
longitude,
|
||||
name,
|
||||
pixelSize = 10, // 默认像素大小
|
||||
} = options;
|
||||
|
||||
const position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
|
||||
|
||||
// 生成随机颜色
|
||||
const randomColor = Cesium.Color.fromRandom();
|
||||
|
||||
const groundStationEntity = new Cesium.Entity({
|
||||
// 使用传入的 id 作为实体的唯一标识符
|
||||
id: id,
|
||||
label: {
|
||||
font: '14pt sans-serif',
|
||||
outlineWidth: 2,
|
||||
pixelOffset: new Cesium.Cartesian2(0, -12), // 标签略微偏移到点的上方
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||||
text: name,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
},
|
||||
name: name,
|
||||
point: {
|
||||
color: randomColor, // 使用随机颜色
|
||||
outlineColor: Cesium.Color.WHITE,
|
||||
outlineWidth: 2,
|
||||
pixelSize,
|
||||
},
|
||||
position: position,
|
||||
});
|
||||
|
||||
return this.viewer.entities.add(groundStationEntity);
|
||||
}
|
||||
|
||||
/**
|
||||
* 从视图中移除指定的地面站实体
|
||||
* @param entity - 要移除的地面站实体对象 (由 addGroundStation 返回)
|
||||
* @returns 如果成功移除则返回 true，否则返回 false
|
||||
*/
|
||||
removeGroundStation(entity: Cesium.Entity): boolean {
|
||||
if (!this.viewer) {
|
||||
console.error('视图未初始化。无法移除地面站。');
|
||||
return false;
|
||||
}
|
||||
return this.viewer.entities.remove(entity);
|
||||
}
|
||||
|
||||
/**
|
||||
* 销毁 Cesium Viewer 实例并清理资源
|
||||
*/
|
||||
destroy() {
|
||||
if (this.viewer) {
|
||||
this.viewer.destroy();
|
||||
this.viewer = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
122
src/components/h-cesium-viewer/index.vue
Normal file
122
src/components/h-cesium-viewer/index.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<script setup lang="ts">
|
||||
import 'cesium/Build/Cesium/Widgets/widgets.css';
|
||||
import * as Cesium from 'cesium'; // 引入 Cesium 类型
|
||||
|
||||
import { type GroundStationOptions, HCesiumViewerCls } from './h-cesium-viewer-class';
|
||||
|
||||
// 根据项目规则，vue, pinia, vue-router/auto, @vueuse/core, vue-i18n, consola/browser, src/stores, src/utils
|
||||
// 的 API 是自动导入的，因此不需要显式 import { watchEffect, ref, onMounted, onBeforeUnmount, defineProps } from 'vue';
|
||||
// defineProps, ref, watchEffect, onMounted, onBeforeUnmount, consola 应该可以直接使用
|
||||
|
||||
const props = defineProps<{
|
||||
groundStationList?: Array<GroundStationOptions>;
|
||||
}>();
|
||||
|
||||
const hCesiumViewer = new HCesiumViewerCls();
|
||||
// Object.assign(globalThis, { hCesiumViewer }); // 考虑移除或替换为更标准的 Vue 依赖注入或 provide/inject
|
||||
|
||||
// 使用 Map 存储当前显示的站点实体，键为站点唯一标识符，值为 Cesium.Entity
|
||||
// 使用 ref 包裹 Map 以便在 watchEffect 中正确跟踪其变化
|
||||
const currentStationEntities = ref<Map<string, Cesium.Entity>>(new Map());
|
||||
|
||||
// 移除 getStationKey 函数，将使用 station.id 作为唯一标识符
|
||||
|
||||
onMounted(() => {
|
||||
hCesiumViewer.initCesiumViewer('cesiumContainer');
|
||||
|
||||
// 使用 watchEffect 监听 props.groundStationList 的变化并同步 Cesium 实体
|
||||
watchEffect(() => {
|
||||
// 确保 viewer 已经初始化
|
||||
if (!hCesiumViewer.viewer) {
|
||||
consola.warn('Cesium Viewer 尚未初始化，无法更新地面站。');
|
||||
// 清理可能存在的旧实体引用（以防万一 viewer 初始化延迟）
|
||||
// 使用 for...of 替换 forEach
|
||||
for (const entity of currentStationEntities.value.values()) {
|
||||
hCesiumViewer.removeGroundStation(entity);
|
||||
}
|
||||
currentStationEntities.value.clear();
|
||||
return;
|
||||
}
|
||||
|
||||
const newStations = props.groundStationList ?? []; // 处理 props 可能为 undefined 的情况，默认为空数组
|
||||
const newStationKeys = new Set(newStations.map((station) => station.id)); // 使用 station.id 作为键
|
||||
const currentKeys = new Set(currentStationEntities.value.keys()); // 当前 Cesium 中所有站点的键集合
|
||||
|
||||
// 1. 移除不再存在于新列表中的站点
|
||||
// 遍历当前 Cesium 中的站点键
|
||||
// 使用 for...of 替换 forEach
|
||||
for (const key of currentKeys) {
|
||||
// 如果当前键不在新列表的键集合中，则说明该站点需要被移除
|
||||
if (!newStationKeys.has(key)) {
|
||||
const entityToRemove = currentStationEntities.value.get(key);
|
||||
if (entityToRemove) {
|
||||
// consola.debug(`移除地面站: ${key}`); // 调试日志：输出移除信息
|
||||
hCesiumViewer.removeGroundStation(entityToRemove); // 从 Cesium 中移除实体
|
||||
currentStationEntities.value.delete(key); // 从内部 Map 中移除引用
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 添加新列表中的、当前尚未显示的站点
|
||||
// 遍历新列表中的站点
|
||||
// 使用 for...of 替换 forEach
|
||||
for (const station of newStations) {
|
||||
const key = station.id; // 使用 station.id 作为键
|
||||
// 如果新站点的键不在当前 Cesium 的键集合中，则说明该站点是新增的
|
||||
if (!currentKeys.has(key)) {
|
||||
// consola.debug(`添加地面站: ${key}`); // 调试日志：输出添加信息
|
||||
const newEntity = hCesiumViewer.addGroundStation(station); // 向 Cesium 添加实体
|
||||
if (newEntity) {
|
||||
currentStationEntities.value.set(key, newEntity); // 将新实体的引用添加到内部 Map
|
||||
} else {
|
||||
// 如果添加失败（例如 viewer 问题），记录错误
|
||||
consola.error(`添加地面站失败: ${key}`);
|
||||
}
|
||||
}
|
||||
// 注意：此逻辑仅处理添加和移除。如果需要更新现有站点的属性（如颜色、大小等），
|
||||
// 则需要在此处添加额外的比较和更新逻辑。
|
||||
// 例如：找到已存在的实体，比较 props 中的属性与实体当前属性，如有不同则调用相应方法更新实体。
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 组件卸载前，清理所有由该组件添加的地面站实体
|
||||
if (hCesiumViewer.viewer) {
|
||||
// consola.debug('组件卸载，清理所有地面站...'); // 调试日志
|
||||
// 使用 for...of 替换 forEach
|
||||
for (const entity of currentStationEntities.value.values()) {
|
||||
// 确保 viewer 仍然存在，避免在销毁过程中出错
|
||||
if (hCesiumViewer.viewer && hCesiumViewer.viewer.entities) {
|
||||
hCesiumViewer.removeGroundStation(entity);
|
||||
}
|
||||
}
|
||||
}
|
||||
currentStationEntities.value.clear(); // 清空内部 Map
|
||||
// 销毁 Cesium Viewer 实例，释放资源
|
||||
hCesiumViewer.destroy();
|
||||
// consola.debug('Cesium Viewer 已销毁。'); // 调试日志
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="cesiumContainer" class="h-full w-full relative inset-0 isolate">
|
||||
<!-- 插槽允许父组件在 Cesium Viewer 上层叠加 UI 元素 -->
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 为 Cesium 容器提供基本样式，确保其可见 */
|
||||
#cesiumContainer {
|
||||
min-height: 300px; /* 示例：设置一个最小高度，防止容器塌陷 */
|
||||
background-color: #000; /* 可以设置一个背景色，直到 Cesium 加载完成 */
|
||||
}
|
||||
/* 确保 Cesium 的 canvas 填满容器 */
|
||||
:deep(.cesium-widget),
|
||||
:deep(.cesium-widget canvas) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
touch-action: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user