原文链接:Cesium Tutorials: Getting Started
文章目录
- 1. 你的第一个应用
- 2. 解析代码
- 3. 添加Cesium世界地形数据
- 4. 上传自定义数据
- 5. 总结
- 6.已知问题
1. 你的第一个应用
创建一个空的HTML文件,复制以下代码即可创建你在Cesium中的Hello World应用。
注意:代码中第11行的 defaultAccessToken 是需要登陆Cesium ion账号后才能获取到的,每个人都是不一样的。
(配置Cesium本地网络服务器的过程本文就不再赘述了,网上有很多现成的教程可以参考)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cesiumjs/releases/1.58/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs/releases/1.58/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width: 700px; height:400px"></div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWE0MjZhYy1jMzlhLTRkYzAtOWFlMC0zYTBmMzNjZWUwOGQiLCJpZCI6MTIxMDIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjAzNDM2NTR9.yNG39fq6l5JZPkgpq-jEyHmw4LpNVioa7EUxOUPKvm4';
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
注意:当你登录到Cesium ion后,上述代码将自动使用你默认的访问许可(Access token)。
官网教程使用的是一种叫做 Glitch 的在线Html编辑器,能够边修改代码边预览结果,使用起来还是挺方便的。当然用Sublime、VSCode等也可以,习惯哪个用哪个。代码的运行结果如下图所示。
2. 解析代码
接下来具体分析一下Hello World中的代码是怎么回事。
1.首先,将CesiumJS库包含在HTML的 head 部分:
<script src="https://cesiumjs/releases/1.58/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs/releases/1.58/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
2.然后创建一个HTML元素 div 来容纳CesiumJS组件:
<div id="cesiumContainer"></div>
3.此外,你的Cesium应用需要从你的ion账号中获取访问许可来访问必应影像。当你已经登陆到ion时,样例代码将使用你账户中默认的访问许可:
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWE0MjZhYy1jMzlhLTRkYzAtOWFlMC0zYTBmMzNjZWUwOGQiLCJpZCI6MTIxMDIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjAzNDM2NTR9.yNG39fq6l5JZPkgpq-jEyHmw4LpNVioa7EUxOUPKvm4';
4.最后,创建一个名为 Viewer 的顶级(top-level)Cesium组件,并告诉它使用上面所定义的HTML元素:
var viewer = new Cesium.Viewer('cesiumContainer');
3. 添加Cesium世界地形数据
Cesium世界地形是一种具有高分辨率的世界地形资源,将 Viewer 的声明部分改为如下代码,即可向你的应用中添加Cesium世界地形数据:
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});
修改完成后,搜索 Grand Canyon, AZ, USA,将视点缩放至该区域,就能浏览到高分辨率的地形数据了,如下图所示。
4. 上传自定义数据
用户也可以上传自定义数据到 ion 上,并将其转换为三维瓦片数据,这是一种开放的规范,用于流式传输大量异构的三位地理空间数据集(an open specification for streaming massive heterogeneous 3D geospatial datasets)。本教程使用了一种具有单一建筑的KML/COLLADA包作为样例数据,将其创建为三维瓦片集并添加到你的Cesium应用中,点击此处下载数据。
- 将下载好的数据 AGI_HQ.kmz 拖拽到你的 ion 主页中,选择 3D Tile 并点击 Upload。数据上传完成后,ion 将会对数据进行瓦片处理(Tiling process)并在网页右上方显示处理进度;
- 瓦片处理完成后,在 ion 左侧选择刚处理好的数据,右侧则显示数据的具体信息。复制 Code 中的代码,并将其粘贴到 HTML 代码中(位于Viewer声明部分之后):
var tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(your_asset_id)
})
);
- 通过以下代码将 Cesium 应用的默认视点位置修改到数据集处:
viewer.zoomTo(tileset)
- 保存代码,刷新页面,就会得到下图所示的结果。
5. 总结
经过上述修改,最终的代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cesiumjs/releases/1.58/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs/releases/1.58/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width: 700px; height:400px"></div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MWE0MjZhYy1jMzlhLTRkYzAtOWFlMC0zYTBmMzNjZWUwOGQiLCJpZCI6MTIxMDIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjAzNDM2NTR9.yNG39fq6l5JZPkgpq-jEyHmw4LpNVioa7EUxOUPKvm4';
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>
6.已知问题
我在按照教程进行的过程中,发现当 Viewer 的定义为:
var viewer = new Cesium.Viewer('cesiumContainer');
时,用户上传的数据 AGI_HQ.kmz 是能够显示出来的。
而当其定义修改为:
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});
时,该数据却无法显示。不知道哪里出现的问题。
更多推荐
Cesium菜鸟初学笔记:Getting Started
发布评论