Terrain and imagery layers
Quick answer
This tutorial treats imagery and terrain as two independent pipelines in CesiumJS and shows how to configure both. It covers ImageryLayerCollection ordering, raiseToTop, alpha, brightness and splitDirection, then compares UrlTemplateImageryProvider, WebMapServiceImageryProvider and WebMapTileServiceImageryProvider. It sets CesiumTerrainProvider.fromUrl with requestVertexNormals, applies terrainExaggeration, and fixes clamped entities with depthTestAgainstTerrain. Readers can assemble a consistent, correctly ordered basemap and terrain stack.
Key points
- Order imagery with raiseToTop and lower, and remember index 0 draws at the bottom.
- Set requestVertexNormals: true so terrain shading shows relief under lighting.
- Use depthTestAgainstTerrain and disableDepthTestDistance 0 so labels are occluded by hills.
Example
var layers = viewer.imageryLayers;
var grid = layers.add(new Cesium.GridImageryProvider({
color: Cesium.Color.WHITE.withAlpha(0.4),
glowColor: Cesium.Color.TRANSPARENT,
backgroundColor: Cesium.Color.fromCssColorString('#16324a').withAlpha(0.5),
cells: 4
}));
grid.alpha = 0.6;
layers.raiseToTop(grid);var terrain = await Cesium.CesiumTerrainProvider.fromUrl(
'https://your-host/terrain/',
{ requestVertexNormals: true, requestWaterMask: false }
);
viewer.terrainProvider = terrain;
viewer.terrainProvider = new Cesium.CustomHeightmapTerrainProvider({
width: 32,
height: 32,
tilingScheme: new Cesium.GeographicTilingScheme(),
callback: function (x, y, level) {
var map = new Float32Array(32 * 32);
return map;
}
});Notes
- A grid or blank tile with no error usually means a swapped y axis or a one-based tile index.
- terrainExaggerationRelativeHeight left at 0 lifts the whole terrain by its mean elevation.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Terrain and imagery layers. https://www.jingweizhi.com/en/cesium/tutorials/terrain-imagery.html (accessed 2026-11-03).