cesium/satellite-track
1
0
Fork 0
mirror of https://github.com/jiangteng2019/satellite-track.git synced 2025-07-05 07:37:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

'优化交互逻辑和build'

Browse Source
This commit is contained in:
jiangteng 2023-02-13 16:28:30 +08:00
parent dee1159c63
commit f0607a83dd
12 changed files with 508 additions and 496 deletions

18
README.en.md
View File

@ -5,23 +5,17 @@
Satellite-track is a program for tracking satellite orbit, developed by cesium, vue and satelliteJS. It supports satellite and satellite constellation orbit display within the next 24 hours (performance considerations); Custom satellite orbit data (TLE) loading is also supported,TLE data is from celestrak;
## Preview
### [【satellite-track】](https://jiangteng2019.github.io/satellite-track/)
### [【Alternate address】](http://120.48.134.120:10181/satellite-track/)
#### [【satellite-track】](https://jiangteng2019.github.io/satellite-track/)
#### [【Alternate address】](http://120.48.134.120:10181/satellite-track/)
## Tips
In order to save performance, satellite-track limits the following options:
1. The access speed of github pages is slow, and the TLE data and cesium data are large. Please wait patiently for the resources to load;
1. If the spacecraft changes orbit frequently, the TLE cache needs to be cleared manually before use;
1. In order to save performance, satellite-track limits the following options:
- click display of satellite orbital data, not full display;
- orbital data prediction for the next 24 hours;
- only five constellation data can be selected at the same time;
1. The access speed of github pages is slow, and the TLE data and cesium data are large. Please wait patiently for the resources to load;
1. If the spacecraft changes orbit frequently, the TLE cache needs to be cleared manually before use;
## Example
[![satellite-track](https://images.cnblogs.com/cnblogs_com/engeng/2270012/o_230203011203_1.jpg "satellite-track")](https://images.cnblogs.com/cnblogs_com/engeng/2270012/o_230203011203_1.jpg "satellite-track")
[![satellite-track](https://images.cnblogs.com/cnblogs_com/engeng/2270012/o_230203011139_2.jpg "satellite-track")](https://images.cnblogs.com/cnblogs_com/engeng/2270012/o_230203011139_2.jpg "satellite-track")
[![satellite-track](https://img-blog.csdnimg.cn/89809e1eca78428c82dde7cab4801bac.png "satellite-track")](https://img-blog.csdnimg.cn/89809e1eca78428c82dde7cab4801bac.png "satellite-track")

17
README.md
View File

@ -2,22 +2,21 @@
## 概览
satellite-track 是一款追踪卫星轨道的程序，使用cesium、vue、satelliteJS开发。支持24小时之内的卫星和卫星星座轨道显示(性能考虑)；同时也支持自定义的卫星轨道数据（TLE）加载。数据来源于celestrak。
satellite-track 是一款追踪卫星轨道的程序，使用cesium、vue、satelliteJS开发。支持24小时之内(性能考虑)的卫星和卫星星座轨道显示；同时也支持自定义的卫星轨道数据（TLE）加载。数据来源于celestrak。
## Preview
### [【satellite-track】](https://jiangteng2019.github.io/satellite-track/)
### [【备用地址】](http://120.48.134.120:10181/satellite-track/)
#### [【satellite-track】](https://jiangteng2019.github.io/satellite-track/)
#### [【备用地址】](http://120.48.134.120:10181/satellite-track/)
## 注意
为了节约性能，satellite-track 使用了如下限制：
1. github pages 访问速度慢，TLE数据与cesium数据较大，请耐心等待资源加载;
1. 如果航天器变轨频繁，使用前需手动清除TLE缓存;
1. 为了节约性能，satellite-track 做了如下限制：
- 卫星轨道数据点击显示，而非全量显示;
- 轨道数据预测未来24小时;
- 只能同时选择5个星座数据;
1. github pages 访问速度慢，TLE数据与cesium数据较大，请耐心等待资源加载;
1. 如果航天器变轨频繁，使用前需手动清除TLE缓存;
## 示例
[![satellite-track](https://images.cnblogs.com/cnblogs_com/engeng/2270012/o_230203011203_1.jpg "satellite-track")](https://images.cnblogs.com/cnblogs_com/engeng/2270012/o_230203011203_1.jpg "satellite-track")
[![satellite-track](https://images.cnblogs.com/cnblogs_com/engeng/2270012/o_230203011139_2.jpg "satellite-track")](https://images.cnblogs.com/cnblogs_com/engeng/2270012/o_230203011139_2.jpg "satellite-track")
[![satellite-track](https://img-blog.csdnimg.cn/89809e1eca78428c82dde7cab4801bac.png "satellite-track")](https://img-blog.csdnimg.cn/89809e1eca78428c82dde7cab4801bac.png "satellite-track")

1
docs/assets/clean-2b8d49bf.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676271947719" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2286" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M560 16a64 64 0 0 1 64 64v128h320a64 64 0 0 1 64 64v160a64 64 0 0 1-64 64h-32v448a64 64 0 0 1-59.2 63.84l-4.8 0.16h-672a64 64 0 0 1-64-64v-448h-32a64 64 0 0 1-63.84-59.2L16 432v-160a64 64 0 0 1 64-64h288v-128a64 64 0 0 1 64-64z m288 480h-672v448H288V736a32 32 0 0 1 64 0v208h128V736a32 32 0 0 1 64 0v208h128V736a32 32 0 0 1 64 0v208h112v-448z m96-224h-864v160h864v-160z m-384-192h-128v128h128v-128z" fill="#edffff" p-id="2287"></path></svg>
Side by Side

After

(image error) Size: 771 B

1
docs/assets/hide-96ff822e.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676274123773" class="icon" viewBox="0 0 1050 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14072" xmlns:xlink="http://www.w3.org/1999/xlink" width="49.21875" height="48"><path d="M1024 1024H26.25641a26.25641 26.25641 0 1 1 0-52.512821h997.74359a26.25641 26.25641 0 0 1 0 52.512821zM630.153846 887.466667l-21.005128 31.507692H262.564103l-180.434052-155.017846L36.758974 729.928205l31.507693-42.010256L503.020308 12.077949l36.023795-8.086975L966.235897 288.820513l45.42359 30.299897-30.877538 42.482872zM532.795077 63.015385l-422.203077 656.410256L262.564103 867.774359V866.461538h318.542769l355.98441-534.002871z" fill="#edffff" p-id="14073"></path><path d="M525.128205 26.25641l472.615385 262.564103-210.051282 315.076923-472.615385-262.564103z" fill="#edffff" p-id="14074"></path></svg>
Side by Side

After

(image error) Size: 946 B

1
docs/assets/index-34874161.css
View File

File diff suppressed because one or more lines are too long

1
docs/assets/index-c712abd4.css Normal file
View File

File diff suppressed because one or more lines are too long

908
docs/assets/index-b3413a50.js → docs/assets/index-fb91eb82.js
View File

File diff suppressed because one or more lines are too long

4
docs/index.html
View File

@ -6,8 +6,8 @@
<link rel="icon" href="/satellite-track/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>satellite-track</title>
<script type="module" crossorigin src="/satellite-track/assets/index-b3413a50.js"></script>
<link rel="stylesheet" href="/satellite-track/assets/index-34874161.css">
<script type="module" crossorigin src="/satellite-track/assets/index-fb91eb82.js"></script>
<link rel="stylesheet" href="/satellite-track/assets/index-c712abd4.css">
</head>
<body>

1
src/assets/clean.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676271947719" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2286" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M560 16a64 64 0 0 1 64 64v128h320a64 64 0 0 1 64 64v160a64 64 0 0 1-64 64h-32v448a64 64 0 0 1-59.2 63.84l-4.8 0.16h-672a64 64 0 0 1-64-64v-448h-32a64 64 0 0 1-63.84-59.2L16 432v-160a64 64 0 0 1 64-64h288v-128a64 64 0 0 1 64-64z m288 480h-672v448H288V736a32 32 0 0 1 64 0v208h128V736a32 32 0 0 1 64 0v208h128V736a32 32 0 0 1 64 0v208h112v-448z m96-224h-864v160h864v-160z m-384-192h-128v128h128v-128z" fill="#edffff" p-id="2287"></path></svg>
Side by Side

After

(image error) Size: 771 B

1
src/assets/hide.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676274123773" class="icon" viewBox="0 0 1050 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14072" xmlns:xlink="http://www.w3.org/1999/xlink" width="49.21875" height="48"><path d="M1024 1024H26.25641a26.25641 26.25641 0 1 1 0-52.512821h997.74359a26.25641 26.25641 0 0 1 0 52.512821zM630.153846 887.466667l-21.005128 31.507692H262.564103l-180.434052-155.017846L36.758974 729.928205l31.507693-42.010256L503.020308 12.077949l36.023795-8.086975L966.235897 288.820513l45.42359 30.299897-30.877538 42.482872zM532.795077 63.015385l-422.203077 656.410256L262.564103 867.774359V866.461538h318.542769l355.98441-534.002871z" fill="#edffff" p-id="14073"></path><path d="M525.128205 26.25641l472.615385 262.564103-210.051282 315.076923-472.615385-262.564103z" fill="#edffff" p-id="14074"></path></svg>
Side by Side

After

(image error) Size: 946 B

5
src/views/satellite-track/SatelliteTrack.scss
View File

@ -11,6 +11,7 @@
top: 5px;
left: 5px;
z-index: 999;
display: flex;
.menu_button {
box-sizing: border-box;
@ -20,7 +21,6 @@
padding: 0;
vertical-align: middle;
z-index: 0;
display: inline-block;
position: relative;
background: #303336;
border: 1px solid #444;
@ -28,6 +28,9 @@
fill: #edffff;
cursor: pointer;
margin-right: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.menu_button:hover {

46
src/views/satellite-track/SatelliteTrack.vue
View File

@ -2,23 +2,20 @@
<div id="cesiumContainer"></div>
<div class="operate_container">
<div class="menu_button" @click="drawer = !drawer" title="控制面板">
<img src="../../assets/menu.svg" width="28" height="28" alt="">
<img src="../../assets/menu.svg" width="28" height="28" alt="控制面板">
</div>
<div class="menu_button" @click="drawerImport = !drawerImport" title="导入">
<img src="../../assets/import.svg" width="28" height="28" alt="">
<div class="menu_button" @click="drawerImport = !drawerImport" title="自定义导入TLE数据">
<img src="../../assets/import.svg" width="28" height="28" alt="自定义导入TLE数据">
</div>
<div class="menu_button" @click="handleClearTLECache" title="清除TLE缓存">
<img src="../../assets/clean.svg" width="24" height="24" alt="清除TLE缓存">
</div>
<div class="menu_button" @click="clearSatelliteOrbit" title="清除轨道">
<img src="../../assets/hide.svg" width="24" height="24" alt="清除轨道">
</div>
</div>
<!-- 抽屉1 -->
<el-drawer v-model="drawer" title="控制面板" direction="ltr">
<el-row style="padding-bottom: 10px;">
<el-button type="primary" @click="clearTLECache">
清除TLE缓存
</el-button>
<el-button type="primary" @click="clearSatelliteOrbit">
清除轨道
</el-button>
</el-row>
<el-checkbox-group v-model="checked" @change="handleSatelliteChange" :max=5>
<template v-for="(item, index) in allSatellite" :key="index">
<el-row v-if="item.type === 'title'" class="satellite_type">{{ item.label }}</el-row>
@ -36,7 +33,7 @@
<el-upload class="upload_button" :on-change="handleImportSatellite" :show-file-list="false" accept="txt"
:limit="1" :auto-upload="false" ref="upload">
<template #trigger>
<el-button type="primary">导入</el-button>
<el-button type="default">导入</el-button>
</template>
</el-upload>
<el-button type="danger" @click="handleClearSatellite">
@ -204,8 +201,22 @@ function handleSatelliteChange(e) {
}
function handleClearTLECache() {
ElMessageBox.confirm("清空TLE缓存后手动刷新页面将重新下载TLE数据，是否继续？", "确定", {
distinguishCancelAndClose: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(() => {
clearTLECache();
}).catch(() => {
console.log('取消');
})
}
function clearTLECache() {
localStorage.clear();
// satelliteMap.forEach(satelliteSet => satelliteSet.forEach(sate => viewer.entities.remove(sate)));
// satelliteMap.clear(); // 一级缓存
localStorage.clear(); // 二级缓存
ElMessage.success('清除成功')
}
@ -244,7 +255,7 @@ function handleAddSatellite() {
ElMessage.error('wrong TLE data');
return;
}
clearcustomSatelliteMap();
clearCustomSatelliteMap();
let result = parseTleWithSimpleSplit(tleData.value);
result.forEach(tle => {
let satellite = new SatelliteEntity(tle);
@ -257,6 +268,7 @@ function handleAddSatellite() {
}
async function handleImportSatellite(uploadFiles) {
upload.value.clearFiles();
if (uploadFiles.raw.type !== "text/plain") {
ElMessage.warning('请上传TXT格式的TLE数据');
return;
@ -267,13 +279,13 @@ async function handleImportSatellite(uploadFiles) {
// 清空所有状态，输入框和cesium实例
function handleClearSatellite() {
clearcustomSatelliteMap();
clearCustomSatelliteMap();
tleData.value = "";
upload.value.clearFiles();
}
// 清空卫星实例;
function clearcustomSatelliteMap() {
function clearCustomSatelliteMap() {
customSatelliteMap.forEach(item => viewer.entities.remove(item));
customSatelliteMap.clear();
}