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

Cesium中文教程pdf下载链接
入门指南(Getting Started)
学习使用全球地形、图像、3D瓦片和地理编码(geocoding)构建Cesium应用程序。
Cesium中文教程-入门指南(Getting Started)_第1张图片
           1 即将构建的Cesium app,点击进行交互
  CesiumJS是一个应用于web 3D地图的JavaScript库。Cesium ion是发现3D内容和填充自己的数据流中心。CesiumJS和ion一起协同工作,能够构建世界级3D地图应用程序。
Cesium中文教程-入门指南(Getting Started)_第2张图片
        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,删除里面的所有内容,并使用上面的代码。
Cesium中文教程-入门指南(Getting Started)_第3张图片
              3 Glitch IDE
点击 按钮,它将打开一个新的窗口作为Cesium应用的响应。当你修改代码时,视图将自动更新。
Cesium中文教程-入门指南(Getting Started)_第4张图片
          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世界地形的效果:
Cesium中文教程-入门指南(Getting Started)_第5张图片
             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)  

Cesium中文教程-入门指南(Getting Started)_第6张图片
     6 加载到CesiumJS中的3D Tiles asset,与你自己的asset看起来有所不同
祝贺!你已经创建了第一个Cesium app。
以下是完整的参考示例:

1.	  
2.	  
3.	  
4.	    
5.	    
6.	    
7.	  
8.	  
9.	  
10. 23. 24.

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

你可能感兴趣的:(Cesium中文教程,Cesium中文教程,数据可视化)