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. 解决maven创建过慢问题和快捷键

    archetypeCataloginternal idea常用的快捷键 Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ct ...

  2. 复制节点（cloneNode）

    DOM提供用来复制节点方法. cloneNode():将为给定节点创建一个副本,这个方法的返回值是一个指向新建克隆节点的引用指针, reference = node.cloneNode(deep) 这 ...

  3. 【ASP.NET Core学习】Web API

    这里介绍在ASP.NET Core中使用Web API创建 RESTful 服务,本文使用VSCode + NET Core3.0 创建简单Rest API 格式化输出 JSON Patch请求 Op ...

  4. 关于新浪和腾讯短网址API接口的调用

    最新新浪t.cn短网址和腾讯url.cn短网址生成api接口,快速生成t.cn及url.cn超短链接,接口都可以正常调用,觉得不错可以收藏一下. 新浪短网址api接口:1. http://yldwz. ...

  5. Djangoday3template

    template第一个demo从后台传递数据到前端从后台传递list前端for循环显示内容后台传输dict到前端 template第一个demo template存在app/templates目录下 ...

  6. redis - redis数据结构与API

    通用命令 keys:遍历所有的key[keys一般不再生产环境使用],时间复杂度O(n) keys * keys he* keys he[h-l]* keys ph? dbsize:计算key的总数, ...

  7. js中跳转的方法

    javascript中的location.href有很多种用法,主要如下. self.location.href="/url" 当前页面打开URL页面location.href=& ...

  8. ubuntu下仅仅获取网卡一的ip地址 && shell中字符串拼接

    问题描述: ubuntu下仅仅获取网卡一的ip地址 问题背景: eth0,eth1,eth2……代表网卡一,网卡二,网卡三…… lo代表127.0.0.1,即localhost | 问题描述: 已知字 ...

  9. openlayers5-webpack 入门开发系列一初探篇（附源码下载）

    前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...

  10. AcWing 291.蒙德里安的梦想

    题目:蒙德里安的梦想 链接:(蒙德里安的梦想)[https://www.acwing.com/problem/content/293/] 题意:求把N * M的棋盘分割成若干个1 * 2的长方形,有多 ...