学会使用全球地形, 影像, 3d tile(模型切片), 地理编码创建一个 Cesium 程序.
CesiumJS 是一个基于 JavaScript 的浏览器器 3d 地图引擎. Cesium ion 是一个 3d 内容的发布中心并且可以把你自己的数据进行切片, 发布服务. CesiumJS 和 ion 配合起来可以创建世界级 3d 地图程序.
3D 数据经过 ion 或者 cesiumlab 进行处理, 并且在 cesiumjs 中可视化.
第一个程序
代码如下:
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js">
- </script>
- ;
- <link href="" 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 之后, 可以用你自己的 access token 替换代码里的.
所有 web 程序需要一个 Web 服务器, CesiumJS 也不例外. 为了简单, 这个教程跳过本地服务器的搭建, 使用 Glitch 和 一个在线的 IDE 做程序开发. 点击这里创建一个 glitch 项目. Glitch 加载之后, 忽略模板提示, 直接点击 index.HTML 删除整个内容, 把上面的代码粘贴过去.
点击
按钮, 它会打开一个新窗口, 并显示了 Cesium 的程序. 修改代码后, 这个弹出窗口会自动刷新.
Glitch 预览界面
代码分析:
在 HTML 的 head 标签内包含 CesiumJS 的库引用
- <script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js">
- </script>
- ;
- <link href="" rel="stylesheet">
创建一个 HTML 标签去承载 CesiumJS 控件 (widget):
从你的 ion 账户提供一个 token 去访问 Bing 影像底图:
最后, 创建一个名为 Viewer 的 Cesium 控件, 并且让他去使用上面定义的 HTML 元素:
添加 Cesium 全球地形
Cesium 全球地形是一个高精度地形库, 在你的 ion 账户里已经有访问权限. 用下述代码替换我们做的第一个示例里的创建 Viewer 的部分:
下来我们在预览界面缩放到特定位置, 比如 "Grand Canyon, AZ", 就看到如下图效果:
Grand Canyon 的 10 米精度地形
来源: http://www.bubuko.com/infodetail-2875122.html