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自体に 'clock'時間間隔に基づいて切り替えるための方法を探している、またはあなたがスニペットを探していますEntity API経由で実行時にこれらの値を切り替えるJavaScriptの – emackey
私はjsで実行時にそれを操作しようとしています。出来ますか？ – meen