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 : 视察全屏按钮。

你可能感兴趣的:(javascript)