Manipulate CZML fill property of polygon dynamically

Question

Can properties of entities drawn in CZML be manipulated? I am trying to toggle fill property of a group of polygons at a time. I have added parent property. But it doesn't seem to work. Anyone has faced this issue before? Any help is much appreciated :)

Here is my sample code:

[  
   {  
      "id":"document",
      "name":"CZML Geometries: Polygon",
      "version":"1.0"
   },
   {  
      "id":"testParent",
      "description":"test parent entity"
   },
   {  
      "id":"id_1",
      "polygon":{  
         "positions":{  
            "cartographicDegrees":[  
               -95,29,0,
               -95,29,0,
               -95,29,0,
               -95,29,0,
               -95,29,0
            ]
         },
         "extrudedHeight":{  
            "number":4
         },
         "height":{  
            "number":0
         },
         "fill":false,
         "parent":"testParent",
         "outline":true
      }
   }
]

Answer 1

Once a CZML document has been loaded into a DataSource, you can manipulate it at runtime as a collection of Entities. Here's an example showing how to toggle the fill flags on a set of polygons. Click "Run code snippet" at the bottom of this:

var viewer = new Cesium.Viewer('cesiumContainer', {
    navigationInstructionsInitiallyVisible: false, animation: false, timeline: false,
    // These next 5 lines are just to avoid the Bing Key error message.
    imageryProvider : Cesium.createTileMapServiceImageryProvider({
        url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
    }),
    baseLayerPicker : false,
    geocoder : false,
    // This next line fixes another Stack Snippet error, you may omit
    // this setting from production code as well.
    infoBox : false
});

var czml = [{
    "id" : "document",
    "name" : "CZML Geometries: Polygon",
    "version" : "1.0"
}, {
    "id" : "redPolygon",
    "name" : "Red polygon on surface",
    "polygon" : {
        "positions" : {
            "cartographicDegrees" : [
                -115.0, 37.0, 0,
                -115.0, 32.0, 0,
                -107.0, 33.0, 0,
                -102.0, 31.0, 0,
                -102.0, 35.0, 0
            ]
        },
        "material" : {
            "solidColor" : {
                "color" : {
                    "rgba" : [255, 0, 0, 100]
                }
            }
        },
        "fill" : true,
        "extrudedHeight" : 0,
        "outline" : true,
        "outlineColor" : {
            "rgba" : [255, 0, 0, 255]
        }
    }
}, {
    "id" : "greenPolygon",
    "name" : "Green polygon",
    "polygon" : {
        "positions" : {
            "cartographicDegrees" : [
                -108.0, 42.0, 0,
                -100.0, 42.0, 0,
                -104.0, 40.0, 0
            ]
        },
        "material" : {
            "solidColor" : {
                "color" : {
                    "rgba" : [0, 255, 0, 100]
                }
            }
        },
        "fill" : true,
        "extrudedHeight" : 0,
        "outline" : true,
        "outlineColor" : {
            "rgba" : [0, 255, 0, 255]
        }
    }
}, {
    "id" : "orangePolygon",
    "name" : "Orange polygon",
    "polygon" : {
        "positions" : {
            "cartographicDegrees" : [
                -108.0, 25.0, 0,
                -100.0, 25.0, 0,
                -100.0, 30.0, 0,
                -108.0, 30.0, 0
            ]
        },
        "material" : {
            "solidColor" : {
                "color" : {
                    "rgba" : [255, 100, 0, 100]
                }
            }
        },
        "fill" : true,
        "extrudedHeight" : 0,
        "outline" : true,
        "outlineColor" : {
            "rgba" : [255, 100, 0, 255]
        }
    }
}];

Cesium.CzmlDataSource.load(czml).then(function(dataSource) {
    viewer.dataSources.add(dataSource);
    viewer.zoomTo(dataSource);
    
    document.getElementById('toggleFill').addEventListener('click', function() {
        // Iterate the list of entities, looking for polygons.
        var numEntities = dataSource.entities.values.length;
        for (var i = 0; i < numEntities; ++i) {
            var entity = dataSource.entities.values[i];
            if (entity.polygon) {
                // Toggle the fill flag on each polygon.
                entity.polygon.fill = !entity.polygon.fill.getValue();
            }
        }
    });
});

html, body, #cesiumContainer {
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  font-family: sans-serif;
}
#toolbar { position: absolute; top: 5px; left: 8px; }

<link href="http://cesiumjs.org/releases/1.28/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.28/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>
<div id="toolbar">
    <button id="toggleFill" class="cesium-button" type="button">Toggle fill</button>
</div>