基于Cesium的三维WebGIS研究及开发

朱栩逸　苗放

摘 要：由于传统二维GIS不能完整地反映三维世界，随着计算机技术的高速发展，Web3D技术与GIS技术相结合而成的三维WebGIS也成为了GIS发展的一个重要方向。该文在分析基于Web服务的GIS框架设计的基础上，引入并分析了Cesium开源框架与其地形数据处理的方法，在此基础上提出了一种基于Cesium的三维WebGIS开发方案，并通过开发实现了标注、量测、查询等部分GIS基础功能。

关键词：Web3D技术 Web服务 Cesium 地形数据 三维WebGIS

中图分类号：TP391.41 文献标识码：A 文章编号：1674-098X（2015）12（a）-0009-04

Abstract：As the traditional two-dimensional GIS cannot reflect the three-dimensional world completely， and with the rapid development of computer technology， the three-dimensional WebGIS technology， which combines Web3D technology and GIS technology， becomes an important research direction of GIS. Based on the analysis of GIS framework based on Web services， this paper brings in the Cesium framework and analyzes the method of terrain data processing， then puts forward a program of developing 3D WebGIS based on Cesium which has the GIS functions include marking， measure， query， etc.

Key Words：Web3D technology； Web service； Cesium； Terrain data； 3DWebGIS

传统的二维GIS具有强大的空间分析与二维数据表达的能力，但是对处于三维空间中的各种地理对象全部进行向二维平面投影的简化处理，导致了第三维方向上的几何位置信息、空间拓扑信息以及部分语义信息的损失，不能完整地反映客观世界[1]。随着人们认知水平的提高，二维GIS显然不能满足人们对三维空间的认知，于是三维GIS应运而生。

随着计算机技术的高速发展，GIS技术也被注入了新的活力，Web3D技术与GIS技术相结合而形成的WebGIS已成为GIS发展的一个重要方向[2]。WebGL作为新一代Web3D图形标准，其不需要组件加载、渲染效果好、兼容性好等以往技术无法比拟的优势取得了众多浏览器生产商的支持，也为3DWebGIS创造了新的发展机遇。

Cesium便是一种轻量级的开源三维WebGIS开发框架，具有成本低、开发简单、支持多种地图格式等特性，并且支持WebGL的硬件加速，使其无须安装插件就能够在支持最新HTML5的浏览器上流畅运行，非常适合用于动态的数据在GIS图层上的展示。

1 基于Web服务的GIS设计

根据分层设计的原则，采用B/S结构，建立符合开源GIS规范的空间地理数据和服务框架。设计的体系结构如图1所示，由表现层、Web服务层、数据层3个部分构成。

数据层主要是为数据源的文件系统和空间数据库，为上层的Web服务提供空间数据来源，以及保存Web端对数据各种操作后的数据的任务，如数据更新、删除等。

Web服务层主要负责提供空间信息管理与处理的任务，如数据存储、组织管理、分发、检索和处理等。

表现层即客户端所处的层面，主要是浏览器应用程序，为用户与系统之间的交互提供可视化的环境。

2 Cesium

Cesium源自于Analytical Graphics，Inc（AGI）公司开发的一个虚拟地球项目，是一个用于在Web浏览器创建3D地球和2D地图的JavaScript库[3]。由于其开源的特性，官方提供的APIs能够让精通JavaScript的开发人员自由添加想要的功能。

Cesium实现访问地理空间数据的方法都符合行业标准，支持的地图数据来源包括了WMS，WMTS，TMS，Google Maps，Bing Maps和OpenStreetMap等等，也可以用简单的图片作为地图源。同时Cesium也支持许多数据格式，如XML，GML，JSON，GeoJSON等。

Cesium的框架主要分为4层。

（1）核心（Core）：是Cesium的最底层，主要包括一些基本的数学原理及模型算法，如矩阵、向量、地图投影、曲面计算等。

（2）渲染器（Renderer）：提供使用WebGL渲染的方法，完成从计算机中三维数据表示到二维显示器平面上可以显示图像的转换过程，经过渲染器渲染后的场景即可展示在用户面前。

（3）场景（Scene）：是建立在核心层与渲染层之上的放置图形元素的空间。

（4）动态场景（Dynamic Scene）：是4层中的最高层，是用来描述时间的动态场景元素空间。

3 Cesium地形数据

在Cesium中支持的地形数据有两种，分别为STK World Terrain和Small Terrain。

STK World Terrain是高分辨率，基于quantized-mesh的地形。这是一种基于格网的地形数据，可以利用WebGL中的Shader来渲染。如图2所示，STK World Terrain使用了多种数据源，在美国本土使用精度3-30米的National Elevation Dataset（NED）高程数据，而在欧洲地区使用EU-CEM高程数据，精度为30 m，对于整个地球则使用GTOPO30高程数据，精度1 000 m等[3]。可以适应不同地区和不同精度时的情况。

