基于Cordova模式的移動GIS開發(fā)關(guān)鍵技術(shù)研究

梅昭容，劉 杰

(江蘇省基礎(chǔ)地理信息中心，江蘇 南京 210013)

0 引言

移動GIS(Mobile GIS)是以移動互聯(lián)網(wǎng)技術(shù)為支撐，以智能手機為運行終端，結(jié)合了北斗、GPS等導(dǎo)航定位手段的新型GIS技術(shù)，是桌面GIS，WebGIS之后GIS行業(yè)新的發(fā)展方向[1]，已廣泛應(yīng)用于外業(yè)數(shù)據(jù)采集、應(yīng)急救援保障、國土空間規(guī)劃、自然資源調(diào)查等諸多行業(yè)，并有較多成功的開發(fā)案例[1-6]。目前移動GIS主要有兩種應(yīng)用與開發(fā)模式，一是形成安裝在移動設(shè)備的客戶端軟件，主要采用原生開發(fā)模式進行開發(fā)，即基于移動操作系統(tǒng)進行開發(fā)，當(dāng)前大部分移動GIS軟件均采用此開發(fā)模式；二是基于瀏覽器運行WebGIS系統(tǒng)，這種運行方式采用HTML5+JavaScript的Web端開發(fā)方式，基于Web系統(tǒng)與應(yīng)用進行開發(fā)[7-8]。通過比較兩種方式發(fā)現(xiàn)，當(dāng)前主流的原生開發(fā)除了存在可移植性差，需要針對特定操作系統(tǒng)進行開發(fā)，代碼無法重復(fù)利用，開發(fā)成本較大的問題外，對GIS的相關(guān)接口，尤其是三維數(shù)據(jù)的加載與分析支持較弱；基于Web端的開發(fā)雖然具備跨平臺性并可以直接調(diào)用成熟的接口，但面對數(shù)據(jù)量較大的地理信息數(shù)據(jù)時，往往存在響應(yīng)速度慢、交互性較差等問題，且直接調(diào)用網(wǎng)頁無法滿足移動端設(shè)備復(fù)雜的適配問題，美觀性較差。基于以上問題，形成一種能夠?qū)崿F(xiàn)跨操作系統(tǒng)、跨平臺開發(fā)、開發(fā)成本較低，且對GIS多源數(shù)據(jù)的加載與分析支持較好的移動GIS開發(fā)模式，可以極大地提升移動GIS的性能并提高開發(fā)效率，使之更好地服務(wù)于社會公眾與各行各業(yè)的政府部門。

1 混合開發(fā)模式

混合開發(fā)模式(Hybrid App)是一種在綜合運用原生開發(fā)語言與Web App開發(fā)語言的開發(fā)模式，前端使用HTML5+CSS網(wǎng)頁技術(shù)進行頁面開發(fā)與布局，通過JavaScript API訪問移動設(shè)備底層的Native模塊，數(shù)據(jù)資源則從服務(wù)器端動態(tài)加載[8-9]。混合開發(fā)模式繼承了原生開發(fā)模式豐富的移動設(shè)備功能與良好的用戶體驗，以及Web端開發(fā)周期短、成本低、代碼可移植的優(yōu)點，開發(fā)周期與技術(shù)難度也處在兩種模式之間。Hybrid App的開發(fā)是通過使用中間件調(diào)用移動設(shè)備Native端的通信接口，隨后通過這組接口使用Web端的JavaScript語言訪問設(shè)備的原生功能。目前最流行的混合開發(fā)工具包括Cordova，React Native等，各有自身的優(yōu)缺點。

Cordova是開源的移動開發(fā)框架，可用標準的Web技術(shù)進行跨平臺移動應(yīng)用程序的開發(fā)，在Web頁面也可以使用Cordova豐富的插件調(diào)用原生代碼，獲取設(shè)備相關(guān)信息、調(diào)取手機攝像頭等，Cordova具有以下優(yōu)點：跨平臺，開發(fā)一個應(yīng)用程序，可以在不同平臺使用包括Android，IOS；開發(fā)效率高，迭代更新容易；開發(fā)出來的App很小。Cordova應(yīng)用的性能很大程度上局限于運行設(shè)備的WebView性能，由于JavaScript是單線程的，內(nèi)存占用較高，不適合做高體驗交互和動畫，比如游戲。

