基于矢量瓦片技術的Web 電子海圖優化方法

范夢琪, 宋偉東, 鄭人維, 何 歡

(遼寧工程技術大學 測繪與地理科學學院, 遼寧 阜新 123000)

隨著地理信息系統(GIS)技術和互聯網技術的發展, 電子海圖(electronic chart, EC)技術也迅速發展起來。近年來, 基于WMS(Web Map Service)和WFS(Web Feature Service)的柵格瓦片Web 電子海圖服務逐步被海洋領域應用。傳統的柵格瓦片地圖是依據金字塔模型對多分辨率的柵格圖像進行切片發布服務, 供客戶端直接調用應用[1]。其制作流程較為繁瑣,除了分等級(縮放級別)切片外, 還需提前對各個縮放級別的地圖預先進行渲染, 這就大大降低了電子海圖生產效率。因此, 矢量瓦片技術應運而生, 矢量瓦片的切片機制與傳統柵格瓦片的切片機制一致,都是依據金字塔模型的切圖方法[2]。但矢量切片生成的是矢量要素描述性文件, 存儲的是矢量數據投影范圍內的幾何信息和屬性信息, 表現為矢量瓦片數據描述性文檔, 這樣就為減少網絡傳輸量, 縮短響應時間, 提升用戶體驗提供可能。同時, 矢量瓦片對前端渲染靈活性和交互性的支持, 也促使矢量瓦片逐漸成為當前地圖應用的熱點研究對象, 很多商業互聯網地圖服務如百度、高德、谷歌地圖已經全面采用矢量瓦片引擎作為優選地圖渲染引擎[3]。但在航海領域, 矢量瓦片技術的應用研究為數不多。孫巖松初步探索了矢量瓦片在內河航道監管系統中的應用技術, 實現了Web 電子海圖上船舶和航標的監控應用功能[4]; 潘明陽等提出ENC 矢量瓦片技術方案, 利用OpenLayers 地圖API 實現了ENC 數據在Web 頁面上的顯示與應用[5]。因此, 為了提高Web 電子海圖的跨平臺應用, 同時提升響應速率優化渲染效果, 為海上漁業管理及海上風險預測等部門提供便利, 本文在矢量瓦片技術研究的基礎上,提出基于開源Geoserver 地圖服務器和前端地圖可視化JS 庫Leaflet 的Web 電子海圖優化方案, 相較于柵格瓦片的電子海圖, 矢量瓦片電子海圖顯示速度明顯提升, 對于矢量瓦片的電子海圖縮放平移等操作基本響應時間保持在0.1 s 以下, 不易被人感覺出來, 從而達到流暢的效果, 海圖渲染的靈活性提高, 并且矢量瓦片也彌補了柵格瓦片不具交互性的缺陷, 為提升Web 電子海圖服務質量與效率提供高效途徑。

1 矢量瓦片

1.1 矢量瓦片地圖

矢量瓦片地圖遵循柵格瓦片地圖的思路, 通過分塊的方式, 減少網絡傳輸量, 從而提高響應速率,不同的是, 矢量瓦片地圖采用的瓦片數據為多層次的矢量要素描述性文件, 單個的瓦片數據是存儲投影在一個矩形區域的幾何信息和屬性信息, 與一般JPEG、PNG 格式的柵格圖片相比, 數據傳輸與存儲空間優勢顯而易見。在提供矢量瓦片地圖服務時, 首先需要將矢量數據以多層次模型切片成為矢量要素描述性文件存儲于服務器端, 當客戶端根據地圖顯示范圍和定義的矢量數據源及樣式文件請求數據時,服務器端返回相應的矢量瓦片、標注字體、圖標等數據, 然后根據樣式文件定義的地圖表達規則在客戶端即時渲染輸出地圖[6]。下圖1 為矢量瓦片地圖的實現模型。

圖1 矢量瓦片地圖實現模型Fig. 1 Vector tile map implementation model

