In the SandCastle example below, you can switch between a czml and kml which should render the exact same thing: a polygon draped on the terrain. However, while the czml gets properly draped on the terrain, the kml is rendered as it’s own object floating below the terrain (you can see this if you switch to wireframe mode using the Inspector).
Is this something that can be fixed by modifying the kml file or the code below, or something that is coming from the Cesium folks at some point, or something that if want fixed I should delve into the Cesium code and try to fix myself? Any help/suggestions would be appreciated.
There are so many kml’s that use polygons in this way, and while this works on a flat earth, the wonder of CesiumJS is the terrain, so it would be so useful for CesiumJS to support this.
Here’s a saved link to the SandCastle demo:
Here’s the code in the demo:
// CZML polygon gets overlaid on terrain perfectly
// KML (which is an exact copy of the czml) does not get overlaid on terrain
// (if you switch to wireframe rendering using Inspector
// you can see that it is floating below terrain).
var czml = [{
"id" : "document",
"name" : "CZML Geometries: Polygon",
"version" : "1.0"
}, {
"id" : "redPolygon",
"name" : "Red polygon on surface",
"polygon" : {
"positions" : {
"cartographicDegrees" : [
-118.6314919067867,39.39082247764545,0,
-118.6253096252535,39.39267143352271,0,
-118.6291720945795,39.39846179949413,0,
-118.6357552771416,39.39591095741704,0,
-118.6314919067867,39.39082247764545,0
]
},
"material" : {
"solidColor" : {
"color" : {
"rgba" : [255, 0, 0, 100]
}
}
}
}
}];
var viewer = new Cesium.Viewer(‘cesiumContainer’);
var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({
url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
requestWaterMask : true,
requestVertexNormals : true
});
viewer.terrainProvider = cesiumTerrainProviderMeshes;
//Add Cesium Inspector
viewer.extend(Cesium.viewerCesiumInspectorMixin);
Sandcastle.addToolbarMenu([{
text : 'CZML Polygon',
onselect : function() {
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
}
}, {
text : 'KMZ polygon',
onselect : function() {
var options = {
camera : viewer.scene.camera,
canvas : viewer.scene.canvas
};
viewer.dataSources.add(Cesium.KmlDataSource.load(kml, options));
}
}], ‘toolbar’);
Sandcastle.reset = function() {
viewer.dataSources.removeAll();
};