Ceisum官方教程1 -- 开始
原文地址:https://cesium.com/docs/tutorials/getting-started/
学会使用全球地形、影像、3d tile(模型切片)、地理编码创建一个Cesium程序。
CesiumJS是一个基于javascript的浏览器器3d地图引擎。Cesium ion是一个3d内容的发布中心并且可以把你自己的数据进行切片、发布服务。CesiumJS和 ion 配合起来可以创建世界级3d地图程序。

第一个程序
代码如下:
<!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的程序。修改代码后,这个弹出窗口会自动刷新。

代码分析:
在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):
<div id="cesiumContainer"></div>
从你的ion账户提供一个token去访问Bing影像底图:
Cesium.Ion.defaultAccessToken = 'your_access_token';
最后,创建一个名为Viewer的Cesium控件,并且让他去使用上面定义的HTML元素:
var viewer = new Cesium.Viewer('cesiumContainer');
添加Cesium全球地形
Cesium全球地形是一个高精度地形库,在你的ion账户里已经有访问权限。用下述代码替换我们做的第一个示例里的创建Viewer的部分:
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});
下来我们在预览界面缩放到特定位置,比如“Grand Canyon, AZ”,就看到如下图效果:


Ceisum官方教程1 -- 开始的更多相关文章
- Ceisum官方教程2 -- 项目实例(workshop)
原文地址:https://cesiumjs.org/tutorials/Cesium-Workshop/ 概述 我们很高兴欢迎你加入Cesium社区!为了让你能基于Cesium开发自己的3d 地图项目 ...
- Ceisum官方教程3 -- 空间数据可视化
原文地址:https://cesiumjs.org/tutorials/Visualizing-Spatial-Data/ 这篇教程教你如何使用Cesium的Entity API去绘制空间数据,如点, ...
- Unity性能优化(3)-官方教程Optimizing garbage collection in Unity games翻译
本文是Unity官方教程,性能优化系列的第三篇<Optimizing garbage collection in Unity games>的翻译. 相关文章: Unity性能优化(1)-官 ...
- Unity性能优化(4)-官方教程Optimizing graphics rendering in Unity games翻译
本文是Unity官方教程,性能优化系列的第四篇<Optimizing graphics rendering in Unity games>的翻译. 相关文章: Unity性能优化(1)-官 ...
- Unity性能优化(2)-官方教程Diagnosing performance problems using the Profiler window翻译
本文是Unity官方教程,性能优化系列的第二篇<Diagnosing performance problems using the Profiler window>的简单翻译. 相关文章: ...
- Unity性能优化(1)-官方教程The Profiler window翻译
本文是Unity官方教程,性能优化系列的第一篇<The Profiler window>的简单翻译. 相关文章: Unity性能优化(1)-官方教程The Profiler window翻 ...
- jeecg表单页面控件权限设置(请先看官方教程,如果能看懂就不用看这里了)
只是把看了官方教程后,觉得不清楚地方补充说明一下: 1. 2. 3. 4.用"jeecgDemoController.do?addorupdate"这个路径测试,不出意外现在应该可 ...
- [转]Google Guava官方教程(中文版)
Google Guava官方教程(中文版) http://ifeve.com/google-guava/
- Google Guava官方教程(中文版)
Google Guava官方教程(中文版) 原文链接 译文链接 译者: 沈义扬,罗立树,何一昕,武祖 校对:方腾飞 引言 Guava工程包含了若干被Google的 Java项目广泛依赖 的核心库, ...
随机推荐
- JS 常用的两个客户端输出方法
document.write(str) 描述:在网页的<body>标记,输出str的内容. document意思“文档”,就是整个网页了. document是一个文档对象,代表 ...
- Django之跨表查询——正反向查询(ForeignKey)
1.正向查询和反向查询: 外键的查询操作: 正向查询: # 正向查询 # 基于对象,跨表查询 book_obj = models.Book.objects.all().first() ret = bo ...
- java关键字之instanceof
首先来看段测试代码 public class TestInstanceof{ public static void main(String[] args){ int a = 1; if(a insta ...
- JAVA中日期 yyyy-MM-dd HH:mm:ss和yyyy-MM-dd hh:mm:ss的区别
HH是24小时制,hh是12小时制 区别就是:大写的H是二十四小时制的小时数(0-23),小写的h是十二小时制的小时数(am/pm 1-12) //24小时制 SimpleDateFormat sdf ...
- JavaScript特效源码(4、鼠标特效)
1.鼠标感应--渐现特效 鼠标感应渐显图片[平时很模糊的图片鼠标一放上就显示清楚] [修改图片名称即可][共2步] ====1.将以下代码加入HTML的<head></head> ...
- Docker配置JDK1.8
1.安装Docker(菜鸟教程有) https://www.runoob.com/docker/centos-docker-install.html 2.docker下载centos镜像(用作配置jd ...
- php中date() 函数
实例 格式化本地日期和时间,并返回格式化的日期字符串: <?php // Prints the day echo date("l") . "<br>&q ...
- 83 落单的数 II
原题网址:http://www.lintcode.com/zh-cn/problem/single-number-ii/ 给出3*n + 1 个的数字,除其中一个数字之外其他每个数字均出现三次,找到这 ...
- 杂项-公司:Axway
ylbtech-杂项-公司:Axway Axway 公司是法国Sopra 集团从事应用系统集成(EAI/B2Bi)软件及相关咨询服务业务的全资子公司.Axway公司成立于1980年,总部位于美国凤凰城 ...
- SPSS与Streams的集成实现实时预测
SPSS与Streams的集成实现实时预测 SPSS Modeler 是一个数据挖掘工作台,提供了一个可了解数据并生成预测模型的最先进的环境.Streams 提供了一个可伸缩的高性能环境,对不断变化的 ...