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

WorkLee

已于 2022-03-25 17:06:45 修改

阅读量1.6k

点赞数 1

分类专栏： Cesium 文章标签： GIS cesium

于 2022-03-23 15:36:14 首次发布

本文链接：https://blog.csdn.net/lili40342/article/details/123687745

版权

Cesium 专栏收录该内容

22 篇文章 26 订阅

订阅专栏

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

Cesium ion

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

地形（Terrain）

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

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

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 支持。

WorkLee

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
06 Cesium—基于Cesium ion的添加地形

文章中所有操作均是在 Cesium 1.91 版本下进行的，其它版本差异请自行适配Cesium ionCesium ion 是一个提供瓦片图和3D地理空间数据的平台，Cesium ion 支持把数据添加到用户自己的 CesiumJS 应用中。地形（Terrain）Cesium 支持流式的、可视化的全球高程投影地形地势、水形数据，包括海洋、湖泊、河流、山峰、峡谷和其他能够被三维展示出来的且效果比二维好的地形数据。像图层数据一样，Cesium 引擎会从一个服务器上请求流式地形数据，仅请...
复制链接

扫一扫