Change the style of lines dynamically in Cesium

Question

The main part of code using Cesium.js is like that:

 var viewer = new Cesium.Viewer('cesiumContainer');
 viewer.dataSources.add(Cesium.KmlDataSource.load('flight-paths.kml');

In the flight-paths.kml, there are millions of nodes like this:

<Placemark>
                <TimeSpan>
                    <begin>2007-01-01T01:50:00Z</begin>
                </TimeSpan>
                <styleUrl>#mairport0_icon0</styleUrl>
                <LineString>
                    <tessellate>1</tessellate>
                    <altitudeMode>absolute</altitudeMode>
                    <coordinates>
-98.1796384517953,47.8244940960245,683352.4617486351           -99.3279951928504,48.3541860848452,689546.54119779
                   </coordinates>
                </LineString>
</Placemark>

The style of the nodes defined like this:

Style id="mairport0_icon0">
    <LineStyle>
        <color>ff7fff85</color>
        <width>1.5</width>
    </LineStyle>
</Style>

There are lots of style definitions in the kml file which means I can't change the style definition manually. How can I get the lines in kml file and change the style of it?

Answer 1

If want to change the style programmatically in JavaScript rather than change the KML then you can change the properties of the entity after loading KML using the Cesium API.

Suppose you wanted to change the color of the line to RED with 50% transparency then try the following:

var source = new Cesium.KmlDataSource();
source.load('flight-paths.kml').then(function(){
    var entities = source.entities.values;    
    for(var i =0; i < entities.length; i++) {
        var e = entities[i];
        e.wall.outlineColor = Cesium.Color.RED.withAlpha(0.5);
    }
});
viewer.dataSources.add(source);

Refer to other properties of the Entity wall field.
https://cesiumjs.org/Cesium/Build/Documentation/WallGraphics.html