基于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.