PolylineCollection following the surface with material

CesiumJS
1

I made this question in another post but I think it merits it’s own:

I’m having trouble with the PolylineCollection/Polyline examples. With this code I can add the Polyline to the collection:

    var polylines = new Cesium.PolylineCollection();
    polylines.add({
        positions : Cesium.Shapes.computeCircleBoundary(
        ellipsoid, ellipsoid.cartographicToCartesian(
            new Cesium.Cartographic.fromDegrees(-82.0, 37.0)), 300000.0)
    });
    primitives.add(polylines);

``

…but:

So I’m in a situation where I can either add the bendable line (per the sandbox) or have an updateable collection with no bendable and material lines (per the above code).

Below is a screen capture of the PolylineCollection output. Notice it is not following the surface.

The docs also don’t give good examples on either.

Any help will be appreciated.

2

Hello,

We recommend that you use the entity API instead of a PolylineCollection to add polylines because it will handle the surface fitting and material updating for you. You can change the material at any time by setting entity.polyline.material to a new value. You can update the positions or any other property by setting it to a new value also.

The code you have from the old forum post is no longer supported. Look at the code in the sandcastle example http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Polyline.html&label=Geometries

Let me know if you have any questions, I would be happy to help.

Best,

Hannah

3

based on the sandcastle code I made this change to use EntityCollection (which doesn’t work):

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var lines = new Cesium.EntityCollection();

viewer.entities.add(lines);

var glowingLine = lines.add({
name : ‘Glowing blue line on the surface’,
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray([-75, 37,
-125, 37]),
width : 10,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.2,
color : Cesium.Color.BLUE
})
}
});

var orangeOutlined = lines.add({
name : ‘Orange line with black outline at height and following the surface’,
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 39, 250000,
-125, 39, 250000]),
width : 5,
material : new Cesium.PolylineOutlineMaterialProperty({
color : Cesium.Color.ORANGE,
outlineWidth : 2,
outlineColor : Cesium.Color.BLACK
})
}
});

var purpleArrow = lines.add({
name : ‘Purple straight arrow at height’,
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, 500000,
-125, 43, 500000]),
width : 10,
followSurface : false,
material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)
}
});

viewer.zoomTo(viewer.entities);

``

what am i doing wrong?

4

i just need to be able to add/remove lines arbitrarily and for the life of me i haven’t been able to figure this out based on the current docs

5

Is there a reason you need the lines in it’s own collection? Here is an example of adding a line and removing it after 3 seconds:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var redLine = viewer.entities.add({
name : ‘Red line on the surface’,
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
-125, 35]),
width : 5,
material : Cesium.Color.RED
}
});

setTimeout(function(){
viewer.entities.remove(redLine);
}, 3000);

viewer.zoomTo(viewer.entities);

``

Is this what you’re looking for?

-Hannah

6

viewer.entities already is an EntityCollection, just add/remove directly into it.

7

yeah ended up doing that.

i thought i could have an abstraction and lines.add/remove but that proved to be impossible for me. i thought this approach was better, per several parts of the docs:

“For best performance, prefer a few collections, each with many points, to many collections with only a few points each.”
i thought this applied to entity collections also.

i could not get entity collections to work anyway… going straight to the viewer.entities now

thanks

8

try this

material: Cesium.Material.fromType(‘Color’, {

color: Cesium.Color.YELLOW

})