How can I create a moving line between two entities in CesiumJS?

Question

I have two entities on my page; a satellite and its "ground position", both of which move as time passes in Cesium. I'd like to connect the two with a straight line that moves with them.

The CZML Showcase seems to demonstrate similar functionality if you're using a CZML file, but I would like to know how to do this in code. Their demo contains several lines between satellites and ground positions, and in fact they go one step further and only show the line if it doesn't intersect the earth (if line-of-sight exists between the two entities). I don't need anything quite that fancy.

Are there any good examples of this, or docs that someone could point me to? Thanks!

Answer 1

Figured it out: @emackey started me on the right track by pointing me at this section of simple.czml. The part I had trouble translating from CZML to javascript was this section that dynamically specifies where the line should begin and end:

"positions":{
  "references":[
    "Facility/AGI#position","Satellite/ISS#position"
  ]
}

It turns out the classes I needed for that were PositionPropertyArray and ReferenceProperty. With those two I can add a dynamic line to either of my entities like this:

var groundTrackEntity = cesiumViewer.entities.add({
    id: "groundTrackEntity",
    position: groundTrackPosition,
    point: /* ... */,
    path: /* ... */,
    polyline: {
        followSurface: false,
        positions: new Cesium.PositionPropertyArray([
            new Cesium.ReferenceProperty(
                cesiumViewer.entities,
                'orbitEntity',
                [ 'position' ]
            ),
            new Cesium.ReferenceProperty(
                cesiumViewer.entities,
                'groundTrackEntity',
                [ 'position' ]
            )
        ]),
        material: new Cesium.ColorMaterialProperty(
            Cesium.Color.YELLOW.withAlpha( 0.25 )
        )
    }
});

Answer 2

This is done by adding PolylineGraphics to one of your entities. Make sure to set "followSurface": false for this, since you don't want the line to bend with the curvature of the Earth. The options here are similar to what you see in simple.czml, except you don't need the list of visibility intervals, and can simply set "show": true here.