经纬志
首页 / Cesium / 使用示例

水深分层着色

官方示例用带海底高程的地形数据。这里用同样的思路,把深度色带画在 canvas 上贴到球体,分层逻辑与真实水深图一致。

CesiumJS 1.121 · 更新 2026-10-28
源码与运行效果
运行效果

色带怎么分层

从浅滩的青绿到深海群青,每隔一段深度换一档颜色。canvas 上按纬度带和正弦噪声生成海域,再用多边形把大陆涂成土黄,边界就是海岸线。

交给影像图层

SingleTileImageryProvider 接受一张覆盖全球的图和 Rectangle.MAX_VALUE,canvas 转成 dataURL 就能直接用。它只有一张图,所以放大后不会更清晰。

可以直接改的地方

位置改什么效果
深度色带的档数5 改 10分层更细
landColor换成任意颜色陆地颜色
rectangle缩小范围只铺一块区域

只适合远景:单张全球影像在低层级够用,放大到城市尺度会明显发糊,实际项目要在这一层下面再叠瓦片影像。