郭杰凱，劉 冰，楊翠媛，鄧振民，馬麗娜，安效國

（1. 山東中基地理信息科技有限公司，山東 濟(jì)南 250000；2. 山東科技大學(xué)測繪與空間信息學(xué)院，山東 青島 266590；3. 山東科技大學(xué)網(wǎng)絡(luò)安全與信息化辦公室，山東 青島 266590）

WebGIS 領(lǐng)域已形成一套成熟的開源技術(shù)體系，在地圖服務(wù)方面有WMS、WFS、WMTS 等相關(guān)規(guī)范[1-6]，在服務(wù)實現(xiàn)方面有Geoserver，在可視化方面有Openlayers、Mapbox 等，而且對矢量瓦片也有很好的支持，已經(jīng)得到大量應(yīng)用[7-8]。最大化利用現(xiàn)有技術(shù)體系可顯著降低技術(shù)難度與風(fēng)險，所以本文基于開源WebGIS 技術(shù)路線，對移動端離線環(huán)境下矢量瓦片展示技術(shù)方案進(jìn)行了研究，并通過實驗進(jìn)行了驗證。

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

1.1 離線環(huán)境的GIS服務(wù)

由于WebGIS本質(zhì)是B/S架構(gòu)，可視化前端需要通過http 網(wǎng)絡(luò)請求向GIS 服務(wù)獲取數(shù)據(jù)，要求客戶端和服務(wù)端存在網(wǎng)絡(luò)連接。在移動端離線環(huán)境下，可通過回環(huán)網(wǎng)絡(luò)機(jī)制解決網(wǎng)絡(luò)連接問題。發(fā)送到回環(huán)地址的任何數(shù)據(jù)包的處理都在TCP/IP 堆棧的鏈路層中實現(xiàn)，這些數(shù)據(jù)包不需要網(wǎng)絡(luò)硬件設(shè)備處理，訪問運行在本機(jī)上的網(wǎng)絡(luò)服務(wù)，不需要物理網(wǎng)絡(luò)接口，也不需要從計算機(jī)連接的網(wǎng)絡(luò)中訪問。IPv4網(wǎng)絡(luò)標(biāo)準(zhǔn)為了回送目的保留整個127.0.0.0/8 地址塊。因此，在移動端應(yīng)用中嵌入GIS 服務(wù)，并設(shè)置服務(wù)地址為回環(huán)地址（例如127.0.0.1），可實現(xiàn)WebGIS體系的應(yīng)用。

1.2 矢量瓦片存儲

矢量瓦片的核心思想是將矢量數(shù)據(jù)切分到按照選定的瓦片網(wǎng)格方案規(guī)則分布的若干瓦片中。瓦片網(wǎng)格方案用于將投影后的全球范圍分割成多級別的瓦片格網(wǎng)，在0 級別中使用1 個瓦片覆蓋投影后的全球范圍，在1 級別中，將0 級別的唯一瓦片進(jìn)行四等分，以此類推，將某一級別內(nèi)的各瓦片進(jìn)行四等分即得到下一級別的瓦片，每一個瓦片都對應(yīng)著一個實際的投影坐標(biāo)范圍。瓦片按照選定的編號起點和行列方向進(jìn)行編號，使用由行號和列號組成的瓦片坐標(biāo)將每一個瓦片進(jìn)行標(biāo)識，如圖1所示。

圖1 瓦片網(wǎng)格方案示意圖

矢量瓦片生成總體流程是按照瓦片網(wǎng)格方案確定每一層級的瓦片編號與瓦片范圍，對每一個瓦片通過空間范圍條件篩選確定其包含的矢量要素，通過裁剪、簡化等處理后，使用選定的編碼方案將瓦片內(nèi)的矢量要素幾何信息和屬性信息進(jìn)行編碼，進(jìn)而存儲到特定格式的文件中，矢量瓦片生成的算法邏輯如圖2所示。

圖2 矢量瓦片生成算法邏輯流程圖

