基于Cordova和Cesium的移動3D WebGIS系統(tǒng)實現(xiàn)

摘 要

本文根據(jù)三維網(wǎng)絡(luò)地理信息系統(tǒng)的開發(fā)現(xiàn)狀和移動開發(fā)模式現(xiàn)狀，基于Cordova混合開發(fā)框架結(jié)合cesium可視化，展開移動3DWebGIS快速跨平臺開發(fā)研究，以實際需求出發(fā)，設(shè)計了一個移動3DWebGIS原型系統(tǒng)，涉及地圖服務(wù)、地理定位技術(shù)、傾斜攝影模型批量動態(tài)展示等技術(shù)。論述了從設(shè)計到實現(xiàn)的方方面面，搭建了原型系統(tǒng)，并在手機(jī)真機(jī)上成功運行，為后續(xù)的跨平臺移動3DWebGIS開發(fā)者提供了參考。

【關(guān)鍵詞】混合開發(fā) 三維可視化 移動GIS

1 引言

目前，三維可視化技術(shù)與Web GIS（地理信息系統(tǒng)）系統(tǒng)發(fā)展迅速，同時三維可視理論正在得到不斷地完善，因此3DWebGIS的實現(xiàn)成為了可能。3DWebGIS既結(jié)合了Web GIS跨平臺、開發(fā)效率高、易于擴(kuò)展等優(yōu)點，又結(jié)合了三維可視化空間信息平臺展示直觀和空間分析功能強(qiáng)大的優(yōu)點。3DWebGIS在各個領(lǐng)域都有著急切的應(yīng)用需求。在GIS領(lǐng)域，同樣有幾款基于WebGL的優(yōu)秀三維可視化框架：如開源的Openwebglobe、Webglearth、Cesium，商業(yè)的ArcGIS Earth，SuperMap Earth。其中Cesium是一款很適合GIS數(shù)據(jù)可視化的地圖引擎，無需任何插件，使用WebGL來進(jìn)行硬件加速圖形化顯示三維場景，而且Cesium基于Apache開源協(xié)議，支持商業(yè)和非商業(yè)免費使用。

近年來，隨著電子信息技術(shù)以及智能設(shè)備技術(shù)的飛速發(fā)展，手機(jī)的功能越來越強(qiáng)大，應(yīng)用種類和數(shù)量也越來越多。同時，移動互聯(lián)網(wǎng)的快速發(fā)展和迅速普及，傳輸數(shù)據(jù)的速度和容量更令人滿意。但主流的移動終端操作系統(tǒng)卻有Android、iOS、Windows Phone等，如果開發(fā)者針對不同的操作系統(tǒng)進(jìn)行原生（Native App）開發(fā)，由于操作系統(tǒng)間的移植性差，導(dǎo)致應(yīng)用開發(fā)門檻高和開發(fā)周期長。如果采用Web應(yīng)用開發(fā)則一次開發(fā)即可在各種智能手機(jī)瀏覽器上運行，但存在表現(xiàn)略差，用戶體驗差，沒法在App Store中下載、無法通過應(yīng)用下載獲得盈利機(jī)會與手機(jī)硬件交互差。混合應(yīng)用（Hybrid App）兼具了Native App的所有優(yōu)勢，也兼具了Web App使用HTML5跨平臺開發(fā)低成本的優(yōu)勢，是一種折中的良好解決方案， Cordova是其中的優(yōu)秀代表。

因此本文基于Cordova和Cesium兩大開發(fā)熱點，展開移動3DWebGIS研究，以實際需求出發(fā)，進(jìn)行系統(tǒng)功能設(shè)計，快速實現(xiàn)一個原型系統(tǒng)。

2 需求分析與目標(biāo)

2.1 需求分析

本文收集了Contextcapture 4.3（smart3d）生產(chǎn)的b3dm格式的傾斜攝影實驗成果一份、kmz世界各國GDP數(shù)據(jù)一份。預(yù)期開發(fā)一個跨平臺的移動3DWebGIS，進(jìn)行三維展示。

2.2 總體目標(biāo)

（1）基于最新Cordova混合應(yīng)用（Hybrid App）技術(shù)和cesium三維可視化平臺。

（2）快速開發(fā)一個操作友好、易于擴(kuò)展、部署方便、視覺美觀的移動3DWebGIS系統(tǒng)。

（3）體現(xiàn)幵源平臺開發(fā)可選性強(qiáng)、靈活組合、功能強(qiáng)大、易于定制的特點。

3 總體架構(gòu)

系統(tǒng)主要劃分客戶端和服務(wù)器端，主要基于Cordova和Cesium，在移動端實現(xiàn)用戶交互、手機(jī)定位、三維展示、場景漫游。服務(wù)器端實現(xiàn)，基礎(chǔ)地圖采取調(diào)用國家天地圖發(fā)布的WMTS切片，b3dm和kmz數(shù)據(jù)采用tomcat8.0發(fā)布。系統(tǒng)結(jié)構(gòu)圖如圖1。