由于傳統的柵格瓦片切片原理是直接切割地圖圖片, 所以通常一套地圖數據需要分層級準備幾套不同的渲染方案, 再進行切片存儲于服務器端。對于一些常見的地圖應用, 尤其是數據量較大的地圖應用, 這樣不僅增加了后臺服務器的負擔, 地圖的交互性和靈活性也受到限制。矢量瓦片既能在數據傳輸與存儲空間方面提高效率, 又能在客戶端地圖表達上提供足夠的靈活性, 同時也為客戶端與地圖數據直接交互提供便利。這些優勢為優化Web 電子海圖提供了極大啟發。

目前主流的矢量切片工具主要有ArcGIS Pro、Geoserver、Mapbox 等[7]。ArcGIS Pro 是ESRI 新推出的桌面制圖軟件, 其發展相對成熟, 矢量切片數據抽稀及數據屬性信息保留情況比較智能, 可以在離線環境下運行, 但需要 ArcGIS 企業版支持;Mapbox 推出Mapbox Studio 矢量地圖和發布工具,可提供標準化的制圖方案, 數據保密性強, 但只能線上運行; Geoserver 是完全開源GIS 服務器, 可以對柵格及矢量數據進行切片和發布服務, 可以離線運行, 并且切片數據屬性的保留比較完整。本文以開源角度, 采用Geoserver 地圖服務器作為后臺服務支撐。

1.2 矢量瓦片數據組織

矢量瓦片的物理模型是瓦片幾何信息與屬性信息在存儲時的表現形式, 由于目前還沒有形成OGC的統一規范, 描述矢量瓦片幾何信息與屬性信息較為流行的幾種開放文件有GeoJSON, TopoJSON 和Mapbox Vector Tile(MVT)[8-12]。其中GeoJSON 是一種基于JSON 的地理數據編碼格式, 可讀性較好, 易于理解, 主流的GIS 引擎幾乎都支持。但相對于其他兩種數據格式, 其數據體積較大, 冗余度大, 占用空間多; TopoJSON 是GeoJSON 的擴展形式之一, 其中的每個幾何體通過共享邊而整合, 因此消除了部分數據冗余, 數據體積極大縮小, 但其可讀性較差, 并且支持這種格式的軟件很少, 通用性差; MVT 是Mapbox 基于PBF(Google protocol buffers)制定的一種矢量瓦片的數據標準, 以二進制流的形式存儲,因壓縮率較高, 體積更小, 讀取速度更快, 已被較多機構單位采用, 本文在電子海圖矢量數據切片中也采用此種數據組織模型。

矢量瓦片的編碼規則包含幾何信息編碼及屬性信息編碼。在PBF 編碼方案中, 矢量瓦片的幾何信息所用的坐標系定義瓦片的左上角為坐標系的原點,X 軸方向向右為正, Y 軸方向向下為正, 坐標值以格網數為單位。矢量瓦片的幾何信息就被分解成一系列的 Move to、Line to、Close Path 等繪圖命令,command id 就代表繪圖命令, 其中1 代表Move to指令, 2 代表Line to 指令, 7 代表Close Path 指令。如圖2, 以線要素為例, 假如矢量瓦片的格網為20×20,圖中粗線的三個坐標分別為(2, 2)、(2, 10)、(10, 12),圖右側展示了線要素幾何信息繪制指令集, 在PBF文件中將指令集編碼存儲為32 位無符號整數序列。

在PBF 編碼方案中, 屬性信息編碼是將要素屬性編碼為tag 字段中偶數對組。tag 對組中第一個整數表示key 在其所在圖層中keys 列表中索引號, 第二個整數表示value 在其所在圖層的values 列表中索引號。其中, 一個要素的所有key 索引保證唯一, 確保要素中沒有重復的屬性項。如圖3 所示為PBF 格式與GeoJSON 格式屬性信息編碼對比示例, 可以看到當需要存儲大量重復字段及屬性值時, PBF 格式能很好壓縮數據量, 避免重復數據。

