Getting Started (入门)

CesiumJS是一个用于Web上3D地图的JavaScript库。Cesium ion是您发现3D内容并整理自己的数据以进行流传输的中心。 CesiumJS和ion携手合作，使您能够构建世界一流的3D映射应用程序。

Your first app (您的第一个应用)

以下是您的第一个Cesium应用程序的源代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body><div id="cesiumContainer" style="width: 700px; height:400px"></div><script>Cesium.Ion.defaultAccessToken = 'your_access_token';var viewer = new Cesium.Viewer('cesiumContainer');</script>
</body>
</html>

提示： \color{orange}{提示：} 提示：
创建一个 Cesium ion 账户
请注意以上代码中的your_access_token占位符。创建一个 Cesium ion 帐户以使用本教程中的3D内容。在此处注册，以上示例代码将自动使用您的令牌进行更新。如果您已经有一个帐户，请登录

您的 Cesium ion 帐户
由于您已登录Cesium ion，因此以上代码中正在使用您的默认访问令牌。

Web应用程序需要Web服务器，而CesiumJS也不例外。为简单起见，本教程跳过了本地服务器设置，并使用了Glitch（用于Web开发的在线IDE）。单击此处创建一个新的Glitch项目。加载Glitch之后，忽略模板说明，而是单击index.html，删除全部内容，并将其替换为上面的代码。

单击显示/实时按钮，它将在您的Cesium应用程序运行时打开一个新窗口。修改代码后，该视图将自动更新。

Breaking down the code (分解代码)

在HTML头部分中包含CesiumJS库。

<script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

创建一个HTML元素来保存 CesiumJS 部件：

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

提供您的 Cesium ion 帐户的访问令牌，以访问Bing图像。由于您已经登录Cesium ion，因此本教程将自动使用您帐户的默认访问令牌：

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2Nzk1ZWY5My1hNWFhLTRjYzUtYjA4ZS0wN2FmM2IzMWZhNzMiLCJpZCI6MzE1MDAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTU1MTI0ODN9._8DXJU8GwUNK0cxhejvCLL1dhPVF_MZoXVcROMJj4gM';

最后，创建名为Viewer的顶级 Cesium 部件，并告诉它使用您在上面定义的HTML元素：

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

Adding Cesium World Terrain (添加 Cesium 世界地形)

Cesium World Terrain是 Cesium ion 帐户附带的高分辨率全球地形资产。通过将创建Viewer 部件的行替换为以下内容，将其添加到您的Cesium应用中：

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

现在，当您缩放到特定位置（例如“kunming,china”）时，您会看到Cesium World Terrain的运行情况：

Loading your own data (加载自己的数据)

您可以将自己的数据上传到 Cesium ion，然后将其平铺到3D Tiles中，这是一种用于流式传输大量异构3D地理空间数据集的开放规范。在本教程中，我们提供了一个带有单个建筑物的示例KML / COLLADA程序包。使用它来创建3D Tiles贴图集并将其添加到应用程序。单击此处下载。

导航至ion并将您刚刚下载的文件AGI_HQ.kmz拖放到页面上的任何位置。选择“ KML / COLLADA”（作为3D Tiles）作为数据类型：

最后，点击上传。

上传完成后，ion将开始平铺过程并在右上角报告进度。平铺完成后，在左侧选择了新资产的情况下，按页面右下方示例代码旁边的copy按钮。将结果粘贴到创建查看器的行之后的Glitch中。

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

使用另一行代码将应用程序的默认视图设置为图块：

viewer.zoomTo(tileset);

恭喜你！您已经创建了第一个Cesium应用程序！
这是完整的示例供参考：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body><div id="cesiumContainer" style="width: 700px; height:400px"></div><script>Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2Nzk1ZWY5My1hNWFhLTRjYzUtYjA4ZS0wN2FmM2IzMWZhNzMiLCJpZCI6MzE1MDAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTU1MTI0ODN9._8DXJU8GwUNK0cxhejvCLL1dhPVF_MZoXVcROMJj4gM';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>

What’s next? (下一步是什么？)

现在您已经知道如何设置基本的Cesium应用程序，接下来可以浏览Sandcastle上的代码示例以探索所有功能和一些常见用例。