动态操纵多边形的 CZML 填充属性

Question

可以操纵在 CZML 中绘制的实体的属性吗？我试图一次切换一组多边形的填充属性。我添加了父属性。但这似乎不起作用。以前有人遇到过这个问题吗？非常感谢任何帮助:)

这是我的示例代码：

[  
   {  
      "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

将 CZML 文档加载到数据源后，您可以在运行时将其作为 Entities 的集合进行操作。下面的示例展示了如何在一组多边形上切换 fill 标志。单击此底部的 "Run code snippet"：

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>

动态操纵多边形的 CZML 填充属性

Manipulate CZML fill property of polygon dynamically

javascript

cesium

czml

动态操纵多边形的 CZML 填充 属性

Manipulate CZML fill property of polygon dynamically

javascript

cesium

czml

动态操纵多边形的 CZML 填充属性