cesium 学习笔记(1)安装及环境配置
cesium.js
最基本的安装及环境配置,不同于官方教程,进一步探索官方下载包结构,了解node.js
、服务器、Cesium基础包的部分内容。
相关资源
貌似用国内的网络访问这些资源速度有点不尽人意,有条件的同学可以科学访问,或者慢慢等也是可以哒。
官方教程
官方教程(Getting Started)
github
API
官方博客
cesium-workshop(github)
在线Demo(用于测试浏览器支持)
在线运行环境
安装包结构
在此主要关注三个地方(我们下面都会用到的):
- 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.js
const 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命令执行
文件夹结构
package.json 文件内容(该文件可以通过在文件夹下执行命令npm init -y
生成);安装 express 时附加参数 save,即可保存在 package.json 中的 dependencies
字段中。
$npm i express --save
官方脚本搭建(也不会太复杂)
官方教程中,推荐我们直接在安装目录下使用两条命令来设置和创建一个可以让 Cesium 应用运行的 Web 服务:
$npm install
$node server.js
显然,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
具体有什么用,字面意思理解,就先放着吧,以后用到了再说)。当前文件夹下:
$npm init -y
$npm i express compression fs url request yargs --save
进入package.json,看到 dependencies
字段已经添加:
运行脚本文件 server.js
:
$node server.js
Cesium development server running locally. Connect to http://localhost:8080/
默认情况下服务部署在了本地,端口号为8080,如何改变端口号以及如何部署到公网或局域网中呢?
我们可以借助 yargs
模块来控制命令行参数,进而控制端口号和部署范围。
注意到 server.js
文件中有这么一段:
yargs
为我们提供了port和public等一系列参数让我们控制命令行窗口,因此我们可以使用如下命令来设置端口号和部署位置:
$node server --public true # 公网
$node server --public # 公网
Cesium development server running publicly. Connect to http://localhost:8080/
$node server --public false # 本机
$node server # 本机
Cesium development server running locally. Connect to http://localhost:8080/
$node server --public --port 3303 # 设置端口号
Cesium development server running publicly. Connect to http://localhost:3303/
运行结果
就用上面那最后一条命令来搭建服务器吧:
$node server --public --port 3303
Cesium development server running publicly. Connect to http://localhost:3303/
效果:
使用 Node.js
搭建服务器虽然麻烦了那么一丢丢,但相对于笨重的 IDE,其轻便型可想而知,而且它的可靠性和可操作性较好(IDE没办法加载出1.5.0的地球模型的问题在 Node.js
的搭建过程中并没有出现),推荐对前端感兴趣、愿意进一步学习的小伙伴们使用 Node.js
搭建啦~