Manipuler dynamiquement la propriété de remplissage CZML du polygone

Question

Les propriétés des entités dessinées en CZML peuvent-elles être manipulées? J'essaie de basculer la propriété de remplissage d'un groupe de polygones à la fois. J'ai ajouté la propriété parent. Mais cela ne semble pas fonctionner. Quelqu'un a déjà fait face à ce problème? Toute aide est très appréciée :)

Voici mon exemple de 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

Une fois qu'un document de CZML a été chargé dans une source de données, vous pouvez le manipuler à l'exécution comme une collection de Entities. Voici un exemple montrant comment basculer les drapeaux fill sur un ensemble de polygones. Cliquez sur « Exécuter extrait de code » au bas de:

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>