范例中所有范例可以在Github中搜索:ExamplesforCesium

Cesium ['siːzɪəm]是一款开源的JavaScript开源库,开发者通过Cesium,实现无插件的创建三维球和二维地图。Cesium通过WebGL技术实现图形的硬件加速,并且跨平台,跨浏览器,并提供动态数据的可视化展现。

Cesium本意是化学元素铯,其是定义秒的最精确标准,普遍地用于制作精细的原子钟,而Cesium项目专注于动态可视化方面,这也是其取名为Cesium的内在涵义。 

准备工作

  • 浏览器
    确保你的浏览器支持WebGL,推荐Chrome
    如果无法确定你的浏览器是否支持,可以访问webglreport网站获取详情
  • Tomcat
    在本系列中,使用tomcat,且默认读者了解如何通过tomcat发布服务
  • 开发环境
    如果没有特殊喜好,如果自己的开发机器不是特别差,推荐使用WebStorm。该IDE是收费的,不过,你懂的
  • Cesium产品包
    本文中,使用的是Cesium-1.25。通过官网可以方便获取

产品包清单

  • Apps
    Cesium详细的范例程序,建议都自己仿照着敲一遍,会有不少收获
  • Build
    Release包,打包后的脚本以及CSS,Workers等,以及文档
  • Source
    源码
  • Specs
    Cesium的自动化单元测试,采用Jasmine框架 ,这个也是非常好用的,可以实现自动化测试框架以及接口覆盖率等统计效果,会面会有一个具体章节来介绍
  • 其他
    gulpfile.js:打包脚本,后续会有专门介绍

Hello,World

看到index.html,相信你已经忍不住的双击了。很遗憾,WebGL出于安全性的考虑,不允许以本地file的方式打开,因此,你需要将Cesium文件夹放到tomcat中webapps下发布,以localhost的方式发布。(如果你不了解如何在tomcat中发布网站,不用担心,这个过程非常简单,Google一下,相信会有很多相关博文可供参考。)

下面,我们试着完成一个页面,创建一个Cesium三维球。

首先,新建examples文件夹,并在examples文件夹中新建文件hello.html,实现我们第一个范例。

接着,在hello.html中粘贴如下代码:

该代码内容如下:1引入Cesium.js脚本和对应的css文件,我们就完成了相关脚本的加载工作;2同时创建id= cesiumContainer的div,并且创建Cesium.Viewer窗口,且该窗口对应刚才创建的div。运行该html文件,我们很轻松的创建了第一个WebGL Globe,效果如下:


Hello World2

如上,我们轻松愉快的体验了一把Cesium,但这只是万里长征的一小步。万事开头难,所以这个头一定要做好。

上面的hello.html本身没有什么问题,但对于开发人员,或多或少都需要以源码方式加载,便于调试和问题的定位,但如上的范例直接加载Build下的Release脚本,对开发人员来说略显不足,下面我们就升级一下这个范例。

Cesium采用Require.js的框架,用兴趣的同学可以在网上了解一下Require.js的基本概念。我们下载require.min.js脚本,保存在Cesium/examples/js/文件夹中,统一管理脚本。并在examples文件夹中,新建hello2.html.

在hello2.html中,代码如下:

和hello.html的代码相似,但我们并没有直接引用Build下的Cesium.js脚本,而是引用了require.js脚本:

<script src="./js/require.min.js" data-main="./js/main"></script>

data-main属性可以在require脚本加载结束后,指定加载的第一个文件,这里是main.js(保存在Cesium/examples/js/下)。

main.js中代码如下:

在该脚本中,变量developMode来记录是否以Release或源码方式来加载脚本,并根据该变量值来设置对应的文件路径。最后,调用onload函数,结束main.js脚本的使命。

Onload函数?这个函数在哪里定义的?细心的用户不难发现,该函数的实现是在hello2.html中,在该函数中,用户创建div,并创建Cesium.Viewer窗口绑定该div,实现三维球的加载,其逻辑和hello.html完全一样,只是封装在了onload函数内。

这样,我们基本上完成了一个完整的范例,可以设置developMode的值,选择是否需要加载源码进行调试。

Cesium应用篇:1快速搭建的更多相关文章

  1. 玩转 SpringBoot 2 快速搭建 | RESTful Api 篇

    概述 RESTful 是一种架构风格,任何符合 RESTful 风格的架构,我们都可以称之为 RESTful 架构.我们常说的 RESTful Api 是符合 RESTful 原则和约束的 HTTP ...

  2. 快速搭建ELK7.5版本的日志分析系统--搭建篇

    title: 快速搭建ELK7.5版本的日志分析系统--搭建篇 一.ELK安装部署 官网地址:https://www.elastic.co/cn/ 官网权威指南:https://www.elastic ...

  3. 玩转SpringBoot 2 快速搭建 | Spring Initializr 篇

    SpringBoot 为我们提供了外网 Spring Initializr 网页版来帮助我们快速搭建 SpringBoot 项目,如果你不想用 IDEA 中的插件,这种方式也是不错的选择.闲话少说,直 ...

  4. Github pages + jekyll 博客快速搭建

    Github pages + jekyll 博客快速搭建 寻找喜欢的模版 https://github.com/jekyll/jekyll/wiki/sites http://jekyllthemes ...

  5. 利用yeoman快速搭建React+webpack+es6脚手架

    自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些 ...

  6. 基于Docker快速搭建多节点Hadoop集群--已验证

    Docker最核心的特性之一,就是能够将任何应用包括Hadoop打包到Docker镜像中.这篇教程介绍了利用Docker在单机上快速搭建多节点 Hadoop集群的详细步骤.作者在发现目前的Hadoop ...

  7. 基于 Jenkins 快速搭建持续集成环境

      什么是持续集成 随着软件开发复杂度的不断提高,团队开发成员间如何更好地协同工作以确保软件开发的质量已经慢慢成为开发过程中不可回避的问题.尤其是近些年来,敏捷(Agile) 在软件工程领域越来越红火 ...

  8. Cesium原理篇:3最长的一帧之地形(2:高度图)

           这一篇,接着上一篇,内容集中在高度图方式构建地球网格的细节方面.        此时,Globe对每一个切片(GlobeSurfaceTile)创建对应的TileTerrain类,用来维 ...

  9. django 快速搭建blog

    如果本文看不懂的,去看的我视频吧!http://www.testpub.cn/ ------------------------------------------- Django 自称是“最适合开发 ...

  10. [原创] zabbix学习之旅五:如何快速搭建一个报警系统

    通过之前的文章,我们已搭建好zabbix server.agent和mail客户端,现在万事俱备,只差在server的界面中进行相应配置,即可快速搭建一个报警系统.总的来说,快速搭建一个报警系统的顺序 ...

随机推荐

  1. Underscore-分析

    0.Ecmascript的版本重要时间点 Ecmascript262-3 1999年,ie5.5及以后完全支持,ff,chrome等全部支持Ecmascript262-4 因为跨越太大,废弃Ecmas ...

  2. 学习笔记:java线程安全

    首先得明白什么是线程安全: 线程安全是编程中的术语,指某个函数 (计算机科学).函数库在多线程环境中被调用时,能够正确地处理各个线程的局部变量,使程序功能正确完成. 这是维基百科里的资料,看完后还不是 ...

  3. C#与Java对比学习:类型判断、类与接口继承、代码规范与编码习惯、常量定义

    类型判断符号: C#:object a;  if(a is int) { }  用 is 符号判断 Java:object a; if(a instanceof Integer) { } 用 inst ...

  4. Expert 诊断优化系列------------------给TempDB 降温

    前面文章针对CPU.内存.磁盘.语句.等待讲述了SQL SERVER的一些基本的问题诊断与调优方式.为了方便阅读给出导读文章链接方便阅读: SQL SERVER全面优化-------Expert fo ...

  5. 一小时学会C# 6

    c# 6已经出来有一段时间了,今天我们就详细地看一下这些新的特性. 一.字符串插值 (String Interpolation) C# 6之前我们拼接字符串时需要这样 var Name = " ...

  6. C#设计模式之桥接

    IronMan之桥接 前言 前面的几个篇幅都是在讲"部件"的生产已经简简单单的使用,以后可能要对"部件"进行升级,不是不对它本身升级,是其它方式的升级,可以让它 ...

  7. 谷歌chrome浏览器www.tradeadexchange.com广告弹窗跳转劫持病毒

    近期大量网友出现chrome浏览器被劫持的情况,表现如下:           ·  点击(访问)任意网站任意链接均有概率弹出www.tradeadexchange.com.           ·  ...

  8. [ASP.NET MVC 大牛之路]02 - C#高级知识点概要(1) - 委托和事件

    在ASP.NET MVC 小牛之路系列中,前面用了一篇文章提了一下C#的一些知识点.照此,ASP.NET MVC 大牛之路系列也先给大家普及一下C#.NET中的高级知识点.每个知识点不太会过于详细,但 ...

  9. 获取进程CPU占用率

    获取进程CPU占用率 // 时间转换 static __int64 file_time_2_utc(const FILETIME* ftime) { LARGE_INTEGER li; li.LowP ...

  10. java继承、抽象和接口

    package zdbExtends;public class Grandparent {        public Grandparent(){                System.out ...