cesium 学习笔记(1)安装及环境配置


cesium.js 最基本的安装及环境配置,不同于官方教程,进一步探索官方下载包结构,了解node.js、服务器、Cesium基础包的部分内容。

相关资源

 貌似用国内的网络访问这些资源速度有点不尽人意,有条件的同学可以科学访问,或者慢慢等也是可以哒。

官网
安装包(官网)

官方教程
官方教程(Getting Started)
github
API
官方博客
cesium-workshop(github)
在线Demo(用于测试浏览器支持)
在线运行环境

安装包结构

cesium 学习笔记(1)安装及环境配置

在此主要关注三个地方(我们下面都会用到的):

  1. Build - Cesium.js 资源包及其相关依赖的集合;
  2. server.js - 官方提供的基于 Node.js 的运行环境搭建的脚本文件;
  3. Apps - 一个最简单的官方实例,包含了一些样本数据和程序框架,我们可以借鉴其中的内容。

引用官网下载页面的文件结构描述:
cesium 学习笔记(1)安装及环境配置

运行实例与环境搭建

 由于cesium的特性(具体是啥我不太清楚),其调试和运行必须在网络环境下进行,因此自行搭建服务器就成了必不可少的一个步骤。当前很多IDE(集成开发环境)如Visual StudioWebStorm等都提供了本地服务器的功能,供我们调试本地项目,除此之外,我们还可以利用 Node.js 自行搭建服务器。
 下面分别介绍 借助IDE搭建利用Node.js搭建 两种方法。

最最最简单的搭建方法 - 借助VS(IDE)

 创建一个新的文件夹,就叫做1.50-test吧,在里面新建一个文件夹static 和一个html文件index.html
cesium 学习笔记(1)安装及环境配置
 将 Build\CesiumUnminified 文件夹下的所有东西拷贝到static中,然后将Apps/HelloWorld.html的内容拷贝到index.html中,注意修改html文件中对于js文件和css文件的引用相对路径
cesium 学习笔记(1)安装及环境配置
cesium 学习笔记(1)安装及环境配置

 打开VS2013(2010/2015/2017都行),将包含staticindex.html的文件夹作为网站打开
cesium 学习笔记(1)安装及环境配置

然后点击在浏览器中查看
cesium 学习笔记(1)安装及环境配置

 就可以看到我们的 Cesium 实例被成功部署到了 4186 端口上(这个端口号是随机生成的,从空闲的端口号中随意选一个这样)。
 然而下面这张图貌似有点问题(地球呢???),不知什么原因,使用1.5.0(2018年10月1日发布)版本通过VS方法搭建运行环境时,地球体无法加载,如果使用1.4.9版本(更早的没试过)就不会出现这个问题(过程完全一致,1.4.9的下载包结构和1.5.0基本一毛一样)。
cesium 学习笔记(1)安装及环境配置

使用Node.js

 Node.js是一个基于 chrome V8 引擎的 JavaScript 运行环境,普遍用于搭建服务器和前端项目模块化开发,是前端开发中重要的一部分。其使用和操作可以参照这篇博文:

Nodejs学习笔记(1) Nodejs安装+借助express模块简单部署服务器

自行搭建(超简单)

 在 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命令执行
cesium 学习笔记(1)安装及环境配置

文件夹结构
cesium 学习笔记(1)安装及环境配置

package.json 文件内容(该文件可以通过在文件夹下执行命令npm init -y生成);安装 express 时附加参数 save,即可保存在 package.json 中的 dependencies 字段中。

$npm i express --save

cesium 学习笔记(1)安装及环境配置

官方脚本搭建(也不会太复杂)

 官方教程中,推荐我们直接在安装目录下使用两条命令来设置和创建一个可以让 Cesium 应用运行的 Web 服务:

$npm install
$node server.js

 显然,server.js 文件是创建服务的脚本文件。

 我们新建一个文件夹(命名 1.50-test1 吧)。在里面新建一个文件夹static 和一个html文件index.html
cesium 学习笔记(1)安装及环境配置
 将 Build\CesiumUnminified 文件夹下的所有东西拷贝到static中,然后将Apps/HelloWorld.html的内容拷贝到index.html中,注意修改html文件中对于js文件和css文件的引用相对路径
cesium 学习笔记(1)安装及环境配置
cesium 学习笔记(1)安装及环境配置

(好吧就是模仿一下使用 IDE 部署服务的那些个操作,最终得到staticindex.html

 接着把下载的包里面的 server.js 文件也拷贝到这个文件夹中
cesium 学习笔记(1)安装及环境配置

 接着我们研究一下这个 server.js 要运行究竟需要什么东西:
cesium 学习笔记(1)安装及环境配置

 它需要就安装咯(不清楚那个 compressionrequest具体有什么用,字面意思理解,就先放着吧,以后用到了再说)。当前文件夹下:

$npm init -y
$npm i express compression fs url request yargs --save

进入package.json,看到 dependencies 字段已经添加:
cesium 学习笔记(1)安装及环境配置

运行脚本文件 server.js

$node server.js
Cesium development server running locally.  Connect to http://localhost:8080/

默认情况下服务部署在了本地,端口号为8080,如何改变端口号以及如何部署到公网或局域网中呢?

我们可以借助 yargs 模块来控制命令行参数,进而控制端口号和部署范围。

注意到 server.js 文件中有这么一段:
cesium 学习笔记(1)安装及环境配置
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/

 效果:
cesium 学习笔记(1)安装及环境配置

cesium 学习笔记(1)安装及环境配置

 使用 Node.js 搭建服务器虽然麻烦了那么一丢丢,但相对于笨重的 IDE,其轻便型可想而知,而且它的可靠性和可操作性较好(IDE没办法加载出1.5.0的地球模型的问题在 Node.js 的搭建过程中并没有出现),推荐对前端感兴趣、愿意进一步学习的小伙伴们使用 Node.js 搭建啦~

end