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!

score 8 · Accepted Answer · answered Nov 10 '15 at 21:43

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

I have to wait one more day before I can accept my own answer. Yours was definitely pivotal in getting me headed in the right direction though, much appreciated! — Brian Putnam, Nov 11 '15 at 19:12

score 2 · Answer 2 · answered Nov 10 '15 at 20:19

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.

answered Nov 10 '15 at 20:19

emackey

11,818
2
38
58

1

I've been tinkering with that a bit, and the piece I'm stuck on is how to translate `"positions": { "references": [ ... ] }` [here](https://github.com/AnalyticalGraphicsInc/cesium/blob/1.15/Apps/SampleData/simple.czml#L211). My best guess is that it involves [ReferenceProperty](http://cesiumjs.org/Cesium/Build/Documentation/ReferenceProperty.html) somehow, but that seems to track a single property and I need to track 2 (the position property of both entities) – Brian Putnam Nov 10 '15 at 20:40

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

2 Answers2