4 關(guān)鍵技術(shù)

4.1 Cordova與Cesium結(jié)合

Cordova是Adobe貢獻(xiàn)給Apache后的開源項目，是從PhoneGap（Phonegap是一款開源的開發(fā)框架，旨在讓開發(fā)者使用HTML、Javascript、CSS等Web APIs開發(fā)跨平臺的移動應(yīng)用程序。原本由Nitobi公司開發(fā)，現(xiàn)在由Adobe擁有。）中抽出的核心代碼，是驅(qū)動PhoneGap的核心引擎。你可以把它們的關(guān)系想象成類似于Webkit和Google Chrome的關(guān)系。

Cesiumjs是一套javascript庫，用來渲染3D地球，2D區(qū)域地圖，和多種GIS要素。不需要安裝任何插件就能在支持最新HTML5標(biāo)準(zhǔn)的瀏覽器上運行。支持WebGL硬件加速，非常適合動態(tài)數(shù)據(jù)在GIS圖層上的展示，是一個跨平臺，開源，非常有前途的webgis表現(xiàn)層庫。

兩者結(jié)合步驟如下：

（1）安裝最新穩(wěn)定版的Nodejs，本文采用的版本是6.10。

（2）安裝npm，由于國內(nèi)網(wǎng)絡(luò)速度問題，本文安裝的是npm的淘寶NPM鏡像cnpm。

（3）使用npm安裝cordova，使用cordova創(chuàng)建個新的cordova項目。

（4）下載cesium（3d-tiles分支）項目，安照如下結(jié)構(gòu)部署項目。

4.2 地圖底圖

“天地圖”是國家測繪地理信息局建設(shè)的地理信息綜合服務(wù)網(wǎng)站。它是“數(shù)字中國”的重要組成部分，是國家地理信息公共服務(wù)平臺的公眾版。“天地圖”網(wǎng)站裝載了覆蓋全球的地理信息數(shù)據(jù)，這些數(shù)據(jù)分為矢量、影像、三維3種模式。其中中國的數(shù)據(jù)覆蓋了從宏觀的中國全境到微觀的鄉(xiāng)鎮(zhèn)、村莊。覆蓋全球范圍的1：100萬矢量數(shù)據(jù)和500米分辨率衛(wèi)星遙感影像，覆蓋全國范圍的1：25萬公眾版地圖數(shù)據(jù)、導(dǎo)航電子地圖數(shù)據(jù)、15米和2.5米分辨率衛(wèi)星遙感影像，覆蓋全國300多個地級以上城市的0.6米分辨率衛(wèi)星遙感影像等地理信息數(shù)據(jù)。本文采用的是天地圖的影像和注記圖層。采用WMTS格式。

WMTS，切片地圖Web服務(wù)（OpenGIS Web Map Tile Service）當(dāng)前版本是1.0.0。WMTS標(biāo)準(zhǔn)定義了一些操作，這些操作允許用戶訪問切片地圖。WMTS可能是OGC首個支持RESTful訪問的服務(wù)標(biāo)準(zhǔn)。

WMTS提供了一種采用預(yù)定義圖塊方法發(fā)布數(shù)字地圖服務(wù)的標(biāo)準(zhǔn)化解決方案。WMTS彌補(bǔ)了WMS不能提供分塊地圖的不足。WMS針對提供可定制地圖的服務(wù)，是一個動態(tài)數(shù)據(jù)或用戶定制地圖（需結(jié)合SLD標(biāo)準(zhǔn)）的理想解決辦法。WMTS犧牲了提供定制地圖的靈活性，代之以通過提供靜態(tài)數(shù)據(jù)（基礎(chǔ)地圖）來增強(qiáng)伸縮性，這些靜態(tài)數(shù)據(jù)的范圍框和比例尺被限定在各個圖塊內(nèi)。這些固定的圖塊集使得對WMTS服務(wù)的實現(xiàn)可以使用一個僅簡單返回已有文件的Web服務(wù)器即可，同時使得可以利用一些標(biāo)準(zhǔn)的諸如分布式緩存的網(wǎng)絡(luò)機(jī)制實現(xiàn)伸縮性。

Cesium提供WebMapTileServiceImageryPr

ovider接口實現(xiàn)WMTS加載。

4.3 傾斜攝影動態(tài)加載

對于傾斜模型，如果單純采用默認(rèn)的三維模型加載方案會出現(xiàn)瀏覽器吃緊致使崩潰或者高延遲低幀率等影響正?？梢暬换サ膯栴}。

