相关资源
貌似用国内的网络访问这些资源速度有点不尽人意,有条件的同学可以科学访问,或者慢慢等也是可以哒。
- 官网 - https://cesiumjs.org/
- 安装包(官网 - https://cesiumjs.org/downloads/
- 官方教程 - https://cesiumjs.org/tutorials/
- 官方教程(Getting Started) - https://cesiumjs.org/tutorials/cesium-up-and-running/#making-sure-that-your-browser-is-cesium-ready
- github - https://github.com/AnalyticalGraphicsInc/cesium
- API - https://cesiumjs.org/refdoc/
- 官方博客 - https://cesium.com/blog/
- cesium-workshop(github) - https://github.com/AnalyticalGraphicsInc/cesium-workshop
- 在线Demo(用于测试浏览器支持 - https://cesiumjs.org/Cesium/Build/Apps/CesiumViewer/
- 在线运行环境 - https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/
安装包结构
在此主要关注三个地方(我们下面都会用到的):
- Build -
Cesium.js
资源包及其相关依赖的集合; - server.js - 官方提供的基于
Node.js
的运行环境搭建的脚本文件; - Apps - 一个最简单的官方实例,包含了一些样本数据和程序框架,我们可以借鉴其中的内容。
引用官网下载页面的文件结构描述:
运行实例与环境搭建
由于cesium
的特性(具体是啥我不太清楚),其调试和运行必须在网络环境下进行,因此自行搭建服务器就成了必不可少的一个步骤。当前很多IDE(集成开发环境)如Visual Studio、WebStorm等都提供了本地服务器的功能,供我们调试本地项目,除此之外,我们还可以利用 Node.js
自行搭建服务器。
下面分别介绍 借助IDE搭建 和 利用Node.js
搭建 两种方法。
最简单-借助VS(IDE)
创建一个新的文件夹,就叫做1.50-test
吧,在里面新建一个文件夹static
和一个html文件index.html
。
将 Build\CesiumUnminified 文件夹下的所有东西拷贝到static
中,然后将Apps/HelloWorld.html的内容拷贝到index.html
中,注意修改html文件中对于js文件和css文件的引用相对路径。
打开VS2013(2010/2015/2017都行),将包含static
和index.html
的文件夹作为网站打开
然后点击在浏览器中查看
就可以看到我们的 Cesium 实例被成功部署到了 4186 端口上(这个端口号是随机生成的,从空闲的端口号中随意选一个这样)。
然而下面这张图貌似有点问题(地球呢???),不知什么原因,使用1.5.0(2018年10月1日发布)版本通过VS方法搭建运行环境时,地球体无法加载,如果使用1.4.9版本(更早的没试过)就不会出现这个问题(过程完全一致,1.4.9的下载包结构和1.5.0基本一毛一样)。
使用Node.js
Node.js是一个基于 chrome V8 引擎的 JavaScript 运行环境,普遍用于搭建服务器和前端项目模块化开发,是前端开发中重要的一部分。其使用和操作可以参照这篇博文:
自行搭建(超简单)
在 Node.js 搭建服务器的过程中,我们一般使用 express
来创建服务并监听,我们可以通过下面这段脚本将我们的 Cesium 实例部署为一个网络服务(需要安装 express
模块)
server.js1
2
3
4
5
6
7
8
9const express = require('express');
const app = express();
app.use(express.static(__dirname));
var server = app.listen(3333, '0.0.0.0', () => {
console.log('实例访问地址: %s:%d',
server.address().address,
server.address().port);
})
使用node server命令执行(0.0.0.0
的意思是允许使用127.0.0.1、localhost、IPv4等访问,只要对方能ping得通服务器,就可以用这种方法访问)
文件夹结构
package.json 文件内容(该文件可以通过在文件夹下执行命令npm init -y
生成);安装 express 时附加参数 save,即可保存在 package.json 中的 dependencies
字段中。
1 | npm i express --save |
官方脚本搭建(也不会太复杂)
官方教程中,推荐我们直接在安装目录下使用两条命令来设置和创建一个可以让 Cesium 应用运行的 Web 服务:
1 | npm install |
显然,server.js
文件是创建服务的脚本文件。
我们新建一个文件夹(命名 1.50-test1
吧)。在里面新建一个文件夹static
和一个html文件index.html
。
将 Build\CesiumUnminified 文件夹下的所有东西拷贝到static
中,然后将Apps/HelloWorld.html的内容拷贝到index.html
中,注意修改html文件中对于js文件和css文件的引用相对路径。
(好吧就是模仿一下使用 IDE 部署服务的那些个操作,最终得到static和index.html)
接着把下载的包里面的 server.js 文件也拷贝到这个文件夹中
接着我们研究一下这个 server.js
要运行究竟需要什么东西:
它需要就安装咯(不清楚那个 compression
和request
具体有什么用,字面意思理解,就先放着吧,以后用到了再说)。当前文件夹下:
1 | npm init -y |
进入package.json,看到 dependencies
字段已经添加:
运行脚本文件 server.js
:
1 | node server.js |
默认情况下服务部署在了本地,端口号为8080,如何改变端口号以及如何部署到公网或局域网中呢?
我们可以借助 yargs
模块来控制命令行参数,进而控制端口号和部署范围。
注意到 server.js
文件中有这么一段:
yargs
为我们提供了port和public等一系列参数让我们控制命令行窗口,因此我们可以使用如下命令来设置端口号和部署位置:
1 | node server --public true # 公网 |
运行结果
就用上面那最后一条命令来搭建服务器吧:
1 | node server --public --port 3303 |
效果:
使用 Node.js
搭建服务器虽然麻烦了那么一丢丢,但相对于笨重的 IDE,其轻便型可想而知,而且它的可靠性和可操作性较好(IDE没办法加载出1.5.0的地球模型的问题在 Node.js
的搭建过程中并没有出现),推荐对前端感兴趣、愿意进一步学习的小伙伴们使用 Node.js
搭建啦~