转自:http://www.cnblogs.com/fuckgiser/p/5633748.html

此系列cesium总教程:  https://www.cnblogs.com/fuckgiser/p/5706842.html

范例:https://pasu.github.io/ExamplesforCesium/examples/examples.html#Primer

范例中所有范例可以在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. vue中使用window.open会在url前自动添加本地服务器的地址bug修复

    不能写成www.baidu.com 需要写成https://www.baidu.com

  2. 在vue项目中添加一个html页面,开启本地服务器

    在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...

  3. Git本地服务器搭建及使用详解

    Git本地服务器搭建及使用 Git是一款免费.开源的分布式版本控制系统.众所周知的Github便是基于Git的开源代码库以及版本控制系统,由于其远程托管服务仅对开源免费,所以搭建本地Git服务器也是个 ...

  4. Python 创建本地服务器环境生成二维码

    一. 需求 公司要做一个H5手机端适配页面,因技术问题所以H5是外包的,每次前端给我们源码,我们把源码传到服务器让其他人访问看是否存在bug,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...

  5. 两台装有Ubuntu系统的服务器搭建VPN(一台为本地服务器,另一台为云服务器)

    我们搭建VPN采用的是openvpn,搭建过程总体需要经过三大步骤:   1.openvpn的安装与配置    2.端口转发    3.系统重启iptables规则自动生效  注意:以下所有名令在ro ...

  6. SQL Server 添加链接服务器

    背景 在SQL SERVER中,如果我们查询数据库需要关联另外一台数据库中表,在这种情况下我们可以通过添加服务器链接来实现. 案列 方式1.sql server 提供了图形化界面,如下: 右键> ...

  7. Sql server之路 (三)添加本地数据库SDF文件

    12月25日 今天搞了半天 添加本地数据库Sdf文件到项目里.总是出现问题. 安装环境 Vs2008 没有安装的环境 1.Vs2008 sp1 2. 适用于 Windows 桌面的 Microsoft ...

  8. IIS搭建本地服务器,花生壳实现外网通过域名访问网站

    配置服务器 作为一个青年,没有实力,做不出标图所示的服务器. 作为一个学生,买不起服务器 作为一个小孩,买不起域名 但别忘了 作为一个平民玩家,只要有耐心 装备迟早会做出来的 (注:感觉有钱与没钱还是 ...

  9. 搭建Git本地服务器

    搭建Git本地服务器 参考文章:http://www.ossxp.com/doc/git/gitolite.html 当前任务,学习中... 公司小范围用法: 服务器上做的: .在服务器上建立一个用户 ...

随机推荐

  1. 小纪a

    感觉挺好的两段代码:虽然已经存在,但是这是我自己敲出来的,没有照抄,真心话,所以记录下来. 1.菱形代码: #include <stdio.h>void main() { int i, j ...

  2. Java中this和super关键字

    今天练习到Java中的this和super关键字,我有如下总结: 1.子类继承父类,子类初始化对象,必须先调用父类构造方法,因为随时有可能要使用父类的成员变量. 2.get和set方法只是对成员变量进 ...

  3. 阿里云centos远程连接mysql

    首先在服务器管理控制台设置防火墙规则 添加规则 使用root登录到mysql 添加一个用户名,权限为%的远程连接用户 grant all on *.* to 'yuancheng'@'%' ident ...

  4. jQuery实现广告弹窗

    首先设置一个固定的窗口位于右下角,效果如下: 代码: jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下: <!DOCTYPE ht ...

  5. Forword(请求转发)与Redirect(重定向) 区别

    1.从数据共享上 Forword是一个请求的延续,可以共享request的数据 Redirect开启一个新的请求,不可以共享request的数据 2.从地址栏 Forword转发地址栏不发生变化 Re ...

  6. left join加上where条件的困惑

    eft join的困惑:一旦加上where条件,则显示的结果等于inner join将where 换成 and 用where 是先连接然后再筛选   用and 是先筛选再连接 数据库在通过连接两张或多 ...

  7. 记录结果再利用的"动态规划"之背包问题

    参考<挑战程序设计竞赛>p51 https://www.cnblogs.com/Ymir-TaoMee/p/9419377.html 01背包问题 问题描述:有n个重量和价值分别为wi.v ...

  8. Regsvr32 在64位机器上的用法(转载)

    转载:http://blog.csdn.net/xuzhimin1991/article/details/65436864 regsvr32是windows上注册 OLE 控件(DLL 或 Activ ...

  9. 同时import两个版本的QtQuick【1、2】,默认使用

    在同一个qml文件中,如果同时import了Qtquick1和2,那么谁在后面,谁起作用

  10. topcoder srm 310 div1

    problem1 link 先计算出最上面.最下面一层,根据最上面一层的数量计算答案. import java.util.*; import java.math.*; import static ja ...