05 Cesium—基于Cesium ion的添加图层

WorkLee

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

阅读量1k

点赞数

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

于 2022-03-23 15:33:58 首次发布

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

版权

Cesium 专栏收录该内容

22 篇文章 26 订阅

订阅专栏

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

Cesium ion

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

图层（Imagery）

Cesium 应用中有一个关键元素是 Imagery（图层）。瓦片图集合根据不同的投影方式映射到虚拟的三维数字地球表面。依赖于相机指向地表的方向和距离，Cesium 会去请求和渲染不同层级的图层详细信息。

多种图层能够被添加、移除、排序和适应到 Cesium 中。

Cesium 提供了一系列方法用于处理图层，比如颜色自适应，图层叠加融合。一些样例代码如下：

Adding basic imagery，添加基本图层
Adjusting imagery colors，自适应图层颜色
Manipulating and ordering imagery layers，控制调整图层顺序
Splitting imagery layers，切割图层

Cesium 支持的图层格式：

wms
TMS
WMTS (with time dynamic imagery)
ArcGIS
Bing Maps
Google Earth
Mapbox
OpenStreetMap
等等

注意，不同的数据源需要不同的认证，需要确保自己能够有权限访问到这些数据源，自然地需要注册特定的认证才可以（比如天地图就是很典型的需要认证的示例）。

针对Cesium ion中的图层数据源进行添加图层

默认地，Cesium 使用 Bing Maps 作为默认的图层。这个图层被打包进 Viewer 中用于演示。Cesium 需要您自己创建 ion account 然后生成一个 access key 用于访问图层数据，在我之前的文章中有介绍，点击[Cesium ion介绍](Cesium ion介绍.md)查看。

接下来我们就使用 Cesium ion 中提供的的 Sentinel-2 图层进行演示：

去 Cesium ion 页面，点击在导航栏中的“Asset Depot”，进入寻找并将 Sentinel-2 图层加入到自己的 assets 中。具体如下：
Sentinel-2 将在个人用户中的 asset 列表（My Assets）中出现，此时将在个人的应用中图层数据源变得可用。具体如下：

编写测试代码，将 assetId 传给对应的 Sentinel-2 图层，再将 ImageryProvider 添加到 viewer.imageryLayers中。具体如下：

<!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";

    // 移除默认的bing的图层
    viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

    // 添加Sentinel-2图层
    viewer.imageryLayers.addImageryProvider(
        new Cesium.IonImageryProvider({
            assetId: 3954
        })
    );
</script>
</body>
</html>

注：其中的 assetId 可以理解为提成的 id，在 asset 列表（My Assets）中可以查看到。

有明显的和之前的图层有差异，但是并不明显。

最后

我们平时添加图层，并不是非要用 Cesium ion 提供的图层数据。这里是作者并没有太好的图层数据，所以选用了 Cesium ion 中的图层进行演示。

当然，你可以添加任何数据源图层数据，只要 Cesium 支持。

WorkLee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
05 Cesium—基于Cesium ion的添加图层

文章中所有操作均是在 Cesium 1.91 版本下进行的，其它版本差异请自行适配Cesium ionCesium ion 是一个提供瓦片图和3D地理空间数据的平台，Cesium ion 支持把数据添加到用户自己的 CesiumJS 应用中。图层（Imagery）Cesium 应用中有一个关键元素是 Imagery（图层）。瓦片图集合根据不同的投影方式映射到虚拟的三维数字地球表面。依赖于相机指向地表的方向和距离，Cesium 会去请求和渲染不同层级的图层详细信息。多种图层能够被添...
复制链接

扫一扫