如何在铯中使用折线创建轨道线？

Question

所以我正在尝试使用 Cesium.js 和 Satellite.js 创建一个卫星跟踪器。经过无数次尝试，我仍然无法使用折线创建一条线来显示卫星的轨道路径。我设法显示了一个类似于绕地球运行的卫星的点，我只需要实际的线来帮助可视化。

我已多次查看 Cesium 文档，但大多数示例似乎都不起作用。

如果有人能提供帮助，我将不胜感激！

const viewer = new Cesium.Viewer('cesiumContainer', {
          imageryProvider: new Cesium.TileMapServiceImageryProvider({
          url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
        }),
        geocoder: false, infoBox: false,
        navigationHelpButton: false
      });
      viewer.scene.globe.enableLighting = true;

    const polylines = new Cesium.PolylineCollection({show: true});
          let currentTLE;
          function plotSAT() {
            for (let i = 0; i < listOfTLE.length; i++) {
              try {
                currentTLE = listOfTLE[i];
              
                const TLErec = satellite.twoline2satrec(
                currentTLE.split('\n')[0].trim(), 
                currentTLE.split('\n')[1].trim()
                );
               
                const totalSeconds = 60 * 60 * 6;
                const timestepInSeconds = 10;
                const start = Cesium.JulianDate.fromDate(new Date());
                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 = 40;
                viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
                
                const positionsOverTime = new Cesium.SampledPositionProperty();
                let p;
                let position;
                
                  for (let i = 0; i < totalSeconds; i+= timestepInSeconds) {
                  const time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
                  const jsDate = Cesium.JulianDate.toDate(time);

                  const positionAndVelocity = satellite.propagate(TLErec, jsDate);
                  const gmst = satellite.gstime(jsDate);
                  p   = satellite.eciToGeodetic(positionAndVelocity.position, gmst);

                  position = Cesium.Cartesian3.fromRadians(p.longitude, p.latitude, p.height * 1000);
                  positionsOverTime.addSample(time, position);
                }
                //Set Random Color
                let randomColor = Math.floor(Math.random()*16777215).toString(16);
                
                // Visualize the satellite with a red dot.
                const satellitePoint = viewer.entities.add({
                  position: positionsOverTime,
                  point: { pixelSize: 5, color: Cesium.Color.fromCssColorString(`#${randomColor}`) },
                });
                const orbitalLine = polylines.add({
                  show: true,  
                  id: i,
                    positions: positionsOverTime,
                    material: Cesium.Material({
                      fabric: {
                        type: 'Color',
                        uniforms: {
                          color: Cesium.Color.fromCssColorString(`#${randomColor}`)
                        }
                      },
                    }),
                  })
                  viewer.entities.add(polylines);
            
              } catch(err) {
                console.log(`Error Loading TLE: ${currentTLE}`);
                continue;
              }
            } 
          }

          plotSAT();
          polylines.update();

          // Wait for globe to load then zoom out     
          let initialized = false;
          viewer.scene.globe.tileLoadProgressEvent.addEventListener(() => {
            if (!initialized && viewer.scene.globe.tilesLoaded === true) {
              viewer.clock.shouldAnimate = true;
              initialized = true;
              viewer.scene.camera.zoomOut(7000000);
              document.querySelector("#loading").classList.toggle('disappear', true)
            }
          });

这是我需要帮助的具体部分：

// Visualize the satellite with a red dot.
            const satellitePoint = viewer.entities.add({
              position: positionsOverTime,
              point: { pixelSize: 5, color: Cesium.Color.fromCssColorString(`#${randomColor}`) },
            });
            const orbitalLine = polylines.add({
              show: true,  
              id: i,
                positions: positionsOverTime,
                material: Cesium.Material({
                  fabric: {
                    type: 'Color',
                    uniforms: {
                      color: Cesium.Color.fromCssColorString(`#${randomColor}`)
                    }
                  },
                }),
              })
              viewer.entities.add(polylines);

Answer 1

我设法通过将位置添加到查看器实体中的折线而不是使用折线集合，为单个 TLE 工作：

  const totalSeconds = 60 * 60 * 6;
  const timestepInSeconds = 10;
  const start = JulianDate.fromDate(new Date());

  const positions = [];

  for (let i = 0; i < totalSeconds; i += timestepInSeconds) {
    const time = JulianDate.addSeconds(start, i, new JulianDate());
    const jsDate = JulianDate.toDate(time);

    const positionAndVelocity = propagate(TLErec, jsDate);
    const gmst = gstime(jsDate);
    Log.debug("position and velocity: ", positionAndVelocity)
    // @ts-ignore
    const p = eciToGeodetic(positionAndVelocity.position, gmst);

    const position = Cartesian3.fromRadians(p.longitude, p.latitude, p.height * 1000);
    positions.push(position);
  }

  viewer.entities.add({
    name: "orbit line",
    polyline: {
      positions: positions,
      material: Color.RED,
      width: 1,
    }
  });

注意：关于将折线集合添加到图元而不是实体的答案，也可能值得参考。 How to display a polyline collection in Cesium?