feat: 添加卫星数据加载按钮,优化初始加载逻辑
This commit is contained in:
@ -8,14 +8,14 @@ import SatelliteSelector from './components/SatelliteSelector.vue';
|
||||
// Cesium相关
|
||||
let viewer = $ref<null | Viewer>(null);
|
||||
|
||||
const tleList = ref([] as string[]);
|
||||
const tleList = ref([TLE_LIST[0]] as string[]);
|
||||
const spinning = ref(true);
|
||||
|
||||
// 模拟接口获取TLE数据
|
||||
const fetchTLEData = async () => {
|
||||
spinning.value = true; // 开始加载,设置状态为true
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000)); // 模拟2秒延迟
|
||||
tleList.value = TLE_LIST; // 设置TLE数据
|
||||
tleList.value = TLE_LIST.slice(0, 2); // 设置TLE数据
|
||||
spinning.value = false; // 加载完成,设置状态为false
|
||||
};
|
||||
|
||||
@ -48,6 +48,17 @@ onBeforeUnmount(() => {
|
||||
v-if="spinning"
|
||||
class="z-101 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
/>
|
||||
<SatelliteSelector class="z-100 absolute left-0 top-0 p-4" :viewer="viewer" :tle-list />
|
||||
<SatelliteSelector class="z-100 absolute left-4 top-4" :viewer="viewer" :tle-list />
|
||||
|
||||
<AButton
|
||||
@click="
|
||||
() => {
|
||||
tleList = TLE_LIST;
|
||||
}
|
||||
"
|
||||
class="z-100 absolute left-4 top-15"
|
||||
>
|
||||
<template #icon> <ReloadOutlined /> </template>3 个卫星
|
||||
</AButton>
|
||||
</div>
|
||||
</template>
|
||||
|
Reference in New Issue
Block a user