CesiumJS 海底地形可视化指南【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium海洋工程与 GIS 工作中最常见的动作之一是把水深数据叠加到三维地球上用颜色直接读出海底坡度与地貌。本文讲解如何做 CesiumJS 海底地形可视化从准备水深数据、跑通一个基础海洋场景到按高程完成着色最后讨论三个容易踩坑的细节。读完后你可以独立写出一份水深 → 颜色的可视化页面。从实际场景出发数据与准备示例场景项目组要查看某片海域的坡度和海山分布需要把多波束测深导出的水深网格叠加到地球上再按水深深浅着色。需要准备的数据有两类地形数据CesiumJS 地形以瓦片组织可以直接使用 Cesium ion 提供的全球海底地形服务仓库示例调用createWorldBathymetryAsync请求需要一个 ion token如果有自己的水深网格也可以封装成 QuantizedMesh 或 3D Tiles 地形瓦片。叠加数据矢量要素、工程设施位置等。仓库在 Apps/SampleData/ 下提供了 CZML、GeoJSON、3D Tiles 等格式的样本数据换成自己的数据即可直接测试。下面这张灰度全球地貌纹理可以作为理解海底地形源数据分布的直观参照陆地亮、海洋暗。跑通你的第一份海底地形环境搭建与启动只需安装依赖并启动本地服务。克隆仓库后执行git clone https://gitcode.com/GitHub_Trending/ce/cesium cd cesium npm install npm run start服务启动后在浏览器打开 http://localhost:8080/端口以终端输出为准首页即可浏览仓库内置的各类示例。创建基础海洋场景创建一个 Viewer 并指定海底地形核心代码只有几行const viewer new Cesium.Viewer(cesiumContainer, { terrainProvider: await Cesium.createWorldBathymetryAsync({ requestVertexNormals: true }) }); viewer.scene.globe.maximumScreenSpaceError 1.0; viewer.scene.globe.enableLighting true;createWorldBathymetryAsync请求全球海底地形requestVertexNormals让瓦片携带顶点法线海底起伏才有光影可表现maximumScreenSpaceError控制瓦片精度阈值LOD 即按视角距离切换瓦片精度enableLighting打开光照让地形凹凸更明显。加载地形数据并着色给地球挂一个按高程取色的材质就完成了水深着色const material Cesium.Material.fromType(ElevationRamp); material.uniforms.image colorRamp; // 用 canvas 画出的色带 material.uniforms.minimumHeight -10000; material.uniforms.maximumHeight 2000; viewer.scene.globe.material material;ElevationRamp是引擎内置材质传入一张色带图和上下界高度把每个顶点的高程映射到色带上的对应颜色。代码里的colorRamp是用 canvas 画了渐变的画布完整绘制代码在 Bathymetry 示例中想组合等高线或坡度着色可参考 Globe Materials 示例。三个容易踩坑的细节水深与色彩的映射先归一化再查色带现象按水深原始值直接取色海底变成一大片单色浅水区细节丢失。原因水深量级跨度大海底主体在几千米以下浅水只占一小段区间色带按深度均分会被深海吃掉。规避方法先做归一化即(height - minimumHeight) / (maximumHeight - minimumHeight)再按归一化结果取色示例在 -500、-2000、-5000、-8000 等深度各设一个颜色节点采用 matplotlib cmocean 的 deep 配色保证浅水区仍有足够的色阶区分。坐标系与投影对齐让地形和数据同处一个基准现象自己的水深网格或矢量数据与地形对不齐、整体偏移。原因CesiumJS 默认使用 WGS84 椭球经纬度基准若数据是投影坐标系如 UTM导出而未做转换必然错位。规避方法封装瓦片前统一转到经纬度发布前用已知控制点或海岸线轮廓核对一遍只叠加矢量时用 GeoJSON本身即经纬度可以省去重投影这一步。大范围海域性能LOD 阈值与缓存要分开调现象横跨大洋飞行时卡顿回到已看过的区域又要重新加载。原因CesiumJS 按屏幕空间误差决定每块瓦片的精度误差阈值设得过小会让高精度瓦片数量激增另一部分是缓存没生效同一瓦片被反复请求。规避方法把globe.maximumScreenSpaceError调到合适值示例提高到 1.0 换取更精细的海底前提是带宽允许同时启用磁盘缓存网络面板里会看到瓦片请求标记为 (disk cache)二次访问不再发请求。还能往哪走叠加海洋工程设施平台、海底管道等可以 glTF 或 3D Tiles 模型放到海底地形上仓库Apps/SampleData/models/下有大量可直接引用的模型样本。时间序列动态展示潮流、温度这类随时间变化的数据可用 CZML 时间动态方案仓库有 TimeDependentPaths_Whole.czml 这类现成示例。水面材质想表现海面而非只画海底可以给水层加法线贴图仓库自带这张纹理效果如右图。去哪找现成参考Bathymetry 示例本文主线对应的完整例子含海底地形、色带绘制、等高线与垂直夸大。Globe Materials 示例高程等高线、坡度、坡向等一套地形材质示例。引擎源码想深入地形瓦片调度与材质 Fabric 实现时从这里入手。样本数据目录CZML、GeoJSON、3D Tiles 等格式的样本替换成自己的数据即可复用。本文覆盖了从准备水深数据、跑通海洋场景、完成高程着色到映射/坐标系/性能三个细节的完整链路下一步可以把自己的水深网格封装成瓦片接进上面的着色流程。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/11 6:33:09 · 阅读 1.2k CesiumJS 海底地形可视化指南
CesiumJS 海底地形可视化指南【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium海洋工程与 GIS 工作中最常见的动作之一是把水深数据叠加到三维地球上用颜色直接读出海底坡度与地貌。本文讲解如何做 CesiumJS 海底地形可视化从准备水深数据、跑通一个基础海洋场景到按高程完成着色最后讨论三个容易踩坑的细节。读完后你可以独立写出一份水深 → 颜色的可视化页面。从实际场景出发数据与准备示例场景项目组要查看某片海域的坡度和海山分布需要把多波束测深导出的水深网格叠加到地球上再按水深深浅着色。需要准备的数据有两类地形数据CesiumJS 地形以瓦片组织可以直接使用 Cesium ion 提供的全球海底地形服务仓库示例调用createWorldBathymetryAsync请求需要一个 ion token如果有自己的水深网格也可以封装成 QuantizedMesh 或 3D Tiles 地形瓦片。叠加数据矢量要素、工程设施位置等。仓库在 Apps/SampleData/ 下提供了 CZML、GeoJSON、3D Tiles 等格式的样本数据换成自己的数据即可直接测试。下面这张灰度全球地貌纹理可以作为理解海底地形源数据分布的直观参照陆地亮、海洋暗。跑通你的第一份海底地形环境搭建与启动只需安装依赖并启动本地服务。克隆仓库后执行git clone https://gitcode.com/GitHub_Trending/ce/cesium cd cesium npm install npm run start服务启动后在浏览器打开 http://localhost:8080/端口以终端输出为准首页即可浏览仓库内置的各类示例。创建基础海洋场景创建一个 Viewer 并指定海底地形核心代码只有几行const viewer new Cesium.Viewer(cesiumContainer, { terrainProvider: await Cesium.createWorldBathymetryAsync({ requestVertexNormals: true }) }); viewer.scene.globe.maximumScreenSpaceError 1.0; viewer.scene.globe.enableLighting true;createWorldBathymetryAsync请求全球海底地形requestVertexNormals让瓦片携带顶点法线海底起伏才有光影可表现maximumScreenSpaceError控制瓦片精度阈值LOD 即按视角距离切换瓦片精度enableLighting打开光照让地形凹凸更明显。加载地形数据并着色给地球挂一个按高程取色的材质就完成了水深着色const material Cesium.Material.fromType(ElevationRamp); material.uniforms.image colorRamp; // 用 canvas 画出的色带 material.uniforms.minimumHeight -10000; material.uniforms.maximumHeight 2000; viewer.scene.globe.material material;ElevationRamp是引擎内置材质传入一张色带图和上下界高度把每个顶点的高程映射到色带上的对应颜色。代码里的colorRamp是用 canvas 画了渐变的画布完整绘制代码在 Bathymetry 示例中想组合等高线或坡度着色可参考 Globe Materials 示例。三个容易踩坑的细节水深与色彩的映射先归一化再查色带现象按水深原始值直接取色海底变成一大片单色浅水区细节丢失。原因水深量级跨度大海底主体在几千米以下浅水只占一小段区间色带按深度均分会被深海吃掉。规避方法先做归一化即(height - minimumHeight) / (maximumHeight - minimumHeight)再按归一化结果取色示例在 -500、-2000、-5000、-8000 等深度各设一个颜色节点采用 matplotlib cmocean 的 deep 配色保证浅水区仍有足够的色阶区分。坐标系与投影对齐让地形和数据同处一个基准现象自己的水深网格或矢量数据与地形对不齐、整体偏移。原因CesiumJS 默认使用 WGS84 椭球经纬度基准若数据是投影坐标系如 UTM导出而未做转换必然错位。规避方法封装瓦片前统一转到经纬度发布前用已知控制点或海岸线轮廓核对一遍只叠加矢量时用 GeoJSON本身即经纬度可以省去重投影这一步。大范围海域性能LOD 阈值与缓存要分开调现象横跨大洋飞行时卡顿回到已看过的区域又要重新加载。原因CesiumJS 按屏幕空间误差决定每块瓦片的精度误差阈值设得过小会让高精度瓦片数量激增另一部分是缓存没生效同一瓦片被反复请求。规避方法把globe.maximumScreenSpaceError调到合适值示例提高到 1.0 换取更精细的海底前提是带宽允许同时启用磁盘缓存网络面板里会看到瓦片请求标记为 (disk cache)二次访问不再发请求。还能往哪走叠加海洋工程设施平台、海底管道等可以 glTF 或 3D Tiles 模型放到海底地形上仓库Apps/SampleData/models/下有大量可直接引用的模型样本。时间序列动态展示潮流、温度这类随时间变化的数据可用 CZML 时间动态方案仓库有 TimeDependentPaths_Whole.czml 这类现成示例。水面材质想表现海面而非只画海底可以给水层加法线贴图仓库自带这张纹理效果如右图。去哪找现成参考Bathymetry 示例本文主线对应的完整例子含海底地形、色带绘制、等高线与垂直夸大。Globe Materials 示例高程等高线、坡度、坡向等一套地形材质示例。引擎源码想深入地形瓦片调度与材质 Fabric 实现时从这里入手。样本数据目录CZML、GeoJSON、3D Tiles 等格式的样本替换成自己的数据即可复用。本文覆盖了从准备水深数据、跑通海洋场景、完成高程着色到映射/坐标系/性能三个细节的完整链路下一步可以把自己的水深网格封装成瓦片接进上面的着色流程。【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考