圖2 矢量瓦片的幾何信息編碼規則Fig. 2 Geometric information coding rules for vector tiles

圖3 矢量瓦片的屬性信息編碼規則Fig. 3 Coding rules for the attribute information of vector tiles

1.3 矢量瓦片數據處理

對于電子海圖的矢量數據處理, S-57 格式的電子海圖是目前世界范圍內較為通用的一種海圖數據傳輸方式, 其數據存儲采用后綴名為*.000 格式的文件。其中的數據關聯較為復雜, 不僅物標與物標之間有關聯, 每個物標中的點、線、面等幾何信息也混雜在一起, 與常見的GIS 數據格式相差較大[13]。因此,為了便于GIS 分析和處理, 本文采用開源的地理空間數據抽象庫 GDAL(Geospatial Data Abstraction Library)來讀寫空間數據[14]。利用OGR 的ogrinfo.exe工具讀取其中一個S-57 文件中的物標信息如圖4 所示。針對水深數據, 利用水深數據轉Shapefile 工具轉換水深圖層, 其中定義水深值字段為 VALSOU,將每個水深點的水深值存入該字段中, 轉換后的水深數據屬性如圖5 所示。

圖4 Ogrinfo 工具讀取S-57 海圖信息Fig. 4 Ogrinfo tool read S-57 chart information

圖5 SOUNDG 水深圖層屬性表Fig. 5 SOUNDG depth layer attribute table

S-57 數據轉換成Shapefile 格式后, 每個類別物標產生一個圖層, 通常海圖數據都是由多個S-57 文件拼接而成, 每幅圖分層得到的物標圖層較多, 因此為了便于數據管理, 簡化圖層個數, 提升矢量切片的效率, 通過開源地理信息系統工具QGIS 將多個*.000 文件中同一物標類別的數據拼接合并成一個Shapefile 文件。

2 基于矢量瓦片的Web 電子海圖優化方案

在分析矢量瓦片數據組織模型的基礎上, 在此提出基于矢量瓦片的Web 電子海圖優化方案, 如圖6所示。電子海圖矢量數據預處理部分包含S-57 電子海圖數據格式轉換和矢量數據存儲兩部分, 以便于數據的傳輸與管理, 其具體實施步驟可參照1.3 節; 矢量瓦片的生成部分是方案實施的關鍵步驟, Geoserver內置的 GeoWebCache 工具可生成矢量切片, 輸出PBF/GeoJSON/TopoJSON 等格式的瓦片數據, 其緩存機制可提高地圖服務響應速度; 矢量瓦片數據的顯示部分, 采用輕量級開源在線地圖JavaScript 庫——Leaflet 調用矢量瓦片地圖服務并在客戶端渲染。Leaflet 源碼雖然輕量但具備強大的在線地圖功能,其工作原理可有效地跨所有主流桌面和移動平臺,并且具有豐富的插件, 便于開發者靈活設計系統[15]。

圖6 基于矢量瓦片的Web 電子海圖優化方案Fig. 6 Web electronic chart optimization scheme based on vector tiles

2.1 矢量瓦片的生成

2016 年12 月, 開源地圖服務器GeoServer2.11版以后增加了vector-tiles-extension-plugin 插件, 擴展了對矢量瓦片生成和發布功能的支持[5]。具體的矢量瓦片生成流程如下。

1. 切圖工具: vector-tiles-extension-plugin 配置;

2. 數據存儲: 創建工作區并加入新的數據存儲,發布圖層數據;

3. 創建切圖方案: 設置切圖方案的名稱、坐標參考系統、切圖分辨率及切圖級別設置。

4. 配置圖層: 配置Tile Cache 的矢量瓦片數據格式geojson、topojson 或mapbox-vector。

5. 利用GeoWebCache 工具緩存切片: 設置矢量瓦片數據格式、切片級別、切圖范圍等參數。切片規則根據道格拉斯-普克算法按圖層級別對數據進行抽稀, 生成矢量瓦片的結果如圖7 所示。

