原文地址：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. 一次性安装python常用模块

    链接:https://pan.baidu.com/s/1fuIxRUnkJJfzgrbQ8kIgvw 提取码:d1r6 电脑必须是win64才可以安装 Anaconda3安装完成后,不需要自己添加环境 ...

  2. 6_3.springboot2.x数据整合Mybatis(注解和非注解)

    1.配置文件 pom.xml 导入mybatis提供的启动器 <dependency> <groupId>org.mybatis.spring.boot</groupId ...

  3. 在Eclipse中修改Jsp页面的新增模板

    打开Eclipse的Preferences页面 路径: Window à Preferences 搜索"jsp",点击"Templates",选择要修改的Jsp ...

  4. 【HZOI2015】帕秋莉的超级多项式

    题面 题目分析 超级模板题: 多项式乘法 多项式求逆 多项式开根 多项式求导 多项式求积分 多项式求对数 多项式求自然对数为底的指数函数 多项式快速幂 代码实现 #include<iostrea ...

  5. [JZOJ4639] 【NOIP2016提高组A组7.16】Angel Beats!

    题目 描述 题目大意 给你一棵树,每次询问两个点,求出这两个点的子树的重心到其中每个点的距离和. 重心的定义是到其中每个点距离和最小的点(不一定在两棵子树内) 思考历程 想想以前我是怎么求重心的呢-- ...

  6. display和position以及其余标签的使用

    今天主要学习了两大标签display和position:中文名字是显示和位置,这两个元素在前端的学习还是很重要的,因为在css的布局里面会经常用到这两种元素. 还有一些其余的标签例:margin,pa ...

  7. centos 6.5 安装dotnet core 2.2

    .net core 官网地址 https://dotnet.microsoft.com/download 本次安装版本为.net core SDK v2.2.101 1.查看系统版本, 升级系统基本l ...

  8. zuul隔离机制

    文章转载自:https://blog.csdn.net/farsight1/article/details/80078099 ZuulException REJECTED_SEMAPHORE_EXEC ...

  9. 报错C1189 #error: "No Target Architecture"

    根本原因: 是因为单独包含了一些windows.h已经包含了的头文件如"fileapi.h","WinUser.h",但是却没有包含windows.h 或者先包 ...

  10. 06_Spring JDBCTemplate

    Spring对不同持久化技术的支持 ORM持久化技术 模板类 JDBC org.springframework.jdbc.core.JdbcTemplate Hibernate3.0 org.spri ...