Polyline between two moving objects using Entity API

CesiumJS
1

1. A concise explanation of the problem you're experiencing.

I have two moving objects. I'd like to draw a polyline between them using the Entity API, but I get an e.slice() is not a function error.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

movingTwo.polyline = new Cesium.Polyline({
    positions: new Cesium.PositionPropertyArray([
        new Cesium.ReferenceProperty(
            veiwer.entities,
            movingOne.id,
            [ 'position' ]
        ),
        new Cesium.ReferenceProperty(
            viewer.entities,
            movingTwo.id,
            [ 'position' ]
        )
    ]),
    material: new Cesium.ColorMaterialProperty(
        Cesium.Color.YELLOW.withAlpha( 0.25 )
    )
})

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

There seem to be examples of this working with CZML, but no working example of achieving this with the Entity API. I've followed this StackOverflow post but I get an error 'e.slice() is not a function.

4. The Cesium version you're using, your operating system and browser.

V1.37 with Chrome.

2

Hi Dan,

That Stack Overflow response is a pretty old example. Here’s a newer example showing updating positions of a polyline using a callback property.

Thanks!

Gabby

3

Hi Dan,

Here’s an alternative using the CallbackProperty API - https://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=1d17534dfe883c4174e301db8894bba2

Click & drag the red points around the map, and you’ll see that the blue polyline connects the points wherever you drag them! The callback updates the polyline positions to the position of the entities in the EntityCollection that’s passed to the function. It works for more than 2 entities as well.

The function doing this is on line 121, createPolyline.

Also here for reference:

/**

  • Creates a polyline between the given coordinates and displays it

  • on the map

*/

function createPolyline(

entities, //: Cesium.EntityCollection,

color, //: Cesium.Color,

viewer, //: Cesium.Viewer,

pointName //: string

) { //: Cesium.Entity {

let positions = ;

let timeNow = Cesium.JulianDate.now();

let positionCallback = () => {

if (positions.length === 0) {

entities.values.forEach(function(entity) {

positions.push(entity.position.getValue(timeNow));

});

} else if (positions.length > 0) {

positions[0] = entities.values[0].position.getValue(timeNow);

positions[1] = entities.values[1].position.getValue(timeNow);

entities.values.forEach(function(entity, i) {

positions[i] = entity.position.getValue(timeNow);

});

}

return positions;

};

let positionCBP = new Cesium.CallbackProperty(positionCallback, false);

let polyline = new Cesium.PolylineGraphics({

positions: positionCBP,

material: color,

width: 5

});

let myPolyline = new Cesium.Entity({

polyline: polyline,

name: pointName

});

viewer.entities.add(myPolyline);

}

``

4

Both links are not working. Is there any new link?

5

Yes, all sandcastle links are broken because the base url changed.
from

cesiumjs.org/Cesium/Apps/Sandcastle/index.html

to

6

OK but the URL above is just to the main sandcastle site. The old URL using the new domain name cannot be found.

7

Just copy the URL params…