圖7 切片結果Fig. 7 Slice results

2.2 矢量瓦片與柵格瓦片的比較

本文為了比較矢量瓦片與柵格瓦片的數據處理效率, 以某市數據為例準備一套矢量瓦片與柵格瓦片數據。電腦配置為硬件處理器是Intel(R) Core(TM)i5-7500 CPU @ 3.40GHz 3.40GHz, 已安裝內存(RAM)為16 GB。切片方案: 柵格瓦片大小為256×256, 輸出格式為PNG 格式; 矢量瓦片輸出格式為GeoJSON/MVT 格式。切片工具均為Geoserver, 層級為10 (∈[9, 18])。其對比結果如下表1 所示。

表1 矢量瓦片與柵格瓦片切片效率對比表Tab. 1 Comparison of tile efficiency between vector and grid tiles

由上表可以看出, 矢量瓦片相較于柵格瓦片的數據處理效率優勢明顯。矢量瓦片數據的GeoJSON/MVT 格式, 相對于柵格瓦片的PNG 格式, 數據存儲空間大大減少, 數據處理及存儲的效率大大提升,可以為數據更新、傳輸及用戶的體驗帶來極大便利。

2.3 矢量瓦片數據的顯示

Geoserver 地圖服務器發布的矢量瓦片服務僅僅包含物標要素的幾何信息和屬性信息, 并不能直觀地在客戶端呈現, 因此前端采用開源Leaflet 方案,參照S-52 標準根據物標要素的屬性進行樣式的設計與配置, 完成前端矢量瓦片數據的顯示[16]。

在Leaflet 中, 核心的框架是Map 類, 把Map 類看作是一個容器, 可添加圖層、控件、注記及與其綁定的響應事件。借助Leaflet.VectorGrid 插件調用矢量瓦片服務, 利用Leaflet 子類對矢量瓦片進行渲染。其中主要是在vectorTileOptions 中對矢量瓦片進行配置, 矢量瓦片的渲染規則在vectorTileLayerStyles中定義。電子海圖中點狀物標利用L.icon 類, 使用預先做好的符號圖片進行設置; 簡單線物標利用stroke、color、weight 等抽象類結合Layer 類對不同的線型、顏色和線寬進行表達, 復雜的線型通過與L.icon 類結合表達; 面狀物標則利用fill、fillcolor、fillrule 等選件定義。對于較為特殊的水深注記, 采用整數部分與小數部分分離單獨注記的方法, 將小數部分按合適的X, Y 偏移量進行顯示, 以達到S-52 標準的規范顯示效果。圖8 展示了水深注記的效果。

3 方案應用與分析

本文依托實驗室海洋信息展示平臺, 介紹了矢量瓦片Web 電子海圖在平臺中的應用。系統體系框架如圖9 所示, 主要包含數據層、服務層、前端應用層。數據層存儲電子海圖矢量數據、遙感影像數據、魚群數據、風場數據、潮汐數據等; 服務層底圖數據服務采用Geoserver 地圖服務器, 實現多數據源存儲,如 PostGIS、DB2 等數據庫數據; 前端應用層運用Leaflet 地圖API 調用Geoserver 發布的瓦片數據服務,將電子海圖的矢量瓦片與遙感影像柵格瓦片數據進行疊加顯示, 并在此基礎上, 疊加魚群分布、磯釣點等業務數據, 進行海洋信息展示、處理和分析。圖10、圖11 是將基于矢量瓦片Web 電子海圖作為底圖, 分別疊加魚群分布數據和風場數據的融合顯示效果圖。

圖8 水深注記渲染Fig. 8 Water-depth annotation rendering

圖9 海洋信息展示平臺系統體系框架Fig. 9 System architecture of the marine information display platform

圖10 魚群分布熱力圖Fig. 10 Thermal map of fish school distribution

圖11 疊加風場圖Fig. 11 Overlaid wind-field diagram

3.1 地圖加載

