I’m struggling to use the CesiumWidget
for display something simple as a GeoJSON source.
The only clear guide I found is this old discussion at GeoJSON datasource with Cesium widget, but replicating the same example (and fixing many API changes happened meanwhile) seems to not work anymore.
This is my code:
const osm = new Cesium.OpenStreetMapImageryProvider({
url: "https://a.tile.openstreetmap.org/"
});
const widget = new Cesium.CesiumWidget("container", {
skyBox: false,
baseLayer: Cesium.ImageryLayer.fromProviderAsync(osm),
baseLayerPicker: false,
geocoder: false,
creditContainer: document.createElement("none")
});
async function main() {
const dataSourceCollection = new Cesium.DataSourceCollection();
const datasource = new Cesium.GeoJsonDataSource();
const jsonURL =
"https://planetarycomputer.microsoft.com/api/stac/v1/collections/sentinel-2-l2a/items/S2B_MSIL2A_20240305T090739_R050_T42XWL_20240305T110543";
// const jsonURL = "https://sandcastle.cesium.com/SampleData/ne_10m_us_states.topojson";
const loaded = await datasource.load(jsonURL, {
stroke: Cesium.Color.HOTPINK,
fill: Cesium.Color.PINK,
strokeWidth: 5,
markerSymbol: "?"
});
dataSourceCollection.add(loaded);
const dataSourceDisplay = new Cesium.DataSourceDisplay({
scene: widget.scene,
dataSourceCollection: dataSourceCollection
});
widget.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(68, 76, 500000)
});
/*
const center = Cesium.Cartesian3.fromDegrees(68, 76, 250000);
const heading = Cesium.Math.toRadians(20.0);
const pitch = Cesium.Math.toRadians(-30.0);
const range = 15000.0;
widget.camera.lookAt(
center,
new Cesium.HeadingPitchRange(heading, pitch, range)
);
*/
const ready = dataSourceDisplay.update(new Cesium.JulianDate());
console.log(ready);
}
main();
Globe is rendered correctly, camera moved at proper position, and no error in the console. But the Geojson is not rendered.
If I switch to Cesium.Viewer
and I perform the minimal API changes required (no use of dataSourceCollection
but directly using widget.dataSources.add
), everything works as expected.
And this also trigger a question: what is the difference between Viewer and CesiumWidget?