'联通数据'

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;
     }

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());
+    });
 })