feat: 添加 Cesium Viewer 组件及相关功能,优化项目结构和配置
This commit is contained in:
@ -1,4 +1,4 @@
|
||||
/* eslint-disable perfectionist/sort-objects */
|
||||
|
||||
/* prettier-ignore */
|
||||
export const TOOLTIP_MAP = {
|
||||
NORAD_CAT_ID_卫星编号: "5位数字,如'63158',表示NORAD卫星唯一目录编号",
|
||||
|
67
src/pages/cesium-viewer.page.vue
Normal file
67
src/pages/cesium-viewer.page.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
layout: false
|
||||
</route>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { GroundStationOptions } from '@/components/h-cesium-viewer/h-cesium-viewer-class';
|
||||
|
||||
// 定义地面站列表的响应式引用
|
||||
const groundStations = ref<GroundStationOptions[]>([
|
||||
{ height: 50, id: 'gs-bj', latitude: 39.9042, longitude: 116.4074, name: '北京站' },
|
||||
{ height: 10, id: 'gs-sh', latitude: 31.2304, longitude: 121.4737, name: '上海站' },
|
||||
{ height: 20, id: 'gs-gz', latitude: 23.1291, longitude: 113.2644, name: '广州站' },
|
||||
]);
|
||||
|
||||
// 添加一个随机站点
|
||||
const addRandomStation = () => {
|
||||
const randomId = `gs-random-${Math.random().toString(36).slice(7)}`; // 使用 slice 替换 substring
|
||||
const randomLon = Math.random() * 360 - 180; // -180 to 180
|
||||
const randomLat = Math.random() * 180 - 90; // -90 to 90
|
||||
const randomHeight = Math.random() * 1000; // 0 to 1000 meters
|
||||
groundStations.value.push({
|
||||
// 调整属性顺序
|
||||
height: randomHeight,
|
||||
id: randomId,
|
||||
latitude: randomLat,
|
||||
longitude: randomLon,
|
||||
name: `随机站 ${randomId.slice(-4)}`,
|
||||
});
|
||||
consola.info('添加随机站点:', groundStations.value.at(-1)); // 使用 .at() 访问最后一个元素
|
||||
};
|
||||
|
||||
// 移除最后一个站点
|
||||
const removeLastStation = () => {
|
||||
if (groundStations.value.length > 0) {
|
||||
const removed = groundStations.value.pop();
|
||||
consola.info('移除站点:', removed);
|
||||
} else {
|
||||
consola.warn('没有站点可以移除');
|
||||
}
|
||||
};
|
||||
|
||||
// 清空所有站点
|
||||
const clearAllStations = () => {
|
||||
groundStations.value = [];
|
||||
consola.info('已清空所有站点');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-screen w-screen p-4 flex flex-col">
|
||||
<div class="flex-shrink-0 mb-2 space-x-2">
|
||||
<a-button type="primary" @click="addRandomStation">添加随机站点</a-button>
|
||||
<a-button @click="removeLastStation" :disabled="groundStations.length === 0">移除最后一个</a-button>
|
||||
<a-button danger @click="clearAllStations" :disabled="groundStations.length === 0">清空所有</a-button>
|
||||
<span>当前站点数: {{ groundStations.length }}</span>
|
||||
</div>
|
||||
<div class="flex-grow w-full rounded-lg border overflow-hidden">
|
||||
<!-- 将响应式列表绑定到 prop -->
|
||||
<h-cesium-viewer :ground-station-list="groundStations">
|
||||
<div class="absolute top-0 left-0 z-10 p-2 bg-black/30 rounded-br-lg">
|
||||
<span class="text-white text-xs">叠加 UI 示例</span>
|
||||
</div>
|
||||
</h-cesium-viewer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
Reference in New Issue
Block a user