第二种地形数据Small Terrain是一种中等高分辨率，基于heightmap的地形数据，其在经过处理后加载到系统中效果虽然不如STK World Terrain，但还是基本能还原地球表面的地形。

无论是STK World Terrain还是Small Terrain数据，由于其数据量的庞大，且其复杂程度也远超计算机的处理能力，实现对地形数据的快速绘制相对困难。Cesium中对于地形数据采用层次细节模型（Level Of Details，LOD）算法[3]。这种算法的核心思想是通过距离视点的远近来决定地形数据细节显示的层次，对于距离视点较近的区域采用较高的细节层次来显示，而对于距离视点远的区域则采用较低的细节层次。简化了地形数据表面的细节从而减少场景的复杂度，以此来提高绘制效率。

4 基于Cesium的三维WebGIS开发

该文利用gdal2srtmtiles.py转换工具将GeoTIFF格式的DEM高程数据生成*.terrain文件，并配置到webserver下进行发布。在完成对地形瓦片数据的处理及发布后即可对Cesium进行三维WebGIS的开发。

4.1 地图数据的加载

对于地图数据的加载，主要用到Cesium中的Viewer类，CesiumTerrainProvider类以及自定义的加载影像数据的WMTSImageryProvider类，分别为建立地图容器，地形数据调用及地图数据调用。

//定义WMTSImageryProvider类

var WMTSImageryProvider = function（） {

var defaultCredit = new Cesium.Credit（'WMTS'）；

description = Cesium.defaultValue（description， {}）；

this._tilingScheme = new Cesium.WebMercatorTilingScheme（{

numberOfLevelZeroTilesX： 1，

numberOfLevelZeroTilesY： 1

}）；

this._fileExtension = Cesium.defaultValue（description.fileExtension， 'png'）；

this._tileDiscardPolicy = description.tileDiscardPolicy；

this.baseurl = urlformat；

this.needaddone=addone；

var credit = Cesium.defaultValue（description.credit， defaultCredit）；

if （typeof credit === 'string'） {

credit = new Cesium.Credit（credit）；

}

this._credit = credit；

}；

//处理请求处理影像瓦片数据

WMTSImageryProvider.prototype.requestImage = function （x， y， level） {

if （this.needaddone）

{ x +=1； y += 1； level += 1； }

var url = this.baseurl.replace（"{x}"， x）；

url = url.replace（"{y}"， y）；

url = url.replace（"{z}"， level）；

return Cesium.ImageryProvider.loadImage（this， url）；

}；

//加载地形及影像数据

var viewer = new Cesium.Viewer（'cesiumContainer'， {

terrainProvider： new new Cesium.CesiumTerrainProvider（{

url ： '//localhost：8800/test/terrain'

}），

imageryProvider：new Cesium.WMTSImageryProvider（{

url：'//localhost：：2000/getImage？x={x}&y={y}&z={z}'

}）

}）；

4.2 简单功能实现

4.2.1 标注及画线功能

标注与划线功能是GIS系统中的最基础功能，通过Cesium中的entities类来实现。用户可以在地图上对点进行标注，并通过贴合地形的画线功能做到三维数据的展示，如图4所示。

4.2.2 量测功能

用户能通过量测功能进行对地图上绘图线段与多边形面积的量测，即一种空间面积量测的功能。通过CesiumMath类中封装好的方法即可实现。

4.2.3 查询及定位功能

用户提供查询条件，就能方便的查询到兴趣点的信息，并能在地图上进行定位，也能通过坐标进行定位查询。通过类Cesium.Cartesian3中fromDegrees方法对经纬度坐标进行转换，并用flyTo方法进行定位。

5 结语

随着地理信息网络服务、虚拟现实技术、空间信息可视化技术、GIS技术的不断发展，构建三维的WebGIS可视化平台也成为了GIS发展中关键的一环。该文分析基于Web服务的GIS框架，讨论了Cesium框架与Cesium下地形数据处理方法，提出了开源三维GIS——Cesium的开发方案，并实现了WebGIS系统中的部分基本功能。

参考文献

[1] 肖乐斌.基于栅格框架的三维GIS集成数据模型与空间分析研究[D].北京：中国科学院地理研究所，1999.

[2] 王德生.基于HTML5和WebGL的三维WebGIS系统构建及应用[D].福州：福建师范大学，2014.

[3] Cesium.An open-source JavaScript library for

world-class 3D globes and maps [EB/OL].http：//cesiumjs.org.

[4] 杨鹏，邹时林.基于OpenLayers的WebGIS客户端的研发[J].测绘与空间地理信息，2012，35（3）：131-133.

[5] 张令奎，张小静，高凯.开源地理信息网络服务平台构建[J].测绘与空间地理信息，2015，38（1）：181-184.