06 Cesium—基于Cesium ion的添加地形

2023-10-27

文章中所有操作均是在 Cesium 1.91 版本下进行的,其它版本差异请自行适配

Cesium ion

Cesium ion 是一个提供瓦片图和3D地理空间数据的平台,Cesium ion 支持把数据添加到用户自己的 CesiumJS 应用中。

地形(Terrain)

Cesium 支持流式的、可视化的全球高程投影地形地势、水形数据,包括海洋、湖泊、河流、山峰、峡谷和其他能够被三维展示出来的且效果比二维好的地形数据。像图层数据一样,Cesium 引擎会从一个服务器上请求流式地形数据,仅请求那些基于当前相机能看到的需要绘制的图层上的数据。

Cesium 提供了一些地形数据集的例子,以及如何配置这些参数。一些样例代码如下:

Cesium 支持的地形数据格式:

  1. Quantized-mesh, Cesium 团队自己开源的一种格式
  2. Heightmap
  3. Google Earth Enterprise
  4. 等等

注意,不同的地形数据需要不同的认证,需要确保自己能够有权限访问到这些数据源,有时候需要注册特定的认证才可以。

针对Cesium ion中的地形数据源进行添加地形

作者手里也没有相关的地形数据,所以还是利用 Cesium ion 提供的地形数据为基础进行演示。Cesium 需要您自己创建 ion account 然后生成一个 access key 用于访问地形数据,在我之前的文章中有介绍,点击[Cesium ion介绍](Cesium ion介绍.md)查看。

为了添加地形数据,我们需要创建一个 CesiumTerrainProvider,提供一个 url 和一些配置想,然后将这个 provider 赋值给 viewer.terrainProvider即可。

接下来我们就使用 Cesium ion 中提供的 Cesium World Terrain 地形进行演示:

  1. Cesium ion 页面, Cesium World Terrain 地形默认的就在个人用户中的 asset 列表(My Assets)中,不需要格外配置。具体如下:

  2. 我们可以用 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 支持。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

06 Cesium—基于Cesium ion的添加地形 的相关文章

随机推荐