PolylineCollection following the surface with material

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.

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

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?

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

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

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

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

try this

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

color: Cesium.Color.YELLOW

})