文章中所有操作均是在 Cesium 1.91 版本下进行的,其它版本差异请自行适配
Cesium ion
Cesium ion 是一个提供瓦片图和3D地理空间数据的平台,Cesium ion 支持把数据添加到用户自己的 CesiumJS 应用中。
地形(Terrain)
Cesium 支持流式的、可视化的全球高程投影地形地势、水形数据,包括海洋、湖泊、河流、山峰、峡谷和其他能够被三维展示出来的且效果比二维好的地形数据。像图层数据一样,Cesium 引擎会从一个服务器上请求流式地形数据,仅请求那些基于当前相机能看到的需要绘制的图层上的数据。
Cesium 提供了一些地形数据集的例子,以及如何配置这些参数。一些样例代码如下:
- ArcticDEM,高投影的arctic terrain
- PAMAP Terrain,高投影的Pennsylvania terrain
- Terrain display options,一些地形数据配置和格式
- Terrain exaggeration,使地形间的高度差异更加的合适
Cesium 支持的地形数据格式:
- Quantized-mesh, Cesium 团队自己开源的一种格式
- Heightmap
- Google Earth Enterprise
- 等等
注意,不同的地形数据需要不同的认证,需要确保自己能够有权限访问到这些数据源,有时候需要注册特定的认证才可以。
针对Cesium ion中的地形数据源进行添加地形
作者手里也没有相关的地形数据,所以还是利用 Cesium ion 提供的地形数据为基础进行演示。Cesium 需要您自己创建 ion account 然后生成一个 access key 用于访问地形数据,在我之前的文章中有介绍,点击[Cesium ion介绍](Cesium ion介绍.md)查看。
为了添加地形数据,我们需要创建一个 CesiumTerrainProvider,提供一个 url 和一些配置想,然后将这个 provider 赋值给 viewer.terrainProvider即可。
接下来我们就使用 Cesium ion 中提供的 Cesium World Terrain 地形进行演示:
-
去 Cesium ion 页面, Cesium World Terrain 地形默认的就在个人用户中的 asset 列表(My Assets)中,不需要格外配置。具体如下:
-
我们可以用 createWorldTerrainhelper 函数创建一个由 Cesium ion 提供服务的 Cesium WorldTerrian。具体如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="CesiumUnminified/Cesium.js"></script> <style> @import url(CesiumUnminified/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <div id="cesiumContainer"></div> <script> //初始化Cesium.Ion申请的token Cesium.Ion.defaultAccessToken = "您自己申请的access token"; const viewer = new Cesium.Viewer('cesiumContainer', { geocoder: false, //隐藏查找控件 homeButton: false, //隐藏视角返回初始位置按钮 sceneModePicker: false, //隐藏视角模式3D 2D CV baseLayerPicker: false, //隐藏图层选择 navigationHelpButton: false, //隐藏帮助 animation: false, //隐藏动画控件 timeline: false, //隐藏时间线控件 fullscreenButton: false, //隐藏全屏 }); // 隐藏版权信息 viewer._cesiumWidget._creditContainer.style.display = "none"; // 通过createWorldTerrainhelper创建 viewer.terrainProvider = Cesium.createWorldTerrain({ requestWaterMask: true, // 开启水光效果 requestVertexNormals: true // 开启地形光照 }); // 开始高程遮挡效果 viewer.scene.globe.depthTestAgainstTerrain = true; </script> </body> </html>
我们可以拉近喜马拉山那块,明显的有地形展示,然后将地形代码屏蔽掉对比一下,能看到有地形效果。
最后
我们平时添加地形,并不是非要用 Cesium ion 提供的地形数据。这里是作者并没有现成的地形数据,所以选用了 Cesium ion 中的地形数据源进行演示。
当然,你可以添加任何数据源地形数据,只要 Cesium 支持。