Cesium菜鸟初学笔记：Getting Started_cesium菜鸟教程官网

作者：weixin_40725706 | 2024-03-29 00:27:00

踩

cesium菜鸟教程官网

原文链接：Cesium Tutorials: Getting Started

文章目录

1. 你的第一个应用

创建一个空的HTML文件，复制以下代码即可创建你在Cesium中的Hello World应用。
注意：代码中第11行的 defaultAccessToken 是需要登陆Cesium ion账号后才能获取到的，每个人都是不一样的。
（配置Cesium本地网络服务器的过程本文就不再赘述了，网上有很多现成的教程可以参考）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesiumjs.org/releases/1.58/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.58/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 700px; height:400px"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWE0MjZhYy1jMzlhLTRkYzAtOWFlMC0zYTBmMzNjZWUwOGQiLCJpZCI6MTIxMDIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjAzNDM2NTR9.yNG39fq6l5JZPkgpq-jEyHmw4LpNVioa7EUxOUPKvm4';
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意：当你登录到Cesium ion后，上述代码将自动使用你默认的访问许可（Access token）。

官网教程使用的是一种叫做 Glitch 的在线Html编辑器，能够边修改代码边预览结果，使用起来还是挺方便的。当然用Sublime、VSCode等也可以，习惯哪个用哪个。代码的运行结果如下图所示。
图1 CesiumJS默认使用由你ion账号所提供的必应影像

2. 解析代码

接下来具体分析一下Hello World中的代码是怎么回事。
1.首先，将CesiumJS库包含在HTML的 head 部分：

<script src="https://cesiumjs.org/releases/1.58/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.58/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
1
2

2.然后创建一个HTML元素 div 来容纳CesiumJS组件：

<div id="cesiumContainer"></div>
1

3.此外，你的Cesium应用需要从你的ion账号中获取访问许可来访问必应影像。当你已经登陆到ion时，样例代码将使用你账户中默认的访问许可：

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWE0MjZhYy1jMzlhLTRkYzAtOWFlMC0zYTBmMzNjZWUwOGQiLCJpZCI6MTIxMDIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjAzNDM2NTR9.yNG39fq6l5JZPkgpq-jEyHmw4LpNVioa7EUxOUPKvm4';
1

4.最后，创建一个名为 Viewer 的顶级（top-level）Cesium组件，并告诉它使用上面所定义的HTML元素：

var viewer = new Cesium.Viewer('cesiumContainer');
1

3. 添加Cesium世界地形数据

Cesium世界地形是一种具有高分辨率的世界地形资源，将 Viewer 的声明部分改为如下代码，即可向你的应用中添加Cesium世界地形数据：

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()
});
1
2
3

修改完成后，搜索 Grand Canyon, AZ, USA，将视点缩放至该区域，就能浏览到高分辨率的地形数据了，如下图所示。
Grand Canyon地区的10m分辨率地形数据

4. 上传自定义数据

用户也可以上传自定义数据到 ion 上，并将其转换为三维瓦片数据，这是一种开放的规范，用于流式传输大量异构的三位地理空间数据集（an open specification for streaming massive heterogeneous 3D geospatial datasets）。本教程使用了一种具有单一建筑的KML/COLLADA包作为样例数据，将其创建为三维瓦片集并添加到你的Cesium应用中，点击此处下载数据。

将下载好的数据 AGI_HQ.kmz 拖拽到你的 ion 主页中，选择 3D Tile 并点击 Upload。数据上传完成后，ion 将会对数据进行瓦片处理（Tiling process）并在网页右上方显示处理进度；
瓦片处理完成后，在 ion 左侧选择刚处理好的数据，右侧则显示数据的具体信息。复制 Code 中的代码，并将其粘贴到 HTML 代码中（位于Viewer声明部分之后）：

var tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(your_asset_id)
    })
);
1
2
3
4
5

通过以下代码将 Cesium 应用的默认视点位置修改到数据集处：

viewer.zoomTo(tileset)
1

保存代码，刷新页面，就会得到下图所示的结果。

5. 总结

经过上述修改，最终的代码为：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesiumjs.org/releases/1.58/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.58/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 700px; height:400px"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWE0MjZhYy1jMzlhLTRkYzAtOWFlMC0zYTBmMzNjZWUwOGQiLCJpZCI6MTIxMDIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjAzNDM2NTR9.yNG39fq6l5JZPkgpq-jEyHmw4LpNVioa7EUxOUPKvm4';
    var viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain()
    });

    var tileset = viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
            url: Cesium.IonResource.fromAssetId(your_asset_id)
        })
    );
    viewer.zoomTo(tileset);
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

6.已知问题

我在按照教程进行的过程中，发现当 Viewer 的定义为：

 var viewer = new Cesium.Viewer('cesiumContainer');
1

时，用户上传的数据 AGI_HQ.kmz 是能够显示出来的。
而当其定义修改为：

var viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain()
    });
1
2
3

时，该数据却无法显示。不知道哪里出现的问题。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/332487