梅昭容，劉 杰

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

0 引言

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

1 混合開(kāi)發(fā)模式

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

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

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

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

2 Cordova軟件架構(gòu)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.4 跨平臺(tái)打包

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

4.4.1 添加平臺(tái)

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

4.4.2 打包前檢驗(yàn)

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

4.4.3 跨平臺(tái)打包

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

5 結(jié)語(yǔ)

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