在數(shù)據(jù)編碼和存儲格式方面，目前還未形成統(tǒng)一的標(biāo)準(zhǔn)，比較常用的是Mapbox 制定的矢量瓦片規(guī)范（簡稱為MVT）。Google Protocol Buffers（簡稱Proto?buf）是Google 開源的一種數(shù)據(jù)序列化方法，相比較一些其他的如XML 技術(shù)而言，該技術(shù)更加節(jié)省空間（以二進(jìn)制流存儲）、速度更快，也更加靈活[9]。MVT基于Protobuf 將編碼后的矢量數(shù)據(jù)序列化為擴(kuò)展名為.mvt的瓦片文件。MVT對單個瓦片內(nèi)數(shù)據(jù)如何組織進(jìn)行了描述，但并未包括多層級的瓦片文件如何組織，傳統(tǒng)方法是按照瓦片層級和瓦片編號的列號進(jìn)行文件夾劃分，使用瓦片編號的行號作為瓦片文件名，最終形成散列形式的瓦片數(shù)據(jù)集，如圖3 所示。這種形式的數(shù)據(jù)集的缺點是文件數(shù)量大，不便于數(shù)據(jù)遷移。MBTiles 規(guī)范最初用于在SQLite 數(shù)據(jù)庫中存儲柵格瓦片數(shù)據(jù)，規(guī)范要求tiles 表包含zoom_level、tile_column、tile_row和tile_data4個字段，其中tile_da?ta 字段存儲圖像二進(jìn)制數(shù)據(jù)。將MBTiles 規(guī)范應(yīng)用到矢量瓦片上，把mvt 瓦片文件以二進(jìn)制形式寫入tile_data 字段，可將矢量瓦片數(shù)據(jù)集組織到SQLite 數(shù)據(jù)庫中，實現(xiàn)數(shù)據(jù)文件的高效遷移。

圖3 瓦片數(shù)據(jù)集散列文件存儲結(jié)構(gòu)示意圖

1.3 混合開發(fā)技術(shù)

矢量瓦片數(shù)據(jù)在HTML 頁面中渲染，安卓環(huán)境承載HTML 頁面通常是使用Webview 組件，該組件提供loadUrl方法，支持加載本地頁面和網(wǎng)絡(luò)地址。移動端的突出優(yōu)勢是具有衛(wèi)星定位、攝像頭、錄音等豐富的硬件功能，可以在移動端應(yīng)用中使用原生開發(fā)方式調(diào)用硬件功能，對HTML 頁面進(jìn)行增強(qiáng)。這種HTML 頁面和原生開發(fā)相結(jié)合的方式稱為混合開發(fā)技術(shù)，HT?ML 頁面使用這些硬件功能需要調(diào)用安卓原生能力，即需要JavaScript和安卓（稱為Native）進(jìn)行通信，JS?Bridge技術(shù)為兩者提供了雙向的消息通信通道。Native調(diào)用JavaScript 的方法直接將JavaScript 代碼放入Web?view組件中執(zhí)行。而JavaScript 調(diào)用Native，則需要通過WebView 提供的接口，向JavaScript 的運行時上下文（window）中注入對象或者方法，讓JavaScript調(diào)用時，直接執(zhí)行相應(yīng)的Native 代碼邏輯。直接使用JS?Bridge實現(xiàn)JavaScript和安卓的通信，在實際編碼中是非常繁瑣的。HTML5中國產(chǎn)業(yè)聯(lián)盟推出的HTML5+規(guī)范將常用擴(kuò)展能力進(jìn)行了封裝，并且通過Native.js 技術(shù)使JavaScript 可以直接調(diào)IOS 和Android 的原生API。目前流行的UNIAPP 跨平臺開發(fā)框架對HTML5+進(jìn)行了集成，基于此框架進(jìn)行混合開發(fā)可以在HTML頁面中簡潔地實現(xiàn)JavaScript和Android原生的交互。

UNIAPP 開發(fā)框架具有跨平臺性和混合開發(fā)支持兩大突出功能特性，能夠極大提升開發(fā)效率?？缙脚_性是指基于該框架所開發(fā)的應(yīng)用僅編碼一次，便可編譯成Android、IOS、Web、小程序等多種平臺下的應(yīng)用程序。UNIAPP 開發(fā)框架為組件化開發(fā)模式，該框架提供了常用的基本組件和擴(kuò)展組件，以及頁面跳轉(zhuǎn)、網(wǎng)絡(luò)通信等各種API，另外支持自定義組件來保證擴(kuò)展性。UNIAPP混合開發(fā)（指使用UNIAPP框架開發(fā)移動端應(yīng)用的場景）有多種途徑，常用的為3種。

