原文地址: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开发者社区

转载于:https://www.cnblogs.com/cesium1/p/10062971.html

Ceisum官方教程1 -- 开始相关推荐

  1. opencv python下载_[福利] OpenCV4 Python 最新中文版官方教程来了(附下载)

    教程简介 OpenCV 是计算机视觉中经典的专用库,然而其中文版官方教程久久不来.近日,一款最新 OpenCV4.1 版本的完整中文版官方教程出炉,读者朋友可以更好的学习了解 OpenCV 相关细节. ...

  2. basler相机参数简要中文说明_附下载| OpenCV最新中文版官方教程

    OpenCV是计算机视觉中经典的专用库,然而其中文版官方教程久久不来.近日,一款最新OpenCV4.1 版本的完整中文版官方教程出炉,读者朋友可以更好的学习了解OpenCV相关细节.教程根据官方提供的 ...

  3. 福利,PyTorch中文版官方教程来啦(附下载)

    PyTorch 中文版官方教程来了. PyTorch 是近期最为火爆的深度学习框架之一,然而其中文版官方教程久久不来.近日,一款完整的 PyTorch 中文版官方教程出炉,读者朋友从中可以更好的学习了 ...

  4. PyTorch官方教程大更新:增加标签索引,更加新手友好

    点击上方↑↑↑"视学算法"关注我 来源:公众号 量子位 授权 PyTorch官方教程,现已大幅更新: 提供标签索引,增加主题分类,更加新手友好. 不必再面对一整页教学文章茫然无措, ...

  5. PyTorch中文版官方教程来啦(附下载)

    PyTorch 中文版官方教程来了. PyTorch 是近期最为火爆的深度学习框架之一,然而其中文版官方教程久久不来.近日,一款完整的 PyTorch 中文版官方教程出炉,读者朋友从中可以更好的学习了 ...

  6. 60分钟入门PyTorch,官方教程手把手教你训练第一个深度学习模型(附链接)

    来源:机器之心 本文约800字,建议阅读5分钟. 本文介绍了官方教程入门PyTorch的技巧训练. 近期的一份调查报告显示:PyTorch 已经力压 TensorFlow 成为各大顶会的主流深度学习框 ...

  7. 如何在Windows上做Python开发?微软出了官方教程(附链接)

    来源:机器之心 本文附教程,建议阅读5分钟. 本文为你分享微软最近发布的关于在Windows上做Python开发的一系列官方教程. 在Windows上做Python开发太痛苦?微软最近发布了一系列官方 ...

  8. PyTorch中文版官方教程来啦(附pdf下载)

    关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! PyTorch 中文版官方教程来了. PyTorch 是近期最为火爆的深度学习框架 ...

  9. 微软官方教程教你如何在Windows上做Python开发?

    关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! 教程地址:https://docs.microsoft.com/zh-cn/win ...

最新文章

  1. 软件测试职业培训中心,软件测试工程师就业班
  2. 【车道线检测】一种基于神经网络+结构约束的车道线检测方法
  3. Java IO 体系(二): inputstream与outputstream
  4. C#学习笔记——数据库篇(1)
  5. 转载:【OpenCV入门教程之四】 ROI区域图像叠加初级图像混合 全剖析
  6. redis 安装使用
  7. atom 安装 xdebug 调试 php 代码
  8. mysql 数据库 额外_Manager额外参数怎么学?mysql数据库学习
  9. 随机生成1024个数,存入一段内存,用指针实现获取1024个数的最大数地址,最小数地址
  10. wdcp mysql数据库无法链接_MySQL数据库之阿里云服务器中centos7 解决wdcp中不能远程访问mysql服务的问题...
  11. Leetcode每日一题:176.second-highest-salary(第二高的薪水)
  12. 内向的人能做管理吗?
  13. python学习之dict的items(),values(),keys()
  14. 利用filebeat推送mysql慢查询日志
  15. CentOS 6.6 安装 Node.js
  16. python lasso回归分析_解析python实现Lasso回归
  17. EtherCAT基于SOEM建立主站程序
  18. linux查看cpu架构命令,linux查看cpu型号命令
  19. echarts的边框图片之切图(重要)以及公共面板样式的制作
  20. 淘宝首页和详情页的规范

热门文章

  1. Android CheckBox
  2. 迅捷cad_迅捷数组
  3. java方法重载和重载方法_Java中的重载与重载
  4. 多重搜索算法_Android多重搜寻,例如传送,搜寻联络人
  5. java repl_Java REPL – jshell
  6. 开课吧Java:微服务设计遵循的规约有哪些?
  7. 开课吧:Html5有哪些新特性?
  8. 基于OpenCV的计算机视觉入门(3)图像特效
  9. mysql 常用管理命令
  10. Ubuntu系列硬盘安装