Creating polyline from array of x, y, z

CesiumJS
1

Hello!

I’m currently working on a project to visualize satellites in GEO and their orbits. I was able to successfully plot the satellites using their x, y, z positions. I’m using satellite.js to calculate that position based off of the satellite’s TLEs.

Screen Shot 2020-06-16 at 8.43.29 PM
Screen Shot 2020-06-16 at 8.43.29 PM2088×796 93.9 KB

However, I’m having trouble getting Cesium to display the orbital path. I’m calculating the points along that path in the same way & propagating the satellite forward in time. Which is generating an array that looks like this [x, y, z, x, y, z, x, y, z,...]. That format works with Cesium.Cartesian3.fromDegreesArrayHeights and .fromRadiansArrayHeights, but I don’t see an equivalent if you’re using x, y, z positioning (instead of long, lat, height). I’d be very grateful if someone could point me in the right direction.

const satrec = satellite.twoline2satrec(tle[0], tle[1])

const positionAndVelocity = satellite.propagate(satrec, time)
const positionEci = positionAndVelocity.position
const { x, y, z } = positionEci

let orbit = []
const newTime = time
for (let i = 0; i <= 20; i++) {
   // figure out the time
   newTime.setMinutes(newTime.getMinutes() + i * 10)
   // get the coordinates at the new time
   let positionAndVelocity = satellite.propagate(satrec, newTime)
   let positionEci = positionAndVelocity.position
   const { x, y, z } = positionEci
   // update the orbit
   orbit = orbit.concat([x, y, z])
}

viewer.entities.add({
  id: sat.id,
  position: Cesium.Cartesian3.fromElements(
    x * 1000,
    y * 1000,
    z * 1000
  ),
  point: {
     pixelSize: 5,
     color: Cesium.Color.RED,
     outlineColor: Cesium.Color.WHITE,
     outlineWiddth: 2
  },
  polyline: {
     positions: Cesium.Cartesian3.fromArray(orbit), // This isn't correct
     width: 5,
     followSurface: true,
     material: Cesium.Color.BLUE
  }
})
1 Like
2

You can create a polyline out of an array of x/y/z Cartesian points, like in this example: https://sandcastle.cesium.com/index.html?src=Polyline.html but instead of Cesium.Cartesian3.fromDegreesArray use Cesium.Cartesian3.fromArray. See: https://cesium.com/docs/cesiumjs-ref-doc/Cartesian3.html#.fromArray

Let me know if this helps. This looks like a cool project! Is it publicly accessible? Where do you get your satellite TLEs?

3

Hi there! Thanks so much for the response. Unfortunately, I’m quite sure how to do what you suggested, since I’m currently using the Cesium.Cartesian3.fromArray and it’s not generating anything. :sweat_smile:Is there other information I can provide to help troubleshoot why that might be?

The project is not public yet, but will be when it is finished. :slight_smile: This is a project in partnership with UT Austin and they’re providing the TLE data.

4

Hi. But instead of using fromArray, try creating an array of Cartesian3 objects yourself. And then use PathGraphics for visualization. You may need to use data interpolation to improve the display result.

5

Hi there, thanks for answering. Do you happen to have an example of what it is you’re describing? I’m pretty new to Cesium and I guess I’m not sure what PathGraphics are or how they differ from what I’ve done. I’m not seeing any obvious examples in the Sandcastle either.

6

I’m new too. I don’t know whether it will help you or not.

7

Can you share a Sandcastle of your issue that I can run? See: How to share custom Sandcastle examples

I would expect that to work. Also I’d definitely love to see it on here when it’s ready!

8

Sure thing. One question - how do you include 3rd party libraries in Sandcastle? As mentioned above, I use satellite.js to do these calculations, but I can’t seem to include it in the Sandcastle. I added the <script> tag with a link to the CDN to the “HTML body & CSS” tab, but when I reference satellite in the JS tab, it says that it is not defined.

Thanks so much for your help and patience with this. It’s much appreciated!

9

I would have expected that to work - my best guess is that the JavaScript code is running before that script tag executes to load the library.

You could use any other hosting service to share it, like CodePen or Glitch as the getting started guide shows. Or the easier thing might be to just extract a list of positions and put that in the Sandcastle. That way it’s a minimal example that focuses on the issue.

10

Got it, thank you!

Here is my sandcastle with just one satellite & the code for its orbit. It worked great until I added the polyline for the orbit, and then it gave me the error “At least two positions are required”.

11

Looks like we misread the doc here. Cartesian3.fromArray creates just one Cartesian3 from a given array. What you want is to create an array of Cartesian3. There’s no built-in helper function but you can write your own. Here’s a Sandcastle example showing this.

I had to limit it to the first 72 points, because adding the 73rd point to the line seems to cause a crash:

DeveloperError: Expected value to be greater than or equal to0.0125, actual value was 0.009559947096137833

As far as I can tell, this is breaking a computation with curving the lines to the Earth’s surface. You can set the arcType to NONE since you have the the 3D positions of the points on the line and don’t need to interpolate it along the surface of the Earth.

1 Like
12

Thanks so much for your help, that looks great! I’m not too worried about the orbit path at the moment as I need to fix some of the calculations to generate that original array, but did just want to know that adding arcType: Cesium.ArcType.NONE, to the polyline didn’t seem to work either. Here’s a sandcastle if you’re interested in looking at it further, but otherwise, thanks so much for getting me started on the right path with this. I really appreciate it!

Screen Shot 2020-06-23 at 11.16.58 AM
Screen Shot 2020-06-23 at 11.16.58 AM1406×662 139 KB

1 Like