4

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
      }
   }
]
4

1 に答える 1

1

CZML ドキュメントが DataSource に読み込まれると、実行時にEntitiesのコレクションとして操作できます。fill一連のポリゴンのフラグを切り替える方法を示す例を次に示します。この下部にある [コード スニペットの実行] をクリックします。

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>

于 2016-12-13T15:25:47.877 に答える