UN Smart Maps Lead. We keep web maps open for a better world.
Public
Edited
Nov 24, 2024
<head>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Cesium.js"></script>
</head>
<div id="cesiumContainer"></div>
{
window.CESIUM_BASE_URL = 'https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/' //'https://observablehq.com/d/44526fcc8e67e4ba'
document.getElementById('cesiumContainer').replaceChildren()
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5N2UyMjcwOS00MDY1LTQxYjEtYjZjMy00YTU0ZTg5MmViYWQiLCJpZCI6ODAzMDYsImlhdCI6MTY0Mjc0ODI2MX0.dkwAL1CcljUV7NA7fDbhXXnmyZQU_c-G5zRx8PtEcxE"
const viewer = new Cesium.Viewer('cesiumContainer', {
terrain: Cesium.Terrain.fromWorldTerrain(),
});
// Fly the camera to San Francisco at the given longitude, latitude, and height.
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-15.0),
}
});
// Add Cesium OSM Buildings, a global 3D buildings layer.
const buildingTileset = await Cesium.createOsmBuildingsAsync(); // Looks like this is old 3D Tiles 1.0.
viewer.scene.primitives.add(buildingTileset);
/*
const viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(770371)
}),
animation: false,
homeButton: false,
navigationHelpButton: false,
sceneModePicker: false,
timeline: false
})
const imageProvider = new Cesium.UrlTemplateImageryProvider({
url: 'https://gic-plateau.s3.ap-northeast-1.amazonaws.com/2020/ortho/tiles/{z}/{x}/{y}.png', maximumLevel : 19
})
const current_image =
viewer.scene.imageryLayers.addImageryProvider(imageProvider)
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2023-03-21T12:00")
viewer.scene.globe.depthTestAgainstTerrain = true
try {
const tileset = new Cesium.Cesium3DTileset({
url: `https://smb.optgeo.org/ipfs/QmX7ADs7BcBDTNz6eWg8Z1RT6WyoUxQ2NtgWcZWnm75S2i/tileset.json`,
enableDebugWireframe: true,
})
viewer.scene.primitives.add(tileset)
viewer.zoomTo(
tileset,
new Cesium.HeadingPitchRange(
0.0, //0.5,
-0.5, //-0.2,
tileset.boundingSphere.radius / 4 //tileset.boundingSphere.radius * 4.0
)
)
} catch (error) {
console.log(`There was an error while creating the 3D tileset. ${error}`)
}
*/
/**
viewer.scene.primitives.add(tileset)
tileset.readyPromise.then(function () {
viewer.zoomTo(
tileset, new Cesium.HeadingPitchRange(0.0, -0.5,
tileset.boundingSphere.radius / 4)
)
})
*/
//const credit = new Cesium.Credit('国土交通省 with UN Smart Maps')
//viewer.scene.frameState.creditDisplay.addDefaultCredit(credit)
return viewer
}
Cesium = import("https://esm.run/cesium@1.111")
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.
