基于Cordova模式的移動GIS開發關鍵技術研究

梅昭容，劉 杰

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

0 引言

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

1 混合開發模式

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

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

React Native是由Facebook研發的一套跨平臺開發技術，其特點是使用JavaScript編寫出的代碼轉為原生平臺的API，從而實現使用同一套React Native代碼轉換為Android和IOS系統的原生代碼，實現了多線程開發，運行效率較高。React Native更接近原生語言，因此學習成本較高，需要有Android和IOS開發基礎。

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

2 Cordova軟件架構

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

圖1 基于Cordova混合開發的移動GIS App軟件架構

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

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

3 跨平臺開發環境

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

3.1 基于Android操作系統的開發環境

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

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

3.2 基于IOS操作系統的開發環境

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

4 關鍵技術

4.1 地理數據的存儲與展示

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

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

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

4.2 離線數據的存儲與展示

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

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

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

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

(3)Cordova.file.dataDirectory：使用內部存儲器在應用程序的沙箱內進行持久和私有的數據存儲。

(4)Cordova.file.documentsDirectory：應用程序專用的文件，對于蘋果系統，這是用戶的～/Documents目錄。

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

4.3 響應式設計

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

4.4 跨平臺打包

基于Cordova的跨平臺打包技術能夠實現基于IOS，Android以及Web端的使用，打包過程包括添加平臺—打包前檢驗—安裝包打包3個過程。

4.4.1 添加平臺

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

4.4.2 打包前檢驗

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

4.4.3 跨平臺打包

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

5 結語

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