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. tensorflow：模型的保存和训练过程可视化

    在使用tf来训练模型的时候,难免会出现中断的情况.这时候自然就希望能够将辛辛苦苦得到的中间参数保留下来,不然下次又要重新开始. 保存模型的方法: #之前是各种构建模型graph的操作(矩阵相乘,sig ...

  2. Kotlin实战案例：带你实现RecyclerView分页查询功能（仿照主流电商APP，可切换列表和网格效果）

    随着Kotlin的推广,一些国内公司的安卓项目开发,已经从Java完全切成Kotlin了.虽然Kotlin在各类编程语言中的排名比较靠后(据TIOBE发布了 19 年 8 月份的编程语言排行榜,Kot ...

  3. P1046 陶陶摘苹果

    题目描述 陶陶家的院子里有一棵苹果树,每到秋天树上就会结出1010个苹果.苹果成熟的时候,陶陶就会跑去摘苹果.陶陶有个3030厘米高的板凳,当她不能直接用手摘到苹果的时候,就会踩到板凳上再试试. 现在 ...

  4. 04-kubernetes 资源清单定义入门

    目录 资源对象 创建资源的方法 清单帮助命令 创建测试清单 资源的三种创建方式 资源对象 workload:Pod, ReplicaSet, Deployment, StatefulSet, Daem ...

  5. linux 系统自动定制运行 crontab

    在UNIX下怎样实现和Windows下“计划任务”一样的功能 $crontab -e 编辑脚本 $crontab -l 察看脚本   用$crontab -e 编辑脚本,加入下列行 :分 小时 星期 ...

  6. TensorFlow2.0

    安装开发环境 1.首先安装 anaconda(https://www.anaconda.com/) 2.修改anaconda的镜像源 conda config --add channels https ...

  7. 使用echarts常用问题总结

    1,echarts配合element ui的抽屉插件出现报错,上次解决方法是使用element ui 抽屉的open事件,让在打开事件重新加载,我们项目的需求是点击某个数据,要传递这条数据包含的其他值 ...

  8. 浅析babel产出

    (function(modules) { // 缓存对象 var installedModules = {}; // require方法 function __webpack_require__(mo ...

  9. webpack4分包方案

    webpack4放弃了 commonsChunkPlugin,使用更方便灵活智能的 splitChunks 来做分包的操作. 下面有几个例子,并且我们假设所有的chunks大小至少为30kb(采用sp ...

  10. 16.Django学习之文件上传和下载

    上传就这么六步! 一. settings配置文件中配置 MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'medias').repl ...