diff --git a/src/js/SatelliteEntity.js b/src/js/SatelliteEntity.js index eddcfdd..46f91ad 100644 --- a/src/js/SatelliteEntity.js +++ b/src/js/SatelliteEntity.js @@ -6,18 +6,21 @@ class SatelliteEntity { constructor(tle = "", options = {}) { const [name, tleLine1, tleLine2] = this._checkTle(tle); + this.name = name; - this.tleLine1 = tleLine1; - this.tleLine2 = tleLine2; + this.tleLine1 = tleLine1.trim(); + this.tleLine2 = tleLine2.trim(); this.satrec = twoline2satrec(this.tleLine1, this.tleLine2); - this.totalSeconds = options.totalSeconds || 864000;// 864000 - this.stepSeconds = options.stepSeconds || 30; + this.totalSeconds = 864000;// 864000 + this.stepSeconds = 300; + this.leadTime = 5822; + this.trailTime = 0; } _checkTle(tle) { - let elements = tle.split('\r\n'); + let elements = tle.split('\n'); if (elements.length !== 3) throw new Error("tle data error"); return elements; } @@ -30,13 +33,12 @@ class SatelliteEntity { // 创建PositionProperty _getPositionProperty() { const start = Cesium.JulianDate.fromIso8601(new Date().toISOString()); - const positionProperty = new Cesium.SampledPositionProperty(Cesium.ReferenceFrame.INERTIAL); // 使用惯性坐标系 + const positionProperty = new Cesium.SampledPositionProperty(Cesium.ReferenceFrame.INERTIAL); let now = Date.now(); for (let i = 0; i < this.totalSeconds / this.stepSeconds; i++) { let sateTime = new Date(now + i * this.stepSeconds * 1000); - let sateCoord = this.orbitGenerator.getPositionECI(sateTime); - + let sateCoord = this.getPositionEci(sateTime); 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); @@ -50,34 +52,17 @@ class SatelliteEntity { const stop = Cesium.JulianDate.addSeconds(start, this.totalSeconds, new Cesium.JulianDate()); let satelliteEntity = { name: this.name, - description: '', + description: this.name, availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start: start, stop: stop })]), position: this._getPositionProperty(), - billboard: { - image: '/model/satellite.png', - width: 36, - height: 36, - }, + point: { pixelSize: 6, color: Cesium.Color.RED }, path: new Cesium.PathGraphics({ - show: this.pathShow, - width: 1, + width: 0.5, + show: false, leadTime: this.leadTime, trailTime: this.trailTime, material: Cesium.Color.LIME }), - orientation: new Cesium.VelocityOrientationProperty(positionProperty), - label: new Cesium.LabelGraphics({ - text: this.satelliteName, - pixelOffset: new Cesium.Cartesian2(0, -40), - font: '14px caption', - fillColor: Cesium.Color.WHITE, - horizontalOrigin: Cesium.HorizontalOrigin.LEFT, - verticalOrigin: Cesium.VerticalOrigin.TOP, - showBackground: true, - backgroundColor: new Cesium.Color(0, 0, 0, 0.5), - scale: 0.8 - }), - type: 'satellite' } return satelliteEntity; } diff --git a/src/views/satellite-track/SatelliteTrack.vue b/src/views/satellite-track/SatelliteTrack.vue index 2f30c64..7f7fbb9 100644 --- a/src/views/satellite-track/SatelliteTrack.vue +++ b/src/views/satellite-track/SatelliteTrack.vue @@ -14,14 +14,23 @@ import "./SatelliteTrack.scss" import { getTleWithLastThirtyDays } from '@/http/index' +import SatelliteEntity from '@/js/SatelliteEntity'; + window.CESIUM_BASE_URL = '/cesium'; let viewer; +const totalSeconds = 864000; Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYjZmMWM4Ny01YzQ4LTQ3MzUtYTI5Mi1hNTgyNjdhMmFiMmMiLCJpZCI6NjIwMjgsImlhdCI6MTYyNjY3MTMxNX0.5SelYUyzXWRoMyjjFvmFIAoPtWlJPQMjsVl2e_jQe-c'; function initCesium() { + // 复写原型方法 用于timeline组件日期格式化; + Cesium.Timeline.prototype.makeLabel = function (time) { + let minutes = 0 - new Date().getTimezoneOffset(); + let dataZone8 = Cesium.JulianDate.addMinutes(time, minutes, new Cesium.JulianDate()); + return Cesium.JulianDate.toIso8601(dataZone8).slice(0, 19); + } let imgLayer = new Cesium.MapboxImageryProvider({ mapId: 'mapbox.satellite', @@ -34,11 +43,19 @@ function initCesium() { baseLayerPicker: false, geocoder: false, navigationHelpButton: false, + infoBox: false }); - // const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings()); - - + // 时间格式化 + let minutes = 0 - new Date().getTimezoneOffset(); // 0 - (-480); + viewer.animation.viewModel.timeFormatter = function (date, viewModel) { + let dataZone8 = Cesium.JulianDate.addMinutes(date, minutes, new Cesium.JulianDate()); + return Cesium.JulianDate.toIso8601(dataZone8).slice(11, 19); + } + viewer.animation.viewModel.dateFormatter = function (date, viewModel) { + let dataZone8 = Cesium.JulianDate.addMinutes(date, minutes, new Cesium.JulianDate()); + return Cesium.JulianDate.toIso8601(dataZone8).slice(0, 10); + } Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees( 75.0, // 西经 @@ -48,10 +65,55 @@ function initCesium() { ); } +function initTimeLine() { + const start = Cesium.JulianDate.fromIso8601(new Date().toISOString()); + const stop = Cesium.JulianDate.addSeconds(start, totalSeconds, new Cesium.JulianDate()); + viewer.clock.startTime = start.clone(); + viewer.clock.stopTime = stop.clone(); + viewer.clock.currentTime = start.clone(); + viewer.timeline.zoomTo(start, stop); + viewer.clock.multiplier = 1; + viewer.clock.shouldAnimate = true; + viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; +} + +function parseTle(data = "") { + if (data.length === 0) return; + let result = data.split("\r\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() { + let that = this; + let callback = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);// 还原点击聚焦方块的效果。 + viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { + callback(movement); + }, Cesium.ScreenSpaceEventType.LEFT_CLICK); +} + onMounted(async () => { initCesium(); + initTimeLine(); + addCesiumEventListener(); + let result = await getTleWithLastThirtyDays(); - console.log(result); + let parsedResult = parseTle(result); + + parsedResult.forEach(tle => { + let satellite = new SatelliteEntity(tle); + viewer.entities.add(satellite.createSatelliteEntity()); + }); })