1. 概述

感觉网上已经有不少关于cesium的教程了，但是学习一个框架最快的办法就是熟悉其自带的实例了。cesium网站上提供了一系列实例，就想通过这些实例总结下学习cesium的知识；当然，如果有别的实例，也会一起总结。

从cesium官方网站上下载的build包括了源代码，帮助资料，Sandcastle实例等内容，并且能够通过Node.JS建立关于该版本的cesium网站，能够从中查阅文档，实例学习等。

一般来说要使用cesium，需要建立一个服务器，让cesium在服务器的域内使用。但其实也不用那么复杂，如果只是学习，可以设置浏览器跨域，也能够让cesium运行，毕竟cesium是基于WebGL的前端框架，基本与后台无关。浏览器设置跨域的办法可以自行在网上搜索解决办法，各种浏览器的设置不同。

cesium自带的实例位置如下图所示：

图1：cesium实例位置

可以将这些实例直接拖入到设置跨域的本地浏览器中运行，可以到达在服务器域内运行同等的效果。提醒一下设置跨域的本地浏览器应该只运行自己编写的实例或者确定安全的网页，否则存在安全风险。

2. 实例

按照惯例，任何语言或者框架的第一步都是HelloWorld，cesium也不例外。

2.1. HelloWorld.html

<!DOCTYPE html>

<html lang="en">

<head>

    <!-- Use correct character set. -->

    <meta charset="utf-8">

    <!-- Tell IE to use the latest, best version. -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->

    <meta name="viewport"

        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <title>Hello World!</title>

    <script src="../Build/Cesium/Cesium.js"></script>

    <style>

        @import url(../Build/Cesium/Widgets/widgets.css);

        html,

        body,

        #cesiumContainer {

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

    <div id="cesiumContainer"></div>

    <script src="HelloWorld.js"></script>

</body>

</html>

这段HTML代码比较简单:首先是导入了组件cesium.js及其样式表widgets.css,两者都来自于cesium源代码；然后创建了一个名为cesiumContainer的div图层，并设定其样式；最后是导入了自己写的JS代码HelloWorld.js。

2.2. HelloWorld.js

"use strict"

//Add your ion access token from cesium.com/ion/

Cesium.Ion.defaultAccessToken = '----';

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

HelloWorld.js就更加简单了，仅仅通过一句代码就创建了包含多个组件的数字地球组件。注意默认创建的数字地球图层中包含的Bing地图是需要Token支持的，可以在cesium的官网上申请一个。否则有可能地球无法显示。

3. 结果

在浏览器中运行的结果如下：

图2：cesium数字地球

Cesium案例解析(一)——HelloWorld的更多相关文章

  1. Cesium案例解析(二)——ImageryLayers影像图层

    目录 1. 概述 2. 实例 2.1. ImageryLayers.html 2.2. ImageryLayers.js 2.2.1. 代码 2.2.2. 解析 3. 结果 1. 概述 Cesium支 ...

  2. Cesium案例解析(六)——3DTilesInspector监视器

    目录 1. 概述 2. 案例 1. 概述 3D Tiles作为传输和渲染大规模3D地理空间数据的格式,应对的都是大规模数据的场景,Cesium提供了一个监视3D Tiles数据的监视器,可以通过这个监 ...

  3. Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据

    目录 1. 概述 2. 案例 3. 结果 1. 概述 3D Tiles是用于传输和渲染大规模3D地理空间数据的格式,例如摄影测量,3D建筑,BIM / CAD,实例化特征和点云等.与常规的模型文件格式 ...

  4. Cesium案例解析(四)——3DModels模型加载

    目录 1. 概述 2. 代码 3. 解析 4. 参考 1. 概述 Cesium自带的3D Models示例,展示了如何加载glTF格式三维模型数据.glTF是为WebGL量身定制的数据格式,在网络环境 ...

  5. Cesium案例解析(三)——Camera相机

    目录 1. 概述 2. 实例 2.1. Camera.html 2.2. Camera.js 2.2.1. 飞行至某一点 2.2.2. 飞行至某区域 2.2.3. 两地之间飞行 2.2.4. 设置视图 ...

  6. 【Python五篇慢慢弹（5）】类的继承案例解析，python相关知识延伸

    类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...

  7. SQL Server 连接问题案例解析（1）

    SQL Server 连接问题案例解析(1) 转载自:http://blogs.msdn.com/b/apgcdsd/archive/2015/04/27/sql.aspx?CommentPosted ...

  8. 【java设计模式】（6）---迭代器模式（案例解析）

    设计模式之迭代器模式 一.java迭代器介绍 1.迭代器接口 在jdk中,与迭代器相关的接口有两个:Iterator 与 Iterable. Iterator:迭代器,Iterator及其子类通常是迭 ...

  9. 案例解析｜政府信息化的BI建设应用 .

    一.行业背景 某建设厅综合监管信息化平台,是政企业务协同的平台之一,同时兼具协作.门户.办公应用集成.用户权限管理等多项功能.在此要求基础上,选择中间件基础技术平台,可以在最大程度满足平台功能需求的前 ...

随机推荐

  1. 【2018寒假集训Day 8】【最小生成树】Prim和Kruskal算法模板

    Luogu最小生成树模板题 Prim 原理与dijkstra几乎相同,每次找最优的点,用这个点去松弛未连接的点,也就是用这个点去与未连接的点连接. #include<cstdio> #in ...

  2. 【集训Day3 单调队列】【2018寒假集训Day 5更新】最大子序列和

    最大子序列和(maxsum) [问题描述] 输入一个长度为n的整数序列(A1,A2,……,An),从中找出一段连续的长度不超过M的子序列,使得这个序列的和最大. 例如: 序列 1, -3, 5, 1, ...

  3. day20191001国庆默写

    day20191001国庆默写恢复 重在理解,而不是死记硬背.认真专心看6遍,做6遍. 学会码字,每天码字二小时.持之以恒. 任重道远,出发,走多少算多少.100分的试卷,会做20分也比一个努力也没有 ...

  4. JavaScript-----3.变量

    1.变量的使用 变量在使用的时候分两步:1. 声明变量 2. 赋值 1.1声明变量 //声明变量 var age;//声明一个名字为age的变量 var是JS的一个关键字,用于声明变量,使用该关键字声 ...

  5. java 小程序分析：参数传递

    public class Test{ public static void main (String [] ABC){ StringBuffer a = new StringBuffer(" ...

  6. CSS3选择器归类整理

    CSS3选择器归类整理(附CSS优先级要点) CSS是用于网页设计可用的最强大的工具之一.使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签.在深入研究CSS选择器之前,我们应该先搞懂C ...

  7. PHP页面跳转三种实现方法

    一.header()函数 header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器.header()函数的定义如下 ...

  8. 一个null，差点把系统给弄崩溃了

    今天生产上面发现了一个奇异的bug,URL上面会带上一个ID,这个ID是关联别的系统的,类似这种格式 xxx.xxx.xxx.xxx  ,是别的系统自己填写的,我们的URL会带上id=xxx.xxx. ...

  9. shell脚本sed awk

    删除第一行 sed '1d' test.txt 假装执行 sed -i '1d' test.txt 执行 从第二行删除到行尾 sed '2,$d' test.txt sed -i '2,$d' tes ...

  10. Flink入门（二）——Flink架构介绍

    1.基本组件栈 了解Spark的朋友会发现Flink的架构和Spark是非常类似的,在整个软件架构体系中,同样遵循着分层的架构设计理念,在降低系统耦合度的同时,也为上层用户构建Flink应用提供了丰富 ...