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