Cesium

官网教程地址 https://cesium.com/docs/tutorials/getting-started//tutorials/getting-started/

第一个程序代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>

  <link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

</head>

<body>

  <div id="cesiumContainer" style="width: 700px; height:400px"></div>

  <script>

    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4ZDdhNmRjMC0yNGMxLTRlYWItYjU5Ny1jZjJjZWIyNWI2YmIiLCJpZCI6NzY2Niwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MDExMjI4NH0.e_LkplBoPjo_fSqLsGAb97ypotS0G5tMHJoSxLkqyUw';

    var viewer = new Cesium.Viewer('cesiumContainer');

  </script>

</body>

</html>
  • Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4ZDdhNmRjMC0yNGMxLTRlYWItYjU5Ny1jZjJjZWIyNWI2YmIiLCJpZCI6NzY2Niwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MDExMjI4NH0.e_LkplBoPjo_fSqLsGAb97ypotS0G5tMHJoSxLkqyUw';

    这一句是表示用Cesium官网的图片数据提供商 CesiumIon ，值为对应的访问key，申请地址为：https://cesium.com/ion/signin/tokens，服务器在国外，请童鞋们自带梯子访问

  • 运行Cesium只要4个步骤即可：

1. 引入Cesium.js框架文件 ，如同引入jquery一样

2.引入Cesium的部件CSS样式文件，因为Cesium有很多的小部件，比如导航，动画，陀螺仪等

3.在HTML文件中，你要显示的地方，建立个Div 给个id

<div id="cesiumContainer" style="width: 700px; height:400px">

4.在Javascript 脚本中 调用语句，建立一个Cesium场景对象

var viewer = new Cesium.Viewer('cesiumContainer');

Cesium的官网API地址：https://cesiumjs.org/Cesium/Build/Documentation/ComponentDatatype.html

本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: 2019/02/19 17:00

Cesium入门-1-展示一个地球的更多相关文章

  1. Cesium入门2 - Cesium环境搭建及第一个示例程序

    Cesium入门2 - Cesium环境搭建及第一个示例程序 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 验 ...

  2. OSG入门即osgEarth建立一个地球的详细步骤

    OSG入门即osgEarth建立一个地球的详细步骤 转:http://blog.csdn.net/xiaol_deng/article/details/9246291 最近在学习有关osg的知识,刚开 ...

  3. cesium 入门开发系列矢量瓦片加载展示(附源码下载)

    前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 源代 ...

  4. Cesium入门4 - 创建Cesium Viewer

    Cesium入门4 - 创建Cesium Viewer Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 任何Ce ...

  5. Cesium入门1 - Cesium介绍

    Cesium入门1 - Cesium介绍 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ Cesium简介 Ce ...

  6. Cesium入门9 - Loading and Styling Entities - 加载和样式化实体

    Cesium入门9 - Loading and Styling Entities - 加载和样式化实体 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://c ...

  7. Cesium入门10 - 3D Tiles

    Cesium入门10 - 3D Tiles Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 我们团队有时把Ces ...

  8. Cesium入门8 - Configuring the Scene - 配置视窗

    Cesium入门8 - Configuring the Scene - 配置视窗 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coini ...

  9. Cesium入门7 - Adding Terrain - 添加地形

    Cesium入门7 - Adding Terrain - 添加地形 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com ...

随机推荐

  1. 关于INT_MIN

    来自为知笔记(Wiz)

  2. 【前端开发】nrm切换淘宝镜像&nvm管理node版本及切换

    说明:nrm是切换淘宝镜像用的,nvm是node的版本切换用的(可在自己电脑安装多个版本node,便于不同项目的支持) 一.nrm的安装及常见命令: 安装nrmnpm install -g nrm 查 ...

  3. 如何11 周打造全能Python工程师！

    在这个大数据和人工智能的时代,不管你是编程初学者,还是想学习一门其他语言充实自己,Python都是最好的选择之一. 它简洁.优雅.易学,被越来越多的大学作为计算机新生的入门语言: 它是大数据和人工智能 ...

  4. AD 复制状态检查

      微软提供了一下工具进行AD复制状态检查 Repadmin: http://technet.microsoft.com/en-us/library/cc811551%28v=ws.10%29.asp ...

  5. sql index改怎么建

    https://stackoverflow.com/questions/11299217/how-can-i-optimize-this-sql-query-using-indexes ------- ...

  6. 执行Commit时Oracle做哪些工作

    COMMIT是一个非常快的操作,当我们发布commit命令时,真正困难的动作已经完成,在数据库中已经执行了数据更改,所以已经完成了99%的任务,例如:下列操作已经产生: 1.在SGA(Buffer C ...

  7. HDU-5446-UnknownTreasure（组合数，中国剩余定理）

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=5446 题意: On the way to the next secret treasure hiding ...

  8. HDU-1028-Ignatius and the Princess III(母函数）

    链接: https://vjudge.net/problem/HDU-1028 题意: "Well, it seems the first problem is too easy. I wi ...

  9. element ui table的所有属性

    1. table 的props: data: { type: Array, default: function() { return []; } }, size: String, width: [St ...

  10. ElementUI 之 Message，自动弹出，信息不显示问题

    Vue.use() 这种写法可能会页面刷新时自动弹出 message,可将下图红框里换成 Vue.component(Message)