cesium/satellite-track
1
0
Fork 0
mirror of https://github.com/jiangteng2019/satellite-track.git synced 2025-11-04 01:34:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

'增加自定义卫星功能'

Browse Source
This commit is contained in:
jiangteng 2023-02-07 16:44:46 +08:00
parent babcdff76e
commit 516810d9cf
10 changed files with 594 additions and 489 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@ -1,30 +1,33 @@
# satellite-track # satellite-track
**README.en.md**
### satellite-track uses TLE data to track satellites and is developed using cesium, vue and satelliteJS. ### satellite-track uses TLE data to track satellites and is developed using cesium, vue and satelliteJS.
### [preview](https://jiangteng2019.github.io/satellite-track/) ### [preview](https://jiangteng2019.github.io/satellite-track/)
1. In order to save performance, satellite-track uses the following restrictions: click display of satellite orbital data, not full display, orbital data prediction for the next 24 hours, and only five constellation data can be selected at the same time; 1. In order to save performance, satellite-track limits the following options:
1. Data from celestrak; - 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. 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. If the spacecraft changes orbit frequently, the TLE cache needs to be cleared manually before use;
1. Data from celestrak;
------------------------------------------- -------------------------------------------
**README.md**
### satellite-track使用TLE数据追踪卫星，使用cesium、vue、satelliteJS开发。 ### satellite-track使用TLE数据追踪卫星，使用cesium、vue、satelliteJS开发。
### [预览](https://jiangteng2019.github.io/satellite-track/) ### [预览](https://jiangteng2019.github.io/satellite-track/)
1. 为了节约性能，satellite-track 使用了如下限制：卫星轨道数据点击显示，而非全量显示、轨道数据预测未来24小时、只能同时选择5个星座数据; 1. 为了节约性能，satellite-track 使用了如下限制：
1. 数据来源于celestrak; - 卫星轨道数据点击显示，而非全量显示;
- 轨道数据预测未来24小时;
- 只能同时选择5个星座数据;
1. github pages 访问速度慢，TLE数据与cesium数据较大，请耐心等待资源加载; 1. github pages 访问速度慢，TLE数据与cesium数据较大，请耐心等待资源加载;
1. 如果航天器变轨频繁，使用前需手动清除TLE缓存; 1. 如果航天器变轨频繁，使用前需手动清除TLE缓存;
1. 数据来源于celestrak;
[![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_230203011203_1.jpg "satellite-track")](https://images.cnblogs.com/cnblogs_com/engeng/2270012/o_230203011203_1.jpg "satellite-track")

1
docs/assets/import-5c494d28.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="1675750582528" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3019" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M896 256l0 304L896 768l0 64c0 35.392-28.608 64-64 64L256 896c-35.392 0-64-28.608-64-64l0-64L192 624 192 256l4.8 0L256 256l99.328 0c72.832 0 72.832 64 0 64L256 320l0 304L256 832l64 0 448 0 64 0 0-64L832 560 832 320l-94.976 0c-72.832 0-72.832-64 0-64L832 256l63.488 0L896 256zM704 474.176c0-8.448 2.624-16.832-3.776-23.168-12.864-12.864-33.6-12.864-46.528 0L574.208 527.872 574.208 98.24c0-18.816-11.584-34.048-29.696-33.984-18.112-0.064-30.912 15.168-30.912 33.92L513.472 527.872 442.496 451.008c-12.8-12.864-33.6-12.864-46.464 0C383.168 463.744 377.344 484.544 390.208 497.344L523.136 630.4c0.576 0.64 1.408 0.896 2.048 1.344 2.624 2.24 5.376 4.352 8.64 5.76 3.648 1.344 5.568 2.048 9.344 2.24C543.68 639.744 544.064 640 544.576 640c0.704 0 1.344-0.384 2.048-0.384C550.144 639.36 547.328 638.848 550.72 637.504c3.776-1.6 10.432-3.968 13.312-6.784C564.224 630.592 564.416 630.528 564.544 630.4l129.792-132.992C700.736 491.008 704 482.624 704 474.176z" fill="#edffff" p-id="3020"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
docs/assets/index-7948e6f3.css
View File

File diff suppressed because one or more lines are too long

945
docs/assets/index-ae99f08f.js → docs/assets/index-8531793a.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/index-c3c100ef.css Normal file
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"> <link rel="icon" href="/satellite-track/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>satellite-track</title> <title>satellite-track</title>
<script type="module" crossorigin src="/satellite-track/assets/index-ae99f08f.js"></script> <script type="module" crossorigin src="/satellite-track/assets/index-8531793a.js"></script>
<link rel="stylesheet" href="/satellite-track/assets/index-7948e6f3.css"> <link rel="stylesheet" href="/satellite-track/assets/index-c3c100ef.css">
</head> </head>
<body> <body>

1
src/assets/import.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="1675750582528" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3019" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M896 256l0 304L896 768l0 64c0 35.392-28.608 64-64 64L256 896c-35.392 0-64-28.608-64-64l0-64L192 624 192 256l4.8 0L256 256l99.328 0c72.832 0 72.832 64 0 64L256 320l0 304L256 832l64 0 448 0 64 0 0-64L832 560 832 320l-94.976 0c-72.832 0-72.832-64 0-64L832 256l63.488 0L896 256zM704 474.176c0-8.448 2.624-16.832-3.776-23.168-12.864-12.864-33.6-12.864-46.528 0L574.208 527.872 574.208 98.24c0-18.816-11.584-34.048-29.696-33.984-18.112-0.064-30.912 15.168-30.912 33.92L513.472 527.872 442.496 451.008c-12.8-12.864-33.6-12.864-46.464 0C383.168 463.744 377.344 484.544 390.208 497.344L523.136 630.4c0.576 0.64 1.408 0.896 2.048 1.344 2.624 2.24 5.376 4.352 8.64 5.76 3.648 1.344 5.568 2.048 9.344 2.24C543.68 639.744 544.064 640 544.576 640c0.704 0 1.344-0.384 2.048-0.384C550.144 639.36 547.328 638.848 550.72 637.504c3.776-1.6 10.432-3.968 13.312-6.784C564.224 630.592 564.416 630.528 564.544 630.4l129.792-132.992C700.736 491.008 704 482.624 704 474.176z" fill="#edffff" p-id="3020"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

7
src/js/SatelliteEntity.js
View File

@ -56,7 +56,11 @@ class SatelliteEntity {
description: this.name, description: this.name,
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start: start, stop: stop })]), availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start: start, stop: stop })]),
position: this._getPositionProperty(), position: this._getPositionProperty(),
point: { pixelSize: 8, color: Cesium.Color.fromRandom({ alpha: 1.0 }) }, point: {
pixelSize: 8,
color: Cesium.Color.fromRandom({ alpha: 1.0 }),
// scaleByDistance: new Cesium.NearFarScalar(1.5e3, 1, 8.0e8, 0.5),
},
path: new Cesium.PathGraphics({ path: new Cesium.PathGraphics({
width: 1, width: 1,
show: false, show: false,
@ -74,7 +78,6 @@ class SatelliteEntity {
verticalOrigin: Cesium.VerticalOrigin.TOP, verticalOrigin: Cesium.VerticalOrigin.TOP,
horizontalOrigin: Cesium.VerticalOrigin.LEFT, horizontalOrigin: Cesium.VerticalOrigin.LEFT,
pixelOffset: new Cesium.Cartesian2(0, 5), pixelOffset: new Cesium.Cartesian2(0, 5),
// scaleByDistance: new Cesium.NearFarScalar(1.5e3, 1.5, 8.0e7, 0.0),
fillColor: Cesium.Color.WHITE, fillColor: Cesium.Color.WHITE,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 5000000), distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 5000000),
} }

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

@ -27,6 +27,7 @@
color: #edffff; color: #edffff;
fill: #edffff; fill: #edffff;
cursor: pointer; cursor: pointer;
margin-right: 5px;
} }
.menu_button:hover { .menu_button:hover {
@ -38,6 +39,12 @@
} }
} }
.add_satellite {
display: flex;
justify-content: center;
padding: 10px;
}
.el-drawer { .el-drawer {
background-color: rgba($color: #303336, $alpha: 0.9); background-color: rgba($color: #303336, $alpha: 0.9);
color: #fff; color: #fff;

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

@ -4,16 +4,13 @@
<div class="menu_button" @click="drawer = !drawer"> <div class="menu_button" @click="drawer = !drawer">
<img src="../../assets/menu.svg" width="28" height="28" alt=""> <img src="../../assets/menu.svg" width="28" height="28" alt="">
</div> </div>
<div class="menu_button" @click="drawerImport = !drawerImport">
<img src="../../assets/import.svg" width="28" height="28" alt="">
</div>
</div> </div>
<!-- 抽屉 --> <!-- 抽屉1 -->
<el-drawer v-model="drawer" title="卫星选择" direction="ltr"> <el-drawer v-model="drawer" title="控制面板" direction="ltr">
<el-checkbox-group v-model="checked" @change="handleSatelliteChange" :max=5> <el-row style="padding-bottom: 10px;">
<template v-for="(item, index) in allSatellite" :key="index">
<el-row v-if="item.type === 'title'" class="satellite_type">{{ item.label }}</el-row>
<el-checkbox v-if="!item.type" :label="item.value">{{ item.label }}</el-checkbox>
</template>
</el-checkbox-group>
<el-row style="padding: 30px 0px;">
<el-button type="primary" @click="clearTLECache"> <el-button type="primary" @click="clearTLECache">
清除TLE缓存 清除TLE缓存
</el-button> </el-button>
@ -22,6 +19,28 @@
清除轨道 清除轨道
</el-button> </el-button>
</el-row> </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>
<el-checkbox v-if="!item.type" :label="item.value">{{ item.label }}</el-checkbox>
</template>
</el-checkbox-group>
</el-drawer>
<!-- 抽屉2 -->
<el-drawer v-model="drawerImport" title="自定义卫星数据" direction="ltr">
<el-input v-model="tleData" type="textarea" placeholder="Please input tle data" :rows="20" />
<el-row class="add_satellite">
<el-button type="primary" @click="handleAddSatellite">
添加
</el-button>
<el-button type="default" @click="handleImportSatellite">
导入
</el-button>
<el-button type="danger" @click="handleClearSatellite">
清空
</el-button>
</el-row>
</el-drawer> </el-drawer>
</template> </template>
@ -50,14 +69,24 @@ let viewer;
const totalSeconds = 86400; const totalSeconds = 86400;
// 保存所有的卫星实例 // 保存所有的卫星实例
const satelliteMap = new Map(); const satelliteMap = new Map();
// 自定义的卫星
const customSatelliteMap = new Map();
// 响应式数据 // 响应式数据
const drawer = ref(false); const drawer = ref(false);
const drawerImport = ref(false);
const checked = ref([1]); const checked = ref([1]);
const clickedSatelliteArray = []; const clickedSatelliteArray = [];
let tleData = ref(`BEIDOU-3 G2
1 45344U 20017A 23037.82027362 -.00000136 00000+0 00000+0 0 9994
2 45344 1.9879 4.6761 0000950 328.7503 178.5761 1.00272999 10962
BEIDOU-3 G3
1 45807U 20040A 23037.85365455 -.00000347 00000+0 00000+0 0 9999
2 45807 0.9369 314.6571 0008244 342.4957 257.2704 1.00264764 9772`);
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYjZmMWM4Ny01YzQ4LTQ3MzUtYTI5Mi1hNTgyNjdhMmFiMmMiLCJpZCI6NjIwMjgsImlhdCI6MTYyNjY3MTMxNX0.5SelYUyzXWRoMyjjFvmFIAoPtWlJPQMjsVl2e_jQe-c'; Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYjZmMWM4Ny01YzQ4LTQ3MzUtYTI5Mi1hNTgyNjdhMmFiMmMiLCJpZCI6NjIwMjgsImlhdCI6MTYyNjY3MTMxNX0.5SelYUyzXWRoMyjjFvmFIAoPtWlJPQMjsVl2e_jQe-c';
@ -130,6 +159,22 @@ function parseTle(data = "") {
return tles; return tles;
} }
function parseTleWithSimpleSplit(data = "") {
if (data.length === 0) return;
let result = data.split("\n");
let tles = [], i = 0, tem = [];
result.forEach(item => {
i++;
tem.push(item)
if (i === 3) {
tles.push(tem.join("\r\n"));
tem = [];
i = 0;
}
});
return tles;
}
function addCesiumEventListener() { function addCesiumEventListener() {
let callback = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); let callback = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
@ -166,6 +211,36 @@ function clearSatelliteOrbit() {
} }
} }
// 添加自定义卫星实例
function handleAddSatellite() {
if (!tleData.value.length) return;
clearcustomSatelliteMap();
let result = parseTleWithSimpleSplit(tleData.value);
result.forEach(tle => {
let satellite = new SatelliteEntity(tle);
let cesiumSateEntity = satellite.createSatelliteEntity();
let result = viewer.entities.add(cesiumSateEntity);
customSatelliteMap.set(satellite.name, result)
});
}
function handleImportSatellite() {
}
// 清空所有状态，输入框和cesium实例
function handleClearSatellite() {
clearcustomSatelliteMap();
tleData.value = "";
}
// 清空卫星实例;
function clearcustomSatelliteMap() {
customSatelliteMap.forEach(item => viewer.entities.remove(item));
customSatelliteMap.clear();
}
// 获取tle数据，从缓存中获取，若无请求数据 // 获取tle数据，从缓存中获取，若无请求数据