Cesium菜鸟初学笔记：Getting Started

最新推荐文章于 2025-06-14 23:05:05 发布

翻译最新推荐文章于 2025-06-14 23:05:05 发布 · 2k 阅读

文章标签：

#Cesium #初学

Cesium学习专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了Cesium初学者如何创建第一个3D地球应用，包括设置HTML文件、解析代码、添加世界地形数据、上传自定义数据的步骤。在过程中，作者遇到使用不同Viewer定义时，自定义数据展示的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文链接：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>

注意：当你登录到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">

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

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

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

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

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

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

3. 添加Cesium世界地形数据

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

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

修改完成后，搜索 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)
    })
);

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

viewer.zoomTo(tileset)

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

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>

6.已知问题

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

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

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

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

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