Terrain (地形)

CesiumJS支持流式传输和可视化海洋,湖泊和河流的全球高分辨率地形和水效果。 查看山峰,山谷和其他地形特征,并拥抱3D地球。 使用 Cesium ion 可流式传输自己的平铺地形数据或高分辨率精选地形,例如 Cesium World Terrain


Quick start

在 Sandcastle 中打开 Hello World 示例。 默认情况下,地球仪是 WGS84 ellipsoid。 通过将 terrainProvider 选项传递给查看器来指定其他 terrain 提供程序。 让我们使用 Cesium World Terrain:

Cesium.Ion.defaultAccessToken = 'your_access_token';
var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider : Cesium.createWorldTerrain()
});

修改示例后,按F8键运行它。 缩放到山区,然后按住鼠标中键并拖动以倾斜到水平视图。 这是珠穆朗玛峰的样子:

everest

随着我们拉近距离,CesiumJS会根据地球的可见部分以及它们的远近来请求更高分辨率的地形。

地形和图像分开处理,任何图像提供者均可与任何地形提供者一起使用。 有关管理图像的信息,请参见 Imagery Layers Tutorial


Enabling Terrain Lighting and Water Effects

Cesium World Terrain 还包括地形照明数据和水效果所需的海岸线数据。 默认情况下,此数据不与地形图块一起发送。 要启用地形照明,requestVertexNormals 并启用地球上的照明。

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider : Cesium.createWorldTerrain({
        requestVertexNormals: true
    })
});
viewer.scene.globe.enableLighting = true;

这是珠穆朗玛峰的相同视图,并具有基于太阳位置的地形照明。

light

使用requestWaterMask以类似的方式启用水效果:

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider : Cesium.createWorldTerrain({
        requestWaterMask: true
    })
});

放大到水域以查看效果。 这是旧金山湾:

water

波浪随时间变化,明亮的镜面反射高亮显示太阳和月亮的反射。 可以通过使用 Globe.oceanNormalMapUrl 更改用于创建波浪的法线贴图来自定义水效果。 更改图像提供者也会影响水的外观,因为水彩会与基础图像混合在一起。

请参阅 Sandcastle 中的 terrain example ,以探索一些有趣的地形和水域的选择区域。


Ready-to-stream terrain

Cesium World Terrain:高分辨率的全球地形,可同时支持地形照明和水景效果。 Cesium World Terrain 托管在 Cesium ion 中,也可以购买以供离线使用。 将其添加到您的CesiumJS应用中,以实现快速有效的地形可视化。 Cesium World Terrain 也可以在内部使用。


Terrain providers

Cesium 支持多种使用地形提供程序请求地形的方法。 大多数地形提供商使用 HTTP 上的 REST interface 来请求地形图块。 地形提供者根据请求的格式和地形数据的组织方式而有所不同。 CesiumJS支持以下地形提供程序:

地形提供程序的构造类似于图像提供程序,通常包括地形服务器的URL和可选代理(如果服务器不支持跨域资源共享(CORS))。


Resources

在Sandcastle中查看 terrain example,并查看 all terrain providers 的参考文档。

在 Cesium 中加载 `.terrain` 格式的地形数据,是通过使用 `CesiumTerrainProvider` 来实现的。`.terrain` 是 Cesium 官方支持的一种地形数据格式,通常由 [Cesium ion](https://cesium.com/platform/cesium-ion/) 或者使用 [Cesium Terrain Builder (CTB)](https://github.com/geo-data/cesium-terrain-builder) 工具生成。 --- ### ✅ 示例代码:加载 `.terrain` 地形数据 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Cesium.js"></script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> </head> <body> <div id="cesiumContainer"></div> <script> // 设置 Cesium 静态资源路径 Cesium.Ion.defaultAccessToken = 'YOUR_ION_TOKEN'; // 如果使用 ion 服务 const viewer = new Cesium.Viewer('cesiumContainer', { terrain: Cesium.Terrain.fromWorldTerrain() // 默认使用 Cesium 全球地形 }); // 加载本地或远程的 .terrain 地形数据 const terrainProvider = new Cesium.CesiumTerrainProvider({ url: 'http://localhost:8000/path/to/your/terrain-root', // 指向 .terrain 文件的根目录 requestWaterMask: true, // 如果需要水体效果 requestVertexNormals: true // 如果需要光照效果 }); viewer.terrain = terrainProvider; </script> </body> </html> ``` --- ### 🔍 代码解释: - `CesiumTerrainProvider`:用于加载 `.terrain` 类型的地形数据。 - `url`:指向地形数据的根目录,通常是一个包含 `root.terrain` 和多个 `.terrain` 分块文件的服务器路径。 - `requestWaterMask`:启用后可以渲染水体效果(如河流、湖泊)。 - `requestVertexNormals`:启用后可以渲染光照效果,使地形更立体。 - `viewer.terrain = terrainProvider`:将新的地形设置为当前 Viewer 使用的地形。 --- ### 🧰 如何构建 `.terrain` 数据? 你可以使用 [Cesium Terrain Builder (CTB)](https://github.com/geo-data/cesium-terrain-builder) 将 DEM(数字高程模型)文件(如 GeoTIFF)转换为 `.terrain` 格式。 #### 示例命令: ```bash ctb-tile -f Mesh -C -o output_dir input_dem.tif ``` - `-f Mesh` 表示生成 `.terrain` 网格数据。 - `-C` 表示压缩地形数据。 - `output_dir` 是输出目录。 - `input_dem.tif` 是输入的 DEM 文件。 --- ### 📁 `.terrain` 目录结构示例: ``` terrain-root/ ├── root.terrain ├── 0/ │ └── 0.terrain ├── 1/ │ └── 0.terrain │ └── 1.terrain ... ``` 你需要将该目录部署到一个支持跨域请求(CORS)的 Web 服务器上,例如使用 Python 简单服务器: ```bash cd terrain-root python3 -m http.server 8000 ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

高建伟-joe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值