基于Cordova和Cesium的移动3D WebGIS系统实现

摘 要

本文根据三维网络地理信息系统的开发现状和移动开发模式现状，基于Cordova混合开发框架结合cesium可视化，展开移动3DWebGIS快速跨平台开发研究，以实际需求出发，设计了一个移动3DWebGIS原型系统，涉及地图服务、地理定位技术、倾斜摄影模型批量动态展示等技术。论述了从设计到实现的方方面面，搭建了原型系统，并在手机真机上成功运行，为后续的跨平台移动3DWebGIS开发者提供了参考。

【关键词】混合开发 三维可视化 移动GIS

1 引言

目前，三维可视化技术与Web GIS（地理信息系统）系统发展迅速，同时三维可视理论正在得到不断地完善，因此3DWebGIS的实现成为了可能。3DWebGIS既结合了Web GIS跨平台、开发效率高、易于扩展等优点，又结合了三维可视化空间信息平台展示直观和空间分析功能强大的优点。3DWebGIS在各个领域都有着急切的应用需求。在GIS领域，同样有几款基于WebGL的优秀三维可视化框架：如开源的Openwebglobe、Webglearth、Cesium，商业的ArcGIS Earth，SuperMap Earth。其中Cesium是一款很适合GIS数据可视化的地图引擎，无需任何插件，使用WebGL来进行硬件加速图形化显示三维场景，而且Cesium基于Apache开源协议，支持商业和非商业免费使用。

近年来，随着电子信息技术以及智能设备技术的飞速发展，手机的功能越来越强大，应用种类和数量也越来越多。同时，移动互联网的快速发展和迅速普及，传输数据的速度和容量更令人满意。但主流的移动终端操作系统却有Android、iOS、Windows Phone等，如果开发者针对不同的操作系统进行原生（Native App）开发，由于操作系统间的移植性差，导致应用开发门槛高和开发周期长。如果采用Web应用开发则一次开发即可在各种智能手机浏览器上运行，但存在表现略差，用户体验差，没法在App Store中下载、无法通过应用下载获得盈利机会与手机硬件交互差。混合应用（Hybrid App）兼具了Native App的所有优势，也兼具了Web App使用HTML5跨平台开发低成本的优势，是一种折中的良好解决方案， Cordova是其中的优秀代表。

因此本文基于Cordova和Cesium两大开发热点，展开移动3DWebGIS研究，以实际需求出发，进行系统功能设计，快速实现一个原型系统。

2 需求分析与目标

2.1 需求分析

本文收集了Contextcapture 4.3（smart3d）生产的b3dm格式的倾斜摄影实验成果一份、kmz世界各国GDP数据一份。预期开发一个跨平台的移动3DWebGIS，进行三维展示。

2.2 总体目标

（1）基于最新Cordova混合应用（Hybrid App）技术和cesium三维可视化平台。

（2）快速开发一个操作友好、易于扩展、部署方便、视觉美观的移动3DWebGIS系统。

（3）体现幵源平台开发可选性强、灵活组合、功能强大、易于定制的特点。

3 总体架构

系统主要划分客户端和服务器端，主要基于Cordova和Cesium，在移动端实现用户交互、手机定位、三维展示、场景漫游。服务器端实现，基础地图采取调用国家天地图发布的WMTS切片，b3dm和kmz数据采用tomcat8.0发布。系统结构图如图1。

4 关键技术

4.1 Cordova与Cesium结合

Cordova是Adobe贡献给Apache后的开源项目，是从PhoneGap（Phonegap是一款开源的开发框架，旨在让开发者使用HTML、Javascript、CSS等Web APIs开发跨平台的移动应用程序。原本由Nitobi公司开发，现在由Adobe拥有。）中抽出的核心代码，是驱动PhoneGap的核心引擎。你可以把它们的关系想象成类似于Webkit和Google Chrome的关系。

Cesiumjs是一套javascript库，用来渲染3D地球，2D区域地图，和多种GIS要素。不需要安装任何插件就能在支持最新HTML5标准的浏览器上运行。支持WebGL硬件加速，非常适合动态数据在GIS图层上的展示，是一個跨平台，开源，非常有前途的webgis表现层库。

两者结合步骤如下：

（1）安装最新稳定版的Nodejs，本文采用的版本是6.10。

（2）安装npm，由于国内网络速度问题，本文安装的是npm的淘宝NPM镜像cnpm。

（3）使用npm安装cordova，使用cordova创建个新的cordova项目。

（4）下载cesium（3d-tiles分支）项目，安照如下结构部署项目。

4.2 地图底图

“天地图”是国家测绘地理信息局建设的地理信息综合服务网站。它是“数字中国”的重要组成部分，是国家地理信息公共服务平台的公众版。“天地图”网站装载了覆盖全球的地理信息数据，这些数据分为矢量、影像、三维3种模式。其中中国的数据覆盖了从宏观的中国全境到微观的乡镇、村庄。覆盖全球范围的1：100万矢量数据和500米分辨率卫星遥感影像，覆盖全国范围的1：25万公众版地图数据、导航电子地图数据、15米和2.5米分辨率卫星遥感影像，覆盖全国300多个地级以上城市的0.6米分辨率卫星遥感影像等地理信息数据。本文采用的是天地图的影像和注记图层。采用WMTS格式。

