基于Cesium的卫星及空间碎片的轨迹展示

核心：cesium、czml、satellite.js、tle

下面简单介绍一下操作步骤，并展示部分代码（附上结果截图）

步骤一：初始化cesium

const viewer = new Viewer("cesiumContainer", {
        imageryProvider: new UrlTemplateImageryProvider({
          url: 'https://{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l=                
                {z}&tk=你申请的key', // 天地图
          subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
          maximumLevel: 18
        }),
        creditContainer: document.createElement("div"), // 不显示cesium ion
        shouldAnimate: true,
        baseLayerPicker: false,
        geocoder: false,
        homeButton: false,
        navigationHelpButton: false,
        fullscreenButton: false,
        requestRenderMode: true,
        infoBox: false,
        selectionIndicator: false,
        automaticallyTrackDataSourceClocks: false // 自动追踪当前数据源时间
      })

步骤二：加载tle文件，利用satellite.js获取某时刻的卫星/碎片的位置和速度

// 读取文件
const content_BEIDOU = this.readFile('/static/Satellites/BEIDOU.tle')

// 将读取的文件内容转换成tle的对象数组[{name:xx,tle1:xx,tle2:xx}]
const tles = this.content2tles(content_BEIDOU)

(此处只示意，省略部分代码。。。)

tles.forEach(tle => {
    let satrec = satellite.twoline2satrec(tle.tle1, tle.tle2)

    // 根据当前时间距tle两行数历元时刻的分钟数：time，计算当前卫星位置和速度
    let positionAndVelocity = satellite.sgp4(satrec, time) 

    let positionEci = positionAndVelocity.position // 地惯坐标系

    let velocityEci = positionAndVelocity.velocity

    ...
})

 

步骤三：基于步骤二，开始拼凑czml(具体czml结构参考 czml结构说明 )

let tempCZML = [] // 初始化czml数据，创建场景信息
    tempCZML.push({
        "id": "document",
        "name": "CZML Point - Time Dynamic",
        "version": "1.0",
        "clock": {
          "interval": `${initialTime}/${endTime}`,
          "multiplier": 1,
          "range": "LOOP_STOP",
          "step": "SYSTEM_CLOCK"
        }
     })

（此处只是示意，部分代码省略。。。）
let initialCZMLProps = { // 卫星或空间碎片
        "id": `${satrec.satnum}`,
        "name": `${sat_name}`,
        "availability": `${initialTime}/${endTime}`,
        "billboard": {
            "eyeOffset": {
              "cartesian": [
                0, 0, 0
              ]
            },
            "horizontalOrigin": "CENTER",
            "image": url,
            "pixelOffset": {
              "cartesian2": [
                0, 0
              ]
            },
            "scale": scale,
            "show": {
              "intervals": `${initialTime}/${endTime}`,
              "boolean":true
            },
            "verticalOrigin": "CENTER"
          },
          "position": {
            "interpolationAlgorithm": "LAGRANGE", // 采用拉格朗日插值法
            "interpolationDegree": 5, // 1为线性插值，2为平方插值...
            "referenceFrame": "INERTIAL", // 参考坐标系，地惯坐标系
            "epoch": `${initialTime}`,
            "cartesian": res
           }
       }
       tempCZML.push(initialCZMLProps)

步骤四：加载czml,展示目标轨迹

let czml = this.tles2czml(this.startTime, this.stopTime, tles, url)

window.viewer.dataSources.add(CzmlDataSource.load(czml))

附上截图：

最后说明一下，本人也是初学webgis，这个demo也是花费一周时间慢慢打磨出来的，希望各位同行大佬轻踩。当然，感兴趣的童鞋可以在下方评论交流，完结撒花！！！（记录时间：2022-10-26 0:23:12）