[转][cesium]1.添加本地服务器
转自: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.添加本地服务器的更多相关文章
- vue中使用window.open会在url前自动添加本地服务器的地址bug修复
不能写成www.baidu.com 需要写成https://www.baidu.com
- 在vue项目中添加一个html页面,开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
- Git本地服务器搭建及使用详解
Git本地服务器搭建及使用 Git是一款免费.开源的分布式版本控制系统.众所周知的Github便是基于Git的开源代码库以及版本控制系统,由于其远程托管服务仅对开源免费,所以搭建本地Git服务器也是个 ...
- Python 创建本地服务器环境生成二维码
一. 需求 公司要做一个H5手机端适配页面,因技术问题所以H5是外包的,每次前端给我们源码,我们把源码传到服务器让其他人访问看是否存在bug,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...
- 两台装有Ubuntu系统的服务器搭建VPN(一台为本地服务器,另一台为云服务器)
我们搭建VPN采用的是openvpn,搭建过程总体需要经过三大步骤: 1.openvpn的安装与配置 2.端口转发 3.系统重启iptables规则自动生效 注意:以下所有名令在ro ...
- SQL Server 添加链接服务器
背景 在SQL SERVER中,如果我们查询数据库需要关联另外一台数据库中表,在这种情况下我们可以通过添加服务器链接来实现. 案列 方式1.sql server 提供了图形化界面,如下: 右键> ...
- Sql server之路 (三)添加本地数据库SDF文件
12月25日 今天搞了半天 添加本地数据库Sdf文件到项目里.总是出现问题. 安装环境 Vs2008 没有安装的环境 1.Vs2008 sp1 2. 适用于 Windows 桌面的 Microsoft ...
- IIS搭建本地服务器,花生壳实现外网通过域名访问网站
配置服务器 作为一个青年,没有实力,做不出标图所示的服务器. 作为一个学生,买不起服务器 作为一个小孩,买不起域名 但别忘了 作为一个平民玩家,只要有耐心 装备迟早会做出来的 (注:感觉有钱与没钱还是 ...
- 搭建Git本地服务器
搭建Git本地服务器 参考文章:http://www.ossxp.com/doc/git/gitolite.html 当前任务,学习中... 公司小范围用法: 服务器上做的: .在服务器上建立一个用户 ...
随机推荐
- 小纪a
感觉挺好的两段代码:虽然已经存在,但是这是我自己敲出来的,没有照抄,真心话,所以记录下来. 1.菱形代码: #include <stdio.h>void main() { int i, j ...
- Java中this和super关键字
今天练习到Java中的this和super关键字,我有如下总结: 1.子类继承父类,子类初始化对象,必须先调用父类构造方法,因为随时有可能要使用父类的成员变量. 2.get和set方法只是对成员变量进 ...
- 阿里云centos远程连接mysql
首先在服务器管理控制台设置防火墙规则 添加规则 使用root登录到mysql 添加一个用户名,权限为%的远程连接用户 grant all on *.* to 'yuancheng'@'%' ident ...
- jQuery实现广告弹窗
首先设置一个固定的窗口位于右下角,效果如下: 代码: jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下: <!DOCTYPE ht ...
- Forword(请求转发)与Redirect(重定向) 区别
1.从数据共享上 Forword是一个请求的延续,可以共享request的数据 Redirect开启一个新的请求,不可以共享request的数据 2.从地址栏 Forword转发地址栏不发生变化 Re ...
- left join加上where条件的困惑
eft join的困惑:一旦加上where条件,则显示的结果等于inner join将where 换成 and 用where 是先连接然后再筛选 用and 是先筛选再连接 数据库在通过连接两张或多 ...
- 记录结果再利用的"动态规划"之背包问题
参考<挑战程序设计竞赛>p51 https://www.cnblogs.com/Ymir-TaoMee/p/9419377.html 01背包问题 问题描述:有n个重量和价值分别为wi.v ...
- Regsvr32 在64位机器上的用法(转载)
转载:http://blog.csdn.net/xuzhimin1991/article/details/65436864 regsvr32是windows上注册 OLE 控件(DLL 或 Activ ...
- 同时import两个版本的QtQuick【1、2】,默认使用
在同一个qml文件中,如果同时import了Qtquick1和2,那么谁在后面,谁起作用
- topcoder srm 310 div1
problem1 link 先计算出最上面.最下面一层,根据最上面一层的数量计算答案. import java.util.*; import java.math.*; import static ja ...