Hello guys,
Can someone explain me how to provide my own terrain?
For example, I have geotiff files. As I understand, I need to
- Convert geotiff into quantized-mesh format.
- does CTB works for it?
- is a requirement to have a layers.json? if so, is there a way to generate the layers.json automatically?
- Server the terrain files
- does this server works for testing: GitHub - geo-data/cesium-terrain-server: A basic server for serving up filesystem based tilesets representing Cesium.js terrain models?
- or is there another way for me to test that the terrain files generated from CTB works?
I have currently converted one geotiff file into terrain, and I generated my own layer.json, but I cannot visualize my terrain. So, I am a bit lost if this is the correct path to take. Also, I do not know where the issue is, if the issue is in my terrain file, in my layer.json, or in my server.
Thank you so much for the help.
I have a simple html code to test in a viewer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Cesium Terrain Test</title>
<script src="https://cdn.jsdelivr.net/npm/cesium/Build/Cesium/Cesium.js"></script>
<link href="https://cdn.jsdelivr.net/npm/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
<style>
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// Initialize viewer with no terrain initially to speed up load
const viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: new Cesium.IonImageryProvider({ assetId: 2 }),
terrainProvider: new Cesium.EllipsoidTerrainProvider()
});
// Async load MapTiler terrain and set it on the viewer when ready
async function loadTerrain() {
try {
const terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(
*'localhost:8000',* //replace with the terrain server
{
requestVertexNormals: true,
requestWaterMask: true
}
);
viewer.scene.terrainProvider = terrainProvider;
viewer.scene.globe.terrainExaggeration = 2.0; // Optional exaggeration
// Fly camera to a good location for testing
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(7.65, 45.9, 20000)
});
console.log('Terrain loaded successfully!');
} catch (err) {
console.error('Failed to load terrain provider:', err);
}
}
loadTerrain();
</script>
</body>
</html>