1

So I am trying to create a satellite tracker using Cesium.js and Satellite.js. After countless attempts, I am still unable to to use Polyline to create a line to show the orbital path of the satellite. I have managed to display a point that resembles the satellite orbiting the globe, I just need the actual line to aid the visualisation.

I have looked through the Cesium Documentation multiple times but most of the examples don't seem to work.

If anyone could help I would really appreciate it!

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

This is the specific part I need help with:

// 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);
CodeKeanu
  • 11
  • 2

1 Answers1

0

I managed to get this working for a single TLE by adding the positions to a polyline in the viewer entities, instead of using a Polylines Collection:

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

Note: it may also be worth referring to the answer here about adding the polyline collection to the primitives instead of entities. How to display a polyline collection in Cesium?

Tyler Puschinsky
  • 1
  • 1