{
// remove previous element
document.getElementById('cesiumContainer').replaceChildren();
// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Cesium.Viewer('cesiumContainer', {
//terrainProvider: Cesium.createWorldTerrain(),
timeline: false,
animation: false,
sceneModePicker: false,
baseLayerPicker: false,
imageryProviderViewModels: null
});
// The globe does not need to be displayed,
// since the Photorealistic 3D Tiles include terrain
viewer.scene.globe.show = false;
// Add Photorealistic 3D Tiles
const tileset = await Cesium.createGooglePhotorealistic3DTileset();
viewer.scene.primitives.add(tileset);
// Add OSM
// const osmBuildingsTileset = await Cesium.createOsmBuildingsAsync();
// viewer.scene.primitives.add(osmBuildingsTileset);
// Add Earth Engine layer on top
const provider = new Cesium.UrlTemplateImageryProvider({
url : imageWater.getMap().urlFormat,
maximumLevel: 200,
});
const layer = new Cesium.ImageryLayer(provider);
viewer.imageryLayers.add(layer);
// Fly the camera to San Francisco at the given longitude, latitude, and height.
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromArray([3979224, -9186, 4968214]),
orientation : {
heading : Cesium.Math.toRadians(45.0),
pitch : Cesium.Math.toRadians(-10.0),
}
});
}
{
// remove previous element
document.getElementById('cesiumContainer2').replaceChildren();
// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Cesium.Viewer('cesiumContainer2', {
//terrainProvider: Cesium.createWorldTerrain(),
timeline: false,
animation: false,
sceneModePicker: false,
baseLayerPicker: false
});
// Fly the camera to San Francisco at the given longitude, latitude, and height.
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromArray([3979224, -9186, 4968214]),
orientation : {
heading : Cesium.Math.toRadians(45.0),
pitch : Cesium.Math.toRadians(-10.0),
}
});
// Add Earth Engine layer on top
const provider = new Cesium.UrlTemplateImageryProvider({
url : imageWater.getMap().urlFormat,
maximumLevel: 200,
});
const layer = new Cesium.ImageryLayer(provider);
viewer.imageryLayers.add(layer);
}
imageWater = {
var waterOccurrence = ee.Image("JRC/GSW1_3/GlobalSurfaceWater").select('occurrence')
.divide(100).unmask(0).resample('bilinear')
//.convolve(ee.Kernel.gaussian(45, 30, 'meters'))
//.reduceNeighborhood(ee.Reducer.mean(), ee.Kernel.circle(45, 'meters'))
.rename('occurrence')
waterOccurrence = waterOccurrence.updateMask(waterOccurrence.unitScale(0, 0.02))
var waterOccurrenceMin = 0.02
var palette = ["2171b5", "4292c6", "6baed6", "9ecae1", "c6dbef", "deebf7", "f7fbff"]
var rgb = ee.Image(1).subtract(waterOccurrence)
.mask(waterOccurrence.unitScale(waterOccurrenceMin, waterOccurrenceMin + 0.2))
.visualize({ palette: palette, min: 0, max: 1 })
var land = ee.Image("users/gena/land_polygons_image").mask()
return rgb.updateMask(rgb.mask().multiply(land))
}
Cesium = import("https://esm.run/cesium@1.105.2");
import {ee} from '@gena/ee'
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
