Cesium中文教程pdf下载链接
入门指南(Getting Started)
学习使用全球地形、图像、3D瓦片和地理编码(geocoding)构建Cesium应用程序。
1 即将构建的Cesium app,点击进行交互
CesiumJS是一个应用于web 3D地图的JavaScript库。Cesium ion是发现3D内容和填充自己的数据流中心。CesiumJS和ion一起协同工作,能够构建世界级3D地图应用程序。
2使用Cesium ion对3D数据进行优化,并在CesiumJS中可视化
第一个应用程序(Your first app)
下面是你的第一个Cesium应用程序源码:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
14.
15.
注意:创建一个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.
2.
创建一个HTML元素来保存CesiumJS widget:
1.
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.
2.
3.
4.
5.
6.
7.
8.
9.
10.
23.
24.
接下来呢?现在你已经知道如何设置一个基本的Cesium app,可以浏览Sandcastle上的代码示例,来了解所有特性和一些常见的使用案例。