而3DTiles是Cesium團(tuán)隊為海量的異構(gòu)三維地理空間數(shù)據(jù)集所設(shè)計的一個開放的規(guī)范，該規(guī)范適用于各種常見的地理數(shù)據(jù)，3DTiles已成功的在Cesium平臺實現(xiàn)，3DTiles的主要目的是針對大規(guī)模的異構(gòu)數(shù)據(jù)源提高其加載速度和渲染性能，它只對瀏覽器用戶所給定的可見的三維視圖窗口進(jìn)行不同級別的切片顯示，由于它是基于WEBGL設(shè)計開發(fā)出來的，因此可以更快的加載與處理三維數(shù)據(jù)，并且為了減少客戶端的處理，3DTiles可以對數(shù)據(jù)進(jìn)行預(yù)處理和批動態(tài)處理。該技術(shù)已被部分三維軟件采用。

在傾斜攝影方面，ContextCapture Center，其前身Smart3DCapture技術(shù)的基礎(chǔ)上發(fā)展起來的一種新的解決方案，軟件解決方案，使生產(chǎn)從簡單的照片，高分辨率的三維模型，無需任何人工干預(yù)。從ContextCapture Center4.3起能生成Cesium3DTiles格式的傾斜模型，直接用已有的服務(wù)器進(jìn)行發(fā)布。然后運用cesium中的3d-tile分支，就可以在web端加載傾斜攝影模型。

4.4 地圖定位

在使用Cordova開發(fā)移動app的時候會遇到定位的問題，cordova提供了自己的cordova-plugin-geolocation插件，這個插件在iOS上面定位不會出現(xiàn)問題，但是在安卓手機(jī)上會出現(xiàn)定位位置偏移或者定位失敗的問題。因此在網(wǎng)上找了一些相關(guān)的資料，大部分對于安卓定位的解決方案都是采用百度地圖的安卓SDK進(jìn)行定位。

安裝https：//github.com/mrwutong/cordova-qdc-baidu-location這個插件，找到插件用百度下載下來的開發(fā)包替換android目錄下的所有文件。然后修改插件目錄下的plugin.xml里面相應(yīng)代碼為圖4代碼。

這樣就可以把百度5.3的SDK換成6.3的SDK。

5 系統(tǒng)實現(xiàn)

系統(tǒng)基于Cordova架構(gòu)和Cesium開發(fā)包，采用基于Javascript語言開發(fā)，測試真機(jī)為華為麥芒4，其更新版本對應(yīng)為安卓6.0系統(tǒng)。

進(jìn)入所建項目目錄，使用：cordova platform add android命令添加android環(huán)境。

使用：cordova build命令編譯項目平臺。

生成的apk安裝在真機(jī)上運行效果如圖5。

進(jìn)入地球界面后根據(jù)手機(jī)定位信息，飛行到當(dāng)前位置。

點擊加載文件和傾斜按鈕可分別加載包含GDP信息的kmz專題文件和傾斜攝影數(shù)據(jù)?？衫檬髽?biāo)進(jìn)行不同尺度，不同方位三維漫游查看。

6 結(jié)語

本文根據(jù)3DWebGIS的開發(fā)現(xiàn)狀和智能終端應(yīng)用開發(fā)模式現(xiàn)狀，結(jié)合兩大熱點技術(shù)：Cordova框架及Cesium三維可視化平臺，從實際需求出發(fā)，設(shè)計了一個移動3DWebGIS原型系統(tǒng)，涉及地圖服務(wù)、地理定位技術(shù)、傾斜攝影模型批量動態(tài)展示等技術(shù)。論述了從設(shè)計到實現(xiàn)的方方面面，并成功運行，為后來的跨平臺移動3DWebGIS開發(fā)者提供了參考。

后續(xù)可從客戶端離線地圖、三維大數(shù)據(jù)渲染、三維空間分析多方面入手展開進(jìn)一步研究。

參考文獻(xiàn)

[1]屠衛(wèi)平.基于PhoneGap的跨平臺移動GIS應(yīng)用研究[D].上海：華東師范大學(xué)，2013.

[2]高云成.基于Cesium的WebGIS三維客戶端實現(xiàn)技術(shù)研究[D].西安：西安電子科技大學(xué)，2014.

[3]王德生.基于HTML5和WebGL的三維WebGIS系統(tǒng)構(gòu)建及應(yīng)用[D].福州：福建師范大學(xué)，2014.

[4]肖敏.基于ApacheCordova的跨平臺智能家居終端應(yīng)用研發(fā)[D].廣州：華南理工大學(xué)，2015.

[5]牛藝博.基于WebGL的地理信息三維可視化技術(shù)研究[D].蘭州：蘭州交通大學(xué)，2015.

[6]肖鷹東.基于混合風(fēng)格的移動基站查勘GIS系統(tǒng)框架的研究與實現(xiàn)[D].成都：西南交通大學(xué)，2016.

[7]李俊金.基于3D GIS Cesium的數(shù)字城市建模技術(shù)[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]關(guān)于cordova開發(fā)中安卓定位不精確的解決方案[EB/OL] http：//blog.csdn.net/ u010730897/article/details/52055802.