Ceisum官方教程1 -- 开始

时间：2018-12-06 20:10:03 阅读：213 评论：0 收藏：0 [点我收藏+]

原文地址：https://cesium.com/docs/tutorials/getting-started/
学会使用全球地形、影像、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="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" 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="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
创建一个HTML标签去承载CesiumJS控件(widget):
技术分享图片