React Native是由Facebook研發(fā)的一套跨平臺開發(fā)技術(shù)，其特點是使用JavaScript編寫出的代碼轉(zhuǎn)為原生平臺的API，從而實現(xiàn)使用同一套React Native代碼轉(zhuǎn)換為Android和IOS系統(tǒng)的原生代碼，實現(xiàn)了多線程開發(fā)，運行效率較高。React Native更接近原生語言，因此學(xué)習(xí)成本較高，需要有Android和IOS開發(fā)基礎(chǔ)。

綜合考慮，選擇Cordova+Vue的模式進行跨平臺開發(fā)，移動端App采用Vue前端框架進行頁面開發(fā)，然后使用跨平臺Cordova工具打包成App，如Android或IOS App等，實現(xiàn)了跨平臺開發(fā)。

2 Cordova軟件架構(gòu)

Aache Cordova是一個開源的移動開發(fā)框架，可用標準的Web技術(shù)(HTML5，CSS3和JavaScript)進行跨平臺移動應(yīng)用程序的開發(fā)，應(yīng)用在每個平臺的具體執(zhí)行被封裝了起來，并依靠符合標準的API綁定訪問每個設(shè)備的功能?；贑ordova開發(fā)移動GIS軟件架構(gòu)包括數(shù)據(jù)服務(wù)器、Cordova應(yīng)用層與移動設(shè)備操作系統(tǒng)層兩個層次，Cordova應(yīng)用層又包括Web App、Cordova插件和WebView3個組成模塊，通過API接口相互訪問。基于Cordova混合開發(fā)的移動GIS App軟件架構(gòu)如圖1所示。

圖1 基于Cordova混合開發(fā)的移動GIS App軟件架構(gòu)

(1)數(shù)據(jù)服務(wù)器：數(shù)據(jù)服務(wù)器存儲運行移動GIS需要展示與分析的空間數(shù)據(jù)和業(yè)務(wù)數(shù)據(jù)?？臻g數(shù)據(jù)通過ArcGIS server服務(wù)器管理、業(yè)務(wù)數(shù)據(jù)通過數(shù)據(jù)服務(wù)器進行管理，前端通過REST接口服務(wù)調(diào)用。離線數(shù)據(jù)存儲在SQLite數(shù)據(jù)庫里，利用Cordova的Cordova-sqlite-evcore-extbuild-free插件調(diào)用數(shù)據(jù)。

(2)Cordova 應(yīng)用層: Web App模塊主要是通過HTML，JavaScript與CSS等標準Web開發(fā)技術(shù)編寫的應(yīng)用程序，通過WebView控件以網(wǎng)頁的形式呈現(xiàn)給用戶；Cordova插件是Cordova框架的核心，包含了調(diào)用定位功能、攝像頭、空間存儲等移動設(shè)備原生功能的插件；WebView模塊作為用戶界面層，通過HTML渲染引擎向用戶展示W(wǎng)eb視圖。

3 跨平臺開發(fā)環(huán)境

在安裝完成WebGIS開發(fā)的環(huán)境變量后，基于Cordova的移動GIS開發(fā)還需要根據(jù)運行平臺進行不同的環(huán)境配置。

3.1 基于Android操作系統(tǒng)的開發(fā)環(huán)境

apk(Android application package，Android應(yīng)用程序包)是Android操作系統(tǒng)使用的一種應(yīng)用程序包文件格式，用于分發(fā)和安裝移動應(yīng)用及中間件。一個Android應(yīng)用程序的代碼想要在Android設(shè)備上運行，必須先進行編譯，然后被打包成為一個能被Android系統(tǒng)識別的文件才可以被運行。

Android SDK(Software Development Kit，軟件開發(fā)工具包)是Android操作系統(tǒng)應(yīng)用軟件開發(fā)工具的集合，它提供了Android API庫和開發(fā)工具的構(gòu)建以及調(diào)試應(yīng)用程序，是開發(fā)與運行Android應(yīng)用必不可少的軟件。Android SDK的安裝通過Android Studio軟件進行，因此在進行基于Android操作系統(tǒng)的軟件開發(fā)時，首先需要進行Android Studio的安裝。

3.2 基于IOS操作系統(tǒng)的開發(fā)環(huán)境