WMTS，切片地图Web服务（OpenGIS Web Map Tile Service）当前版本是1.0.0。WMTS标准定义了一些操作，这些操作允许用户访问切片地图。WMTS可能是OGC首个支持RESTful访问的服务标准。

WMTS提供了一種采用预定义图块方法发布数字地图服务的标准化解决方案。WMTS弥补了WMS不能提供分块地图的不足。WMS针对提供可定制地图的服务，是一个动态数据或用户定制地图（需结合SLD标准）的理想解决办法。WMTS牺牲了提供定制地图的灵活性，代之以通过提供静态数据（基础地图）来增强伸缩性，这些静态数据的范围框和比例尺被限定在各个图块内。这些固定的图块集使得对WMTS服务的实现可以使用一个仅简单返回已有文件的Web服务器即可，同时使得可以利用一些标准的诸如分布式缓存的网络机制实现伸缩性。

Cesium提供WebMapTileServiceImageryPr

ovider接口实现WMTS加载。

4.3 倾斜摄影动态加载

对于倾斜模型，如果单纯采用默认的三维模型加载方案会出现浏览器吃紧致使崩溃或者高延迟低帧率等影响正常可视化交互的问题。

而3DTiles是Cesium团队为海量的异构三维地理空间数据集所设计的一个开放的规范，该规范适用于各种常见的地理数据，3DTiles已成功的在Cesium平台实现，3DTiles的主要目的是针对大规模的异构数据源提高其加载速度和渲染性能，它只对浏览器用户所给定的可见的三维视图窗口进行不同级别的切片显示，由于它是基于WEBGL设计开发出来的，因此可以更快的加载与处理三维数据，并且为了减少客户端的处理，3DTiles可以对数据进行预处理和批动态处理。该技术已被部分三维软件采用。

在倾斜摄影方面，ContextCapture Center，其前身Smart3DCapture技术的基础上发展起来的一种新的解决方案，软件解决方案，使生产从简单的照片，高分辨率的三维模型，无需任何人工干预。从ContextCapture Center4.3起能生成Cesium3DTiles格式的倾斜模型，直接用已有的服务器进行发布。然后运用cesium中的3d-tile分支，就可以在web端加载倾斜摄影模型。

4.4 地图定位

在使用Cordova开发移动app的时候会遇到定位的问题，cordova提供了自己的cordova-plugin-geolocation插件，这个插件在iOS上面定位不会出现问题，但是在安卓手机上会出现定位位置偏移或者定位失败的问题。因此在网上找了一些相关的资料，大部分对于安卓定位的解决方案都是采用百度地图的安卓SDK进行定位。

安装https：//github.com/mrwutong/cordova-qdc-baidu-location这个插件，找到插件用百度下载下来的开发包替换android目录下的所有文件。然后修改插件目录下的plugin.xml里面相应代码为图4代码。

这样就可以把百度5.3的SDK换成6.3的SDK。

5 系统实现

系统基于Cordova架构和Cesium开发包，采用基于Javascript语言开发，测试真机为华为麦芒4，其更新版本对应为安卓6.0系统。

进入所建项目目录，使用：cordova platform add android命令添加android环境。

使用：cordova build命令编译项目平台。

生成的apk安装在真机上运行效果如图5。

进入地球界面后根据手机定位信息，飞行到当前位置。

点击加载文件和倾斜按钮可分别加载包含GDP信息的kmz专题文件和倾斜摄影数据。可利用鼠标进行不同尺度，不同方位三维漫游查看。

6 结语

本文根据3DWebGIS的开发现状和智能终端应用开发模式现状，结合两大热点技术：Cordova框架及Cesium三维可视化平台，从实际需求出发，设计了一个移动3DWebGIS原型系统，涉及地图服务、地理定位技术、倾斜摄影模型批量动态展示等技术。论述了从设计到实现的方方面面，并成功运行，为后来的跨平台移动3DWebGIS开发者提供了参考。

后续可从客户端离线地图、三维大数据渲染、三维空间分析多方面入手展开进一步研究。

参考文献

[1]屠卫平.基于PhoneGap的跨平台移动GIS应用研究[D].上海：华东师范大学，2013.

[2]高云成.基于Cesium的WebGIS三维客户端实现技术研究[D].西安：西安电子科技大学，2014.

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

[4]肖敏.基于ApacheCordova的跨平台智能家居终端应用研发[D].广州：华南理工大学，2015.

[5]牛艺博.基于WebGL的地理信息三维可视化技术研究[D].兰州：兰州交通大学，2015.

[6]肖鹰东.基于混合风格的移动基站查勘GIS系统框架的研究与实现[D].成都：西南交通大学，2016.

[7]李俊金.基于3D GIS Cesium的数字城市建模技术[J].信息与电脑，2016（19）：45-46.

[8]An Introduction to Cesium Android Apps with Cordova[EB/OL] http：//cesiumjs.org/ 2016/05/18/An-Introduction-to-Cesium-Android-Apps-with-Cordova/.

[9]百度百科.Cordova[EB/OL] http：//baike.baidu.com/item/Cordova？sefr=enterbtn.

[10]关于cordova开发中安卓定位不精确的解决方案[EB/OL] http：//blog.csdn.net/ u010730897/article/details/52055802.