在海洋信息展示平臺中, 電子海圖作為平臺底圖起著至關重要的作用, 其加載速度直接影響著平臺的服務質量。如表2 所示, 為了展示海圖顯示速度的優化效果, 以平臺部分電子海圖數據為例(海域 范 圍 為 緯 度 38°33.8083′N～38°51.4059′N, 經 度120°52.6268′E～121°57.4349′E), 比較柵格瓦片電子海圖與矢量瓦片電子海圖加載速度及操作效率。操作電腦的硬件配置的處理器為 Intel(R) Core(TM)i5-5200 CPU @ 2.20GHz 2.19GHz, 內存(RAM)為4 GB。柵格瓦片在Geoserver 地圖服務器中通過樣式化圖層描述文件(Styled Layer Descriptor, SLD)文件已提前渲染, 瓦片大小為256×256, 輸出格式為PNG 格式; 矢量瓦片輸出格式為PBF 格式, 渲染方式為前端渲染。

表2 平臺底圖加載效率對比表Tab. 2 Comparison of loading efficiency between vector and grid maps

由上表可以看出, 基于矢量瓦片的電子海圖相較于柵格瓦片電子海圖, 在首次加載、縮放及移動的操作中都顯具優勢, 并且, 除首次加載消耗的時間較長以外, 其他操作都在100 ms 以下, 而人的反應時間一般大于100 ms, 所以在海圖加載完成時, 底圖操作都更加流暢。

3.2 地圖顯示

在地圖顯示的過程中, 矢量瓦片地圖的目視效果優于柵格瓦片地圖。由于矢量切片數據體積小, 加載速度快, 底圖數據不會像柵格瓦片一樣, 在比例尺增大的過程中出現先卡頓模糊, 再清晰的情況,不影響視覺效果。基于矢量瓦片技術的電子海圖在地圖顯示中的另一大優勢在于緩解服務器壓力, 服務器一次切圖, 前端多種樣式選擇, 以適應不同場景的需求。如圖12、圖13 所示, 可直接通過按鈕一鍵轉換顯示樣式。

圖12 白天模式Fig. 12 Day mode

圖13 夜晚模式Fig. 13 Night mode

3.3 地圖交互能力

由于柵格瓦片無法保留數據的空間特征, 瓦片中的要素無法進行交互。而基于矢量瓦片的電子海圖, 可在Leaflet 的Map 類中, 通過on 函數設置地圖點擊事件, 利用Layer 類的identify 方法獲取鼠標點擊位置, 進而獲取要素的屬性信息, 實現空間查詢功能, 提升海圖交互能力。疊加衛星影像地圖后錨地屬性查詢和磯釣點中要素查詢效果如圖14、圖15所示。

圖14 錨地屬性查詢Fig. 14 Anchor-property query

圖15 磯釣點要素屬性查詢Fig. 15 Querying the attributes of rock fishing points

4 結論

本文針對通用的以柵格瓦片形式提供Web 電子海圖服務中出現的問題進行探索, 通過對矢量切片的原理及數據組織形式的深入分析, 研究了基于矢量瓦片的Web 電子海圖優化方案, 包括S-57 海圖數據的處理、基于開源地圖服務器Geoserver 的矢量切片生成與發布、前端基于Leaflet 的矢量瓦片數據多樣式顯示, 以及矢量瓦片數據要素查詢等。通過矢量切片柵格切片效率對比實驗及海洋信息展示平臺系統應用, 證實優化方案的可行性及高效性, 充分說明基于矢量瓦片技術的Web 電子海圖在數據存儲顯示速度、渲染效果及交互性方面的優勢, 說明矢量瓦片技術在海洋領域的應用前景廣闊。不足之處, 本文也有可繼續優化的方面, 如自動切片、樣式自動化生成、動態數據前端顯示等方面, 因此后續工作將繼續對矢量瓦片在Web 電子海圖優化方面進行深入研究,以實現高效可靠的矢量切片技術體系。