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

核心：、czml、.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 ionshouldAnimate: true,baseLayerPicker: false,geocoder: false,homeButton: false,navigationHelpButton: false,fullscreenButton: false,requestRenderMode: true,infoBox: false,selectionIndicator: false,automaticallyTrackDataSourceClocks: false // 自动追踪当前数据源时间})

文章插图
步骤二：加载tle文件，利用.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))

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