ipa(iPhone Application)是Apple程序應(yīng)用文件的縮寫，ipa本質(zhì)上是一個zip壓縮包,在進行了IOS簽名后可以在App未上架App Store的情況下下載到蘋果手機上安裝使用。生成ipa文件需要在IOS系統(tǒng)的xcode軟件中進行，因此需要將基于Cordova開發(fā)完成的Web工程，編譯生成IOS平臺的Cordova庫，然后導(dǎo)入xcode軟件重新編譯打包。

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

4.1 地理數(shù)據(jù)的存儲與展示

基于Cordova的跨平臺移動GIS開發(fā)采用前后端分離的開發(fā)模式進行。前后端分離的開發(fā)模式將服務(wù)器端與頁面展示端分離，由后端從數(shù)據(jù)服務(wù)器向前端返回所需展示的數(shù)據(jù)，前端只需要負責(zé)將數(shù)據(jù)渲染到頁面中。這種開發(fā)模式極大地提高了開發(fā)效率，降低了前后端耦合程度。后端的開發(fā)主要采用Spring Boot微服務(wù)架構(gòu)，前端采用Vue.js框架。地理空間數(shù)據(jù)由前端通過ArcGIS Server服務(wù)以及GeoJSon兩種形式調(diào)用展示。

Vue是一個輕量級的MVVM(Model-View-View-Model)框架，其通過數(shù)據(jù)的雙向綁定實現(xiàn)了組件化的前端開發(fā)。通過組件式的開發(fā)模式，Vue.js通過簡單的API就可以實現(xiàn)數(shù)據(jù)與視圖組件的綁定[10]，極大地減少了前端的開發(fā)成本。通過Vue的組件式開發(fā)模式還可以調(diào)用已有的組件庫，實現(xiàn)代碼復(fù)用。

與原生移動GIS基于ArcGIS Runtime SDK進行地理信息數(shù)據(jù)展示與空間分析功能開發(fā)不同，基于Cordova的移動GIS通過調(diào)用ArcGIS API For Javascript實現(xiàn)ArcGIS服務(wù)的調(diào)用，功能更加強大與豐富。其中核心的地理數(shù)據(jù)由兩種方式存儲與展示，一是存儲在Sqlite，MySql等空間數(shù)據(jù)庫，將地理位置存儲為GeoJson，由前端根據(jù)唯一ID獲取，解析為地理坐標展示；二是通過ArcGIS Server將地理數(shù)據(jù)發(fā)布為地圖服務(wù)，由前端通過地圖服務(wù)地理直接讀取展示。

4.2 離線數(shù)據(jù)的存儲與展示

對于不能聯(lián)網(wǎng)的設(shè)備，數(shù)據(jù)訪問無法通過在線服務(wù)訪問，只能通過離線數(shù)據(jù)庫存儲，本文采用輕型數(shù)據(jù)庫SQLite存儲離線空間數(shù)據(jù)和業(yè)務(wù)數(shù)據(jù)。由于SQLite不支持空間數(shù)據(jù)的直接導(dǎo)入，通過postgis插件將空間數(shù)據(jù)導(dǎo)入postgresql數(shù)據(jù)庫，利用查詢函數(shù)st_asewkt (geom)把空間字段geom轉(zhuǎn)成wkt格式的文本數(shù)據(jù)，查詢結(jié)果導(dǎo)出excel格式，利用Navicate把excel文件導(dǎo)入db格式的SQLite數(shù)據(jù)庫。

離線數(shù)據(jù)庫通過程序打包到安裝包里，因此安裝App時，先把db格式的數(shù)據(jù)庫復(fù)制到設(shè)備上，對于Android和IOS兩種設(shè)備，文件讀寫權(quán)限不同，因此需要針對不同操作系統(tǒng)分別處理，本文采用文件插件Cordova-plugin-file處理文件的讀寫。Cordova-plugin-file的核心代碼包括：

(1)Cordova.file.applicationDirectory:安裝應(yīng)用程序的只讀目錄。

(2)Cordova.file.applicationStorageDirectory:應(yīng)用程序沙箱的根目錄,在IOS和 Windows上，此位置是只讀的。

(3)Cordova.file.dataDirectory：使用內(nèi)部存儲器在應(yīng)用程序的沙箱內(nèi)進行持久和私有的數(shù)據(jù)存儲。

