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

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

原创最新推荐文章于 2025-06-14 23:05:05 发布 · 3w 阅读

69 ·

CC 4.0 BY-SA版权

文章标签：

#Cesium中文教程 #数据可视化

Cesium中文教程专栏收录该内容

15 篇文章

订阅专栏

本文介绍CesiumJS的基本使用方法，包括构建3D地图应用、使用Cesiumion优化3D数据并可视化，以及如何加载和显示自定义3DTiles数据。

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

Cesium中文教程pdf下载链接
 入门指南(Getting Started)
学习使用全球地形、图像、3D瓦片和地理编码（geocoding）构建Cesium应用程序。
cesium
　　　　　　　　　　　1 即将构建的Cesium app，点击进行交互
　　CesiumJS是一个应用于web 3D地图的JavaScript库。Cesium ion是发现3D内容和填充自己的数据流中心。CesiumJS和ion一起协同工作，能够构建世界级3D地图应用程序。

　　　　　　　　2使用Cesium ion对3D数据进行优化，并在CesiumJS中可视化
第一个应用程序(Your first app)
下面是你的第一个Cesium应用程序源码：

1.	<!DOCTYPE html>  
2.	<html lang="en">  
3.	<head>  
4.	  <meta charset="utf-8">  
5.	  <script src="https://cesiumjs.org/releases/1.56.1/Build/Cesium/Cesium.js"></script>  
6.	  <link href="https://cesiumjs.org/releases/1.56.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet">  
7.	</head>  
8.	<body>  
9.	  <div id="cesiumContainer" style="width: 700px; height:400px"></div>  
10.	  <script>  
11.	    Cesium.Ion.defaultAccessToken = 'your_access_token';  
12.	    var viewer = new Cesium.Viewer('cesiumContainer');  
13.	  </script>  
14.	</body>  
15.	</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，删除里面的所有内容，并使用上面的代码。

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

　　　　　　　　　　4 CesiumJS默认使用由ion账户提供的Bing底图
代码分解(Breaking down the code)
在HTML的head内容中包含CesiumJS库

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

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

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

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

1.	Cesium.Ion.defaultAccessToken = '';

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

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

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

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

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

　　　　　　　　　　　　　5 10米分辨率科罗拉多大峡谷
加载自己数据(Loading your own data)
　　你可以上传自己的数据到Ceisum ion，并将其瓦片化为3D Tiles，3D Tiles是一种对海量异构三维地理空间数据流的开放规范。本教程中，我们提供带有单个建筑示例的KML/COLLADA包。使用它创建一个3D Tiles tileset，并将其添加到应用程序中。点击（clicking here）来下载。
　　导航到ion，并将刚下载的AGI_HQ.kmz文件拖拽到页面任何位置，点击上传。
上传完成后，ion将立刻开始tiling处理并在右上角报告进度。瓦片化完成后，将在左侧出现新asset选项，按页面右下角示例代码旁边的copy（复制）按钮。将结果复制到Glitch中，创建Viewer行之后。

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

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

1.	viewer.zoomTo(tileset)

　　　　　6 加载到CesiumJS中的3D Tiles asset，与你自己的asset看起来有所不同
祝贺！你已经创建了第一个Cesium app。
以下是完整的参考示例：

1.	<!DOCTYPE html>  
2.	<html lang="en">  
3.	<head>  
4.	  <meta charset="utf-8">  
5.	  <script src="https://cesiumjs.org/releases/1.56.1/Build/Cesium/Cesium.js"></script>  
6.	  <link href="https://cesiumjs.org/releases/1.56.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet">  
7.	</head>  
8.	<body>  
9.	  <div id="cesiumContainer" style="width: 700px; height:400px"></div>  
10.	  <script>  
11.	    Cesium.Ion.defaultAccessToken = 'your_access_token';  
12.	    var viewer = new Cesium.Viewer('cesiumContainer', {  
13.	        terrainProvider: Cesium.createWorldTerrain()  
14.	    });  
15.	  
16.	    var tileset = viewer.scene.primitives.add(  
17.	        new Cesium.Cesium3DTileset({  
18.	            url: Cesium.IonResource.fromAssetId(your_asset_id)  
19.	        })  
20.	    );  
21.	    viewer.zoomTo(tileset);  
22.	  </script>  
23.	</body>  
24.	</html>

接下来呢？现在你已经知道如何设置一个基本的Cesium app，可以浏览Sandcastle上的代码示例，来了解所有特性和一些常见的使用案例。