cesium/satellite-track
1
0
Fork 0
mirror of https://github.com/jiangteng2019/satellite-track.git synced 2025-06-16 14:58:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

'增加轨道可视化'

Browse Source
This commit is contained in:
jiangteng 2023-02-01 17:34:22 +08:00
parent 91ee7dfcbd
commit de22cc18ee
3 changed files with 42 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -5,7 +5,7 @@
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>satellite-track/</title>
<title>satellite-track</title>
</head>
<body>

32
src/js/SatelliteEntity.js
View File

@ -5,16 +5,16 @@ class SatelliteEntity {
constructor(tle = "", options = {}) {
const [name, tleLine1, tleLine2] = this._checkTle(tle);
let circle = tleLine2.slice(52, 64);
this.name = name;
this.name = name.trim();
this.tleLine1 = tleLine1.trim();
this.tleLine2 = tleLine2.trim();
this.satrec = twoline2satrec(this.tleLine1, this.tleLine2);
this.totalSeconds = 864000;// 864000
this.stepSeconds = 300;
this.leadTime = 5822;
this.stepSeconds = 150;
this.leadTime = parseInt(24 * 3600 / circle);
this.trailTime = 0;
}
@ -39,6 +39,7 @@ class SatelliteEntity {
for (let i = 0; i < this.totalSeconds / this.stepSeconds; i++) {
let sateTime = new Date(now + i * this.stepSeconds * 1000);
let sateCoord = this.getPositionEci(sateTime);
if (!sateCoord) continue;
const cesiumTime = Cesium.JulianDate.addSeconds(start, i * this.stepSeconds, new Cesium.JulianDate());
const cesiumPosition = { x: sateCoord.x * 1000, y: sateCoord.y * 1000, z: sateCoord.z * 1000 };
positionProperty.addSample(cesiumTime, cesiumPosition);
@ -55,19 +56,32 @@ class SatelliteEntity {
description: this.name,
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start: start, stop: stop })]),
position: this._getPositionProperty(),
point: { pixelSize: 6, color: Cesium.Color.RED },
point: { pixelSize: 8, color: Cesium.Color.fromRandom({ alpha: 1.0 }) },
path: new Cesium.PathGraphics({
width: 0.5,
width: 1,
show: false,
leadTime: this.leadTime,
trailTime: this.trailTime,
material: Cesium.Color.LIME
material: Cesium.Color.LIME,
}),
label: {
text: this.name,
font: '12px sans-serif',
scale: 0.8,
showBackground: true,
backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.5),
backgroundPadding: new Cesium.Cartesian2(4, 4),
outlineWidth: 1,
verticalOrigin: Cesium.VerticalOrigin.TOP,
horizontalOrigin: Cesium.VerticalOrigin.LEFT,
pixelOffset: new Cesium.Cartesian2(0, 5),
// scaleByDistance: new Cesium.NearFarScalar(1.5e3, 1.5, 8.0e7, 0.0),
fillColor: Cesium.Color.WHITE,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 5000000),
}
}
return satelliteEntity;
}
}
export default SatelliteEntity

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

@ -8,7 +8,7 @@
import * as Cesium from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
import { onMounted } from 'vue';
import { onMounted, onBeforeMount } from 'vue';
import "./SatelliteTrack.scss"
@ -17,12 +17,11 @@ import { getTleWithLastThirtyDays } from '@/http/index'
import SatelliteEntity from '@/js/SatelliteEntity';
console.log(import.meta.env.MODE)
window.CESIUM_BASE_URL = import.meta.env.MODE === 'development' ? '/cesium' : '/satellite-track/cesium';
let viewer;
const totalSeconds = 864000;
const satelliteMap = new Map();
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYjZmMWM4Ny01YzQ4LTQ3MzUtYTI5Mi1hNTgyNjdhMmFiMmMiLCJpZCI6NjIwMjgsImlhdCI6MTYyNjY3MTMxNX0.5SelYUyzXWRoMyjjFvmFIAoPtWlJPQMjsVl2e_jQe-c';
@ -96,12 +95,23 @@ function parseTle(data = "") {
return tles;
}
//处理点击事件
function addCesiumEventListener() {
let that = this;
let callback = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);// 还原点击聚焦方块的效果。
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
callback(movement);
const pickedFeature = viewer.scene.pick(movement.position);
console.log(pickedFeature);
if (!Cesium.defined(pickedFeature)) {
satelliteMap.forEach(item => {
item.path.show = false;
})
return;
}
if (pickedFeature) {
pickedFeature.id.path.show = new Cesium.ConstantProperty(true);
pickedFeature.id.label.distanceDisplayCondition = undefined;
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
@ -115,7 +125,9 @@ onMounted(async () => {
parsedResult.forEach(tle => {
let satellite = new SatelliteEntity(tle);
viewer.entities.add(satellite.createSatelliteEntity());
let cesiumSateEntity = satellite.createSatelliteEntity();
let result = viewer.entities.add(cesiumSateEntity);
satelliteMap.set(satellite.name, result);
});
})