Cesium简介——环境搭建

Cesium是什么

• Cesium是一个跨平台、跨浏览器的展示三维地球和地图的javascript库

• Cesium使用WebGL来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebGL:

• Cesium是基于Apache20许可的开源程序。它可以免费的用于商业和非商业用途。 Cesium官方网站

Cesium能做什么

• 支持2D25D3D形式的地图展示

• 可以绘制各种几何图形、高亮区域，支持导入图片，甚至3D模型等多种数据可视化展示。

• 可用于动态数据可视化并提供良好的触摸支持，支持绝大多数的浏览器和mobile。

• Cesium还支持基于时间轴的动态数据展示

Cesium需要浏览器支持WebGL，可以通过CesiumJS官网提供的一个HelloWorld例子来测试自己的浏览器是否支持Cesium。（推荐使用Chrome）

测试地址：CesiumJS – Cesium

下载Cesium源代码

最新的release版本代码下载地址： Learning Center – Cesium

下载后，将zip文件解压到您选择的新目录中，内容应该看起来像下面。

​

直接点击index.html是无效的，需要放入Web Server容器中，才能运行起来。

Server端

Cesium是纯前端的代码，官方给出的源代码中，配套了nodejs的server端，以及可以通过nodejs进行安装部署。实际上可以将Cesium部署进入tomcat（geoserver）、apache、nginx等服务器中。

1. 从官网中下载Node.js(Node.js), 实际上nodejs有一些参数可是配置，使用默认的参数即可。.

2. 在Cesium所在的文件夹目录，打开cmd或者bash敲入命令npm install

下载依赖的npm模块，比如express等。如果成功，会在Cesium文件夹中床架 ‘node_modules’文件夹。

1. 最后在cmd或者bash中执行 node server.js 或者 npm start

2. 成功之后能看到如下的截图

​

控制台会显示：

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

备注：不能关闭控制台，保持一直运行状态。打开浏览器，输入 http://localhost:8080 即可访问Cesium.

如果你不想用nodejs

Cesium是一个开源项目，GitHub上的下载地址为：GitHub - CesiumGS/cesium: An open-source JavaScript library for world-class 3D globes and maps 最简单的安装方式，就是普通的JS文件加载，只需要从Github中下载其js代码，放到自己的项目中，在html页面中引用即可。如下：

​

新建一个helloworld.html:

新建一个app.js

viewer = new Cesium.Viewer('cesiumContainer');

其中cesiumContainer为html中的地图显示div的id。就是这么简单，浏览器打开上述html页面，便可看到一个三维地球。底图为微软影像只是加载到了三维地球上，包含放大、缩小、平移等基本在线地图功能，同时还包含了时间轴等与时间有关的控件，这是Cesium的一个特色，其地图、对象以及场景等能与时间相关联。

本地的Hello World程序

现在本地的node服务已经运行起来，打开浏览器，输入：http://localhost:8080/Apps/HelloWorld.html. 能看到和官方一模一样的hello wolrd 三维数字地球。

​

hello World代码分析

官网hello world代码如下：

以下四个步骤将Cesium加入到html中：

1. 引入Cesium.js， 该javascript定义了Cesium object

2. 导入Cesium Viewer widget的样式@import url(../Build/Cesium/Widgets/widgets.css);

3. cesium view存在于该div中

4. 最终创建cesium viewervar viewer = new Cesium.Viewer('cesiumContainer');

免费领取GIS开发学习资料