原文地址：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):

<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”，就看到如下图效果：

 
Grand Canyon的10米精度地形
 
中国最专业的Cesium开发者社区

Ceisum官方教程1 -- 开始的更多相关文章

  1. Ceisum官方教程2 -- 项目实例（workshop）

    原文地址:https://cesiumjs.org/tutorials/Cesium-Workshop/ 概述 我们很高兴欢迎你加入Cesium社区!为了让你能基于Cesium开发自己的3d 地图项目 ...

  2. Ceisum官方教程3 -- 空间数据可视化

    原文地址:https://cesiumjs.org/tutorials/Visualizing-Spatial-Data/ 这篇教程教你如何使用Cesium的Entity API去绘制空间数据,如点, ...

  3. Unity性能优化（3）-官方教程Optimizing garbage collection in Unity games翻译

    本文是Unity官方教程,性能优化系列的第三篇<Optimizing garbage collection in Unity games>的翻译. 相关文章: Unity性能优化(1)-官 ...

  4. Unity性能优化（4）-官方教程Optimizing graphics rendering in Unity games翻译

    本文是Unity官方教程,性能优化系列的第四篇<Optimizing graphics rendering in Unity games>的翻译. 相关文章: Unity性能优化(1)-官 ...

  5. Unity性能优化（2）-官方教程Diagnosing performance problems using the Profiler window翻译

    本文是Unity官方教程,性能优化系列的第二篇<Diagnosing performance problems using the Profiler window>的简单翻译. 相关文章: ...

  6. Unity性能优化（1）-官方教程The Profiler window翻译

    本文是Unity官方教程,性能优化系列的第一篇<The Profiler window>的简单翻译. 相关文章: Unity性能优化(1)-官方教程The Profiler window翻 ...

  7. jeecg表单页面控件权限设置（请先看官方教程，如果能看懂就不用看这里了）

    只是把看了官方教程后,觉得不清楚地方补充说明一下: 1. 2. 3. 4.用"jeecgDemoController.do?addorupdate"这个路径测试,不出意外现在应该可 ...

  8. [转]Google Guava官方教程（中文版）

    Google Guava官方教程(中文版) http://ifeve.com/google-guava/

  9. Google Guava官方教程（中文版）

    Google Guava官方教程(中文版) 原文链接  译文链接 译者: 沈义扬,罗立树,何一昕,武祖  校对:方腾飞 引言 Guava工程包含了若干被Google的 Java项目广泛依赖 的核心库, ...

随机推荐

  1. k8s 安装

    1.1 k8s的架构 除了核心组件,还有一些推荐的Add-ons: 组件名称 说明 kube-dns 负责为整个集群提供DNS服务 Ingress Controller 为服务提供外网入口 Heaps ...

  2. 使用CEfSharp之旅（4）cefsharp 调用F12

    原文:使用CEfSharp之旅(4)cefsharp 调用F12 版权声明:本文为博主原创文章,未经博主允许不得转载.可点击关注博主 ,不明白的进群191065815 我的群里问 https://bl ...

  3. Caffe系列4——基于Caffe的MNIST数据集训练与测试（手把手教你使用Lenet识别手写字体）

    基于Caffe的MNIST数据集训练与测试 原创:转载请注明https://www.cnblogs.com/xiaoboge/p/10688926.html  摘要 在前面的博文中,我详细介绍了Caf ...

  4. Linq学习笔记(第一部分)

    本文分享自lliulun的30分钟linq教程,地址:http://www.cnblogs.com/liulun/archive/2013/02/26/2909985.html 一:与LINQ有关的语 ...

  5. vc 获取窗口标题GetWindowText

    今天在写一个模块,具体功能是想时刻监控用户当前活动窗口,需要获取窗口标题以及其它相关信息,记得API GetWindowText就是用来做这个的,结果试了半天,有的获取成功了有的获取失败了,而且有关汉 ...

  6. Error:Execution failed for task ':app:validateSigningDebug'.

    今天出差回来 第一天   把项目重新移植到新的电脑上 一运行 给我报错了 ! 这个是签名的路径错误  我们需要重新导一下路径就可以了 点击左上角 File ->  project structu ...

  7. tbody设置超出固定的高度出现滚动条，没超出不显示。

    没有超出时显示样式,不显示滚动条: 超出时显示滚动条: 1.html <table class="table"> <thead> <tr> &l ...

  8. loadrunner学习系列---脚本编写(2)

    loadrunner学习系列---脚本编写(2) 今天接着翻译http://www.wilsonmar.com/1lrscrīpt.htm上面关于LR脚本编写部分. VUser_Init部分 这里是V ...

  9. 进程互斥软件实现之Lamport面包店算法

    一. 进程互斥的实现方式 1. 软件方式: 保护临界区, 自己编写代码来实现对进程的控制. Dekker算法Peterson算法Lamport算法等 2. 硬件方式: 使用特殊指令保护临界区. 开关中 ...

  10. 第十三章 Odoo 12开发之创建网站前端功能

    Odoo 起初是一个后台系统,但很快就有了前端界面的需求.早期基于后台界面的门户界面不够灵活并且对移动端不友好.为解决这一问题,Odoo 引入了新的网站功能,为系统添加了 CMS(Content Ma ...