1）僅使用UNIAPP 開發(fā)框架提供的組件與API。該框架最基礎(chǔ)的功能就是將開發(fā)者編寫的頁面編譯成HTML 頁面，然后使用Webview 渲染引擎進(jìn)行呈現(xiàn)，這本身就是混合開發(fā)模式?？蚣軐⒊Ｓ玫奈募僮?、陀螺儀、WiFi 等各種移動端設(shè)備能力調(diào)用進(jìn)行了封裝，可以在頁面中直接使用相應(yīng)的API。

2）在應(yīng)用中直接使用通用的Web 開發(fā)方式編寫HTML 頁面，使用框架提供的Web-view 組件來加載。編譯時框架對該類頁面不做處理。在HTML頁面中使用框架集成的HTML5+來完成與原生的交互。

3）按照框架的原生組件規(guī)范，使用原生開發(fā)語言實現(xiàn)原生擴(kuò)展組件，然后在頁面中調(diào)用。

本文總體上是基于第2種模式實現(xiàn)的。

2 實驗驗證

2.1 數(shù)據(jù)準(zhǔn)備

實驗數(shù)據(jù)為某鎮(zhèn)行政范圍內(nèi)的三調(diào)地類圖斑矢量數(shù)據(jù)，圖斑數(shù)量為11 815 個，總面積約為75.22 km2。數(shù)據(jù)處理流程為：

1）通過坐標(biāo)轉(zhuǎn)換工具將坐標(biāo)系轉(zhuǎn)為WGS84。

2）使用OGR2OGR將原始shapefile格式的數(shù)據(jù)轉(zhuǎn)換為GEOJSON文件。

3）使用Tippecanoe制作矢量切片，輸出為mbtiles數(shù)據(jù)集。

2.2 嵌入式GIS服務(wù)

實驗程序采用UNIAPP跨平臺開發(fā)框架，UNIAPP應(yīng)用由PandoraEntryActivity 組件來承載，該組件是由入口組件PandoraEntry 通過startActivity 方法調(diào)起的，GIS 服務(wù)是在PandoraEntryActivity 中嵌入，具體實現(xiàn)步驟為：

1） 創(chuàng)建自定義入口組件（命名為MapPan?doraEntry）繼承PandoraEntry，并在配置文件中將其設(shè)置為入口。

2）創(chuàng)建自定義主組件（MapPandoraEntryActivi?ty）繼承PandoraEntryActivity，并在MapPandoraEntry?Activity的初始化方法中啟動GIS服務(wù)。

3）在自定義入口組件MapPandoraEntry的startAc?tivity方法中啟動自定義主組件MapPandoraEntryActivity。

2.3 矢量瓦片渲染

WebGL（Web 圖形庫）是在瀏覽器中以JavaS?cript API 為開發(fā)語言進(jìn)行高性能3D 和2D 圖形渲染的技術(shù)，不依賴其他插件，而且移動端瀏覽器也已支持WebGL。MapLibre-GL-JS 是Mapbox-GL-JS 的一個開源分支，基于WebGL 技術(shù)實現(xiàn)矢量瓦片的快速渲染。實驗程序開發(fā)的HTML頁面引入MapLibre GL JS，使用其提供的API初始化地圖容器并添加圖層，能夠高幀率地展示矢量數(shù)據(jù)，并且可以便捷地進(jìn)行屬性查詢操作。

3 結(jié) 語

本文基于UNIAPP跨平臺開發(fā)框架，在應(yīng)用中嵌入GIS服務(wù)，在HTML頁面中使用WebGL展示矢量瓦片數(shù)據(jù)，同時在UNIAPP 框架支持下，可在HTML 頁面中便捷地調(diào)用衛(wèi)星定位等設(shè)備功能，并且該方案均采用開源庫，成本低，為離線環(huán)境下矢量瓦片應(yīng)用提供了可借鑒的技術(shù)方案，可在野外調(diào)查等業(yè)務(wù)中推廣應(yīng)用。