Cesium中文教程-入门指南(Getting Started)

入门指南(Getting Started)

学习使用全球地形、图像、3D瓦片和地理编码（geocoding）构建Cesium应用程序。

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.78/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.78/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>

注意：创建一个Cesium ion账户

注意上面代码中的your_access_token占位符。创建一个Cesiun ion账户来使用本教程中的3D内容。在这里注册（Sign up here）,上面的示例代码将使用你的token自动进行更新。如果已经有账户，请登录（sign in）。　　Web应用需要web服务，CesiumJS同样需要。为了简单期间，本教程略过服务设置，使用在线应用IDE Glitch进行web开发。点击（clicking here）创建一个新的Glitch工程，忽略模板中的说明，点击index.html，删除里面的所有内容，并使用上面的代码。　　

点击按钮，它将打开一个新的窗口作为Cesium应用的响应。当你修改代码时，视图将自动更新。

代码分解(Breaking down the code)

在HTML的head内容中包含CesiumJS库

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

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

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

ion账户提供一个token来访问Bing底图。由于已经登录了Cesium ion，所以默认账户的token自动在本教程中使用：

Cesium.Ion.defaultAccessToken = '';

最后，创建一个顶部的Cesium widget，命名为Viewer，使用上面定义的HTML div元素：

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

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

Cesium World Terrain（Cesium世界地形）是一个高分辨率的全球地形asset，其保存在你的ion账户中。用以下代码代替创建的Viewer widget，将它添加到你的Cesium应用程序：

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

当你放大到例如“Grand Canyon，AZ”这样的地方，将看到Cesium世界地形的效果：

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

你可以上传自己的数据到Ceisum ion，并将其瓦片化为3D Tiles，3D Tiles是一种对海量异构三维地理空间数据流的开放规范。在本教程中，我们提供带有单个建筑示例的KML/COLLADA包。使用它创建一个3D Tiles tileset，并将其添加到应用程序中。点击下载。　　导航到ion，并将刚下载的AGI_HQ.kmz文件拖拽到页面任何位置，点击上传。　　

然后在拼贴选项中选择Cesium World Terrain作为您的参考地形，以将建筑模型固定在地面上。

　　上传完成后，ion将立刻开始tiling处理并在右上角报告进度。瓦片化完成后，将在左侧出现新asset选项，按页面右下角示例代码旁边的copy（复制）按钮。将结果复制到Glitch中，创建Viewer行之后。

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

使用一行代码，将程序的默认视图设置为tileset：

viewer.zoomTo(tileset)

祝贺！你已经创建了第一个Cesium app。以下是完整的参考示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.78/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.78/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', {
        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>

Cesium中文教程-入门指南