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. LVM扩容之xfs文件系统

    LVM的基础请见:https://www.cnblogs.com/wxxjianchi/p/9698089.html 一.放大LV的容量.放大容量是由内而外来操作的. 1.设置新的lvm分区:用fdi ...

  2. python json序列化与反序列化操作

    python json序列化与反序列化操作 # dumps() dict-->str 序列化 # loads() str---dict 反序列化 result1 = json.dumps({'a ...

  3. python元类深入解析

    元类 什么是元类 元类是类的类,是类的模板(就如对象的模板是类一样) 元类的实例为类,类的实例为对象 元类是用来产生类的 动态语言和静态语言最大的不同,就是函数和类的定义,不是编译时定义的,是运行时动 ...

  4. MATLAB数值计算——0

    目录 MATLAB数值计算 1.solve() 2.fzero() 3.fsolve() MATLAB数值计算 MATLAB中文论坛基础板块常见问题归纳(出处: MATLAB中文论坛) 登录http: ...

  5. 2019-2020-9 20199317 《Linux内核原理与分析》第九周作业

    第8章  进程的切换和系统的一般执行过程 1  进程调度的时机 1.1  硬终端与软中断 进程调度的时机都与中断相关,中断有很多种,都是程序执行过程中的强制性转移,转移到操作系统内核相应的处理程序.中 ...

  6. 大型情感剧集Selenium：3_元素定位 #华为云·寻找黑马程序员#

    关于昨天的文章 今天有朋友反馈,代码运行的时候,selenium提示警告 DeprecationWarning: use options instead of chrome_options drive ...

  7. Windows下利用IIS建立网站并实现局域网共享

    https://blog.csdn.net/qq_41485414/article/details/82754252 https://www.cnblogs.com/linuxprobe-sarah/ ...

  8. [TimLinux] Linux shell获取进程pid

    调用脚本时,获取进程PID: (/this/is/a/script/file.sh > /out/to/log.txt & echo $!) & 脚本内部,获取进程PID: ec ...

  9. 洛谷 题解 P1083 【借教室】

    0x00 先看数据范围 $ 1≤n,m≤10^6 $,第一反应 \(O(nlogn)\) 0x01 5 pts 直接输出 '0' 即可. 不要问我怎么知道输出 '0' 可以拿 5 pts. 保持微笑. ...

  10. A.Math Problem

    题意:这里有n个区间,你需要添加一个区间,使得每个区间都至少有一个共同的点在这个区间,且长度最小,输出最小的长度. 分析:找出所有区间右端点的最小值,和所有区间左端点的最大值,然后答案就是max(0, ...