Cesium入门

1. Cesium简介

Cesium官网：CesiumJS – Cesium

Cesium是一款开源的基于JavaScript的3D地图框架，即一个地图可视化框架，用于创建虚拟场景的3D地理信息平台。

目标是用于创建以基于Web的地图动态数据可视化。

2. 数据格式

Cesium支持3D Tiles、Terrain and Imagery Layers、3D Models（glTF）、Vectors and Geometry（Load KML, GeoJSON, TopoJSON, and CZML）、Time-Dynamic Visualization、3D, 2D, and 2.5D Columbus View

• 支持2D,2.5D,3D 形式的地理（地图）数据展示，

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

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

④支持基于时间轴的动态流式数据展示

3. Cesium环境搭建

3.1 验证浏览器

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

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

测试地址： https://cesiumjs.org/Cesium/Apps/HelloWorld.html

3.2 IDE选择

编辑器或开发环境的选择很多

Eclipse，PHPStorm，Notepad ++，WebStorm，Sublime Text

3.3 Server端

Cesium文件需要放入Web Server容器中，才能运行起来。

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

官网推荐的是nodejs

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

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

node server.js或者npm start

注：不能关闭控制台，保持一直运行状态。

4. Cesium框架结构

4.1 CesiumJS库结构

Source/: Cesium应用程序代码及数据

ThirdParty/：外部依赖库，不同于Cesium的第三方库

LICENSE.md：Cesium的License介绍

index.html：Web首页，需要按照Cesium要求定义页面，同时添加Cesium依赖库

server.js：基于node.js的web服务应用

4.2页面结构

引入CesiumJS

HTML结构-需要一个div作为Cesium Viewer widget的容器

CSS样式-引入Cesium viewer中的各种widget的样式 新建一个css文件，并引入html中

5. 创建Cesium Viewer

任何Cesium应用程序的基础都是Viewer。Viewer是一个带有多种功能的可交互的三位数字地球的容器（盒子）。创建一个Viewer和HTML中的一个id为"cesiumContainer"的div绑定即可。

默认的Viewer自带了一些有用的组件：

Geocoder : A location search tool that flies the camera to queried location. Uses Bing Maps data by default.

HomeButton : Flies the viewer back to a default view.

SceneModePicker : Switches between 3D, 2D and Columbus View (CV) modes.

BaseLayerPicker : Chooses the imagery and terrain to display on the globe.

NavigationHelpButton : Displays the default camera controls.

Animation : Controls the play speed for view animation.

CreditsDisplay : Displays data attributions. Almost always required!

Timeline : Indicates current time and allows users to jump to a specific time using the scrubber.

FullscreenButton : Makes the Viewer fullscreen. 翻译

Geocoder : 一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。

HomeButton : 首页位置，点击之后将视图跳转到默认视角。

SceneModePicker : 切换2D、3D 和 Columbus View (CV) 模式。

BaseLayerPicker : 选择三维数字地球的底图（imagery and terrain）。

NavigationHelpButton : 帮助提示，如何操作数字地球。

Animation :控制视窗动画的播放速度。

CreditsDisplay : 展示商标版权和数据源。

Timeline : 展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。

FullscreenButton : 视察全屏按钮。