梅昭容，刘 杰

(江苏省基础地理信息中心，江苏 南京 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软件与原生软件相比，仍然存在地图服务响应较慢，页面美观度较差的问题，需要在今后进一步优化。