diff --git a/index.html b/index.html index df2cc94..b518e0a 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - satellite-track/ + satellite-track diff --git a/src/js/SatelliteEntity.js b/src/js/SatelliteEntity.js index 46f91ad..da3dfdb 100644 --- a/src/js/SatelliteEntity.js +++ b/src/js/SatelliteEntity.js @@ -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 \ No newline at end of file diff --git a/src/views/satellite-track/SatelliteTrack.vue b/src/views/satellite-track/SatelliteTrack.vue index 0b5d655..67f9883 100644 --- a/src/views/satellite-track/SatelliteTrack.vue +++ b/src/views/satellite-track/SatelliteTrack.vue @@ -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); }); })