(4)Cordova.file.documentsDirectory：應(yīng)用程序?qū)Ｓ玫奈募?，對于蘋果系統(tǒng)，這是用戶的～/Documents目錄。

此外，針對不同的操作系統(tǒng)數(shù)據(jù)存儲目錄的獲取也有所不同，對于Android系統(tǒng)，采用dataDirectory獲取數(shù)據(jù)存儲目錄；對于IOS系統(tǒng)，采用documentsDirectory獲取數(shù)據(jù)存儲目錄。離線數(shù)據(jù)庫文件復(fù)制成功后，利用SQLite插件讀取SQLite數(shù)據(jù)庫時，要對應(yīng)設(shè)置Android和IOS系統(tǒng)數(shù)據(jù)庫所在的目錄地址，分別對應(yīng)androidDatabaseLocation和iosDatabaseLocation參數(shù)，讀取數(shù)據(jù)庫的語句如下：window.sqlitePlugin.openDatabase({name:'waterSourceData.db', androidDatabaseLocation:Cordova.file.dataDirectory,iosDatabaseLocation: "Documents"})。

4.3 響應(yīng)式設(shè)計

相比于Web端應(yīng)用，移動設(shè)備的設(shè)備類型與屏幕尺寸情況更為復(fù)雜，由Web端構(gòu)建的代碼在移動端運行時可能會出現(xiàn)頁面顯示不完整或圖片、文字等堆疊的問題，影響用戶體驗，因此頁面布局的設(shè)計應(yīng)該自動響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式設(shè)計的核心思想是通過HTML，CSS等技術(shù)，使設(shè)計出的頁面具有跨平臺和自適應(yīng)性，能夠根據(jù)不同分辨率的瀏覽器和不同尺寸大小的移動設(shè)備自動調(diào)整自身布局[11]。響應(yīng)式設(shè)計的核心CSS代碼為：@media screen and (屏幕最小尺寸){}、@media screen and (屏幕最小/最大尺寸){}。

4.4 跨平臺打包

基于Cordova的跨平臺打包技術(shù)能夠?qū)崿F(xiàn)基于IOS，Android以及Web端的使用，打包過程包括添加平臺—打包前檢驗—安裝包打包3個過程。

4.4.1 添加平臺

在打包時首先需添加軟件運行的平臺，通過在控制臺輸入不同的命令添加運行平臺，當(dāng)出現(xiàn)對應(yīng)的版本號時，即為添加成功。Android端與IOS端的命令分別為：Cordova platform add android-save與Cordova platform add ios-save。

4.4.2 打包前檢驗

在打包前，必須確保平臺的正確添加以及Cordova的運行環(huán)境正常。調(diào)試打包軟件之前，首先檢查androidsdk是否正確安裝，執(zhí)行命令Cordova platform ls與Cordova requirements檢查平臺情況與打包環(huán)境情況，如出現(xiàn)版本號，即可正常打包。

4.4.3 跨平臺打包

通過不同的命令即可以實現(xiàn)將同一套代碼打包為apk或ipa，正式版apk的打包是通過Visual Studio Code打包的，打包命令為npm run android:build:release，打包apk時可以加上簽名keystore，生成帶簽名的安裝包。正式版ipa的打包需要在蘋果操作系統(tǒng)里通過Xcode打包，打包前需對info.plist存放的配置信息進行修改，包括允許App保存圖片、訪問相冊相機、始終定位等信息，選擇好開發(fā)團隊，利用Archive打包App，提供App Store、安裝到指定的設(shè)備上、分發(fā)給團隊成員等發(fā)布方式。

5 結(jié)語

本文基于Cordova+Vue.js的開發(fā)框架，提出了一種跨平臺移動GIS軟件的開發(fā)模式。這種模式有效解決了原生開發(fā)方式在多平臺間代碼不能復(fù)用，開發(fā)工作量大以及Web端開發(fā)模式響應(yīng)速度慢，與用戶交互性較差的問題，有效提升了地理信息在各行各業(yè)的服務(wù)能力。但是目前基于這種開發(fā)模式開發(fā)的移動GIS軟件與原生軟件相比，仍然存在地圖服務(wù)響應(yīng)較慢，頁面美觀度較差的問題，需要在今后進一步優(yōu)化。