摘 要

本文根據(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)，并在手機真機上成功運行，為后續(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é)合了三維可視化空間信息平臺展示直觀和空間分析功能強大的優(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ā)展，手機的功能越來越強大，應(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ā)即可在各種智能手機瀏覽器上運行，但存在表現(xiàn)略差，用戶體驗差，沒法在App Store中下載、無法通過應(yīng)用下載獲得盈利機會與手機硬件交互差?；旌蠎?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ā)可選性強、靈活組合、功能強大、易于定制的特點。

3 總體架構(gòu)

系統(tǒng)主要劃分客戶端和服務(wù)器端，主要基于Cordova和Cesium，在移動端實現(xiàn)用戶交互、手機定位、三維展示、場景漫游。服務(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ù)平臺的公眾版?！疤斓貓D”網(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彌補了WMS不能提供分塊地圖的不足。WMS針對提供可定制地圖的服務(wù)，是一個動態(tài)數(shù)據(jù)或用戶定制地圖（需結(jié)合SLD標(biāo)準(zhǔn)）的理想解決辦法。WMTS犧牲了提供定制地圖的靈活性，代之以通過提供靜態(tài)數(shù)據(jù)（基礎(chǔ)地圖）來增強伸縮性，這些靜態(tài)數(shù)據(jù)的范圍框和比例尺被限定在各個圖塊內(nèi)。這些固定的圖塊集使得對WMTS服務(wù)的實現(xiàn)可以使用一個僅簡單返回已有文件的Web服務(wù)器即可，同時使得可以利用一些標(biāo)準(zhǔn)的諸如分布式緩存的網(wǎng)絡(luò)機制實現(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)問題，但是在安卓手機上會出現(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ā)，測試真機為華為麥芒4，其更新版本對應(yīng)為安卓6.0系統(tǒng)。

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

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

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

進(jìn)入地球界面后根據(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.