基于矢量瓦片的Web電子航道圖應用技術

潘明陽 羌鵬 李明軒 周海南 郝江凌

摘要：為實現大規模矢量電子航道圖（electronic nautical chart， ENC）的Web應用，基于開源的GeoServer地圖服務器和前端OpenLayers地圖API，提出ENC矢量瓦片技術方案，包括ENC數據處理、矢量瓦片的生成發布、矢量瓦片的訪問和繪制、顯示樣式的切換、基于矢量瓦片的查詢和空間分析應用等。方案在湖南Web ENC綜合應用系統中進行驗證和測試，充分利用矢量瓦片的高分辨率、實時渲染、可交互等特性，實現整個湖南水系矢量ENC數據在Web頁面上的靈活顯示和應用。應用案例表明矢量瓦片技術具有很好的實際應用價值。

關鍵詞：矢量瓦片; GeoServer; OpenLayers; Web電子航道圖（ENC）

中圖分類號： U612.26; P208.2; P209

文獻標志碼： A

Abstract： In order to implement the Web application of large-scale vector electronic nautical charts （ENC）， based on the open source GeoServer （a map server） and OpenLayers （a map client API）， a vector tile technical solution of ENC is proposed， including ENC data processing， vector tile generation and publishing， vector tile accessing and drawing， display mode switching， vector tile-based query and spatial analysis application. The solution has been verified and tested in the Hunan Web ENC comprehensive application system. With advantages of high-resolution， real-time rendering and interactivity of vector tile， the flexible display and application of the vecter ENC data of the whole Hunan water region in Web browsers is implemented by the solution. The application case shows that the vector tile technology has good practical application value.

0 引 言

WebGIS通常指可在Web瀏覽器上運行的地理信息系統。瀏覽器的運行方式使其具有易用性、易擴展性和易維護性等優點，因此WebGIS得到普遍歡迎，并已成為地理系統的最重要應用形式。作為水上的空間信息分支，電子航道圖（electronic nautical chart， ENC）亦早早進入了Web應用時代，并跟隨WebGIS技術演進的步伐，先后經歷了瀏覽器插件、柵格瓦片和HTML5 Canvas等階段。

從客戶端到Web應用轉換初期，與WebGIS類似，Web ENC的應用也大多基于矢量數據，利用各種插件技術如ActiveX、Java Applet等，直接在前端讀取數據，實現繪制、查詢和分析等功能[1-2]。然而，由于插件標準不統一、兼容性差以及容易帶來安全隱患等限制，基于插件的應用并沒有得到大范圍的推廣應用。

柵格瓦片是在瀏覽器上運行時難以方便地利用矢量數據情況下出現的一種折中的WebGIS技術方案。由于很好地滿足了大眾對地圖進行瀏覽的最基本需求，基于柵格瓦片的WMS（Web Map Service）已成為當前WebGIS最主要的技術[3-4]，也是目前航運領域船舶動態跟蹤、數字航道管理和海事管理等應用系統采用的主要Web ENC技術。然而，柵格切片技術存在明顯的缺點，如交互性差、地圖數據需在后臺渲染并難以更改顯示方案、前端和后臺需要的頻繁交互易造成對后臺服務器的巨大壓力等，因此大多停留在只對地圖有瀏覽需求的應用場景上，而對于需要更深入的數據應用需求顯得力不從心。

HTML5為WebGIS應用矢量數據帶來了新的契機[5]。結合JavaScript，HTML5支持的Canvas畫板可實現矢量數據的實時渲染。然而，對于大范圍的空間數據應用，無論是電子地圖還是ENC，龐大的數據量會給前端的數據處理和渲染帶來巨大的負擔，要達到流暢的瀏覽和應用體驗，還需要精妙的優化策略和技術[6]。

近幾年來，矢量瓦片技術的出現和日漸成熟為這個難題提供了很好的解決方案。在GIS業界，許多產品也開始對矢量瓦片提供技術支持，包括ESRI公司的ArcGIS、北京超圖公司的SuperMap、Mapbox TileMill、Geoserver、TileStache和Mapnik等。在學界，費倫宙[7]設計了一種采用矢量瓦片的存儲方案，針對這種方案設計了對應的矢量瓦片數據源驅動， 并完成了導入PostGIS數據庫、矢量分層、矢量分級等處理到最終生產矢量瓦片的過程;王梅欣[8]采用金字塔矢量瓦片存儲方式實現了一種基于矢量瓦片的分布式地圖訪問系統，驗證了分布式矢量切片地圖的可行性;孫晨龍等[9]提出了一種基于矢量瓦片的矢量數據組織方法;周松等[10]利用ArcGIS Online的矢量瓦片服務對矢量瓦片技術在數字城市中的應用進行了研究與探索;周磊等[11]探討了矢量瓦片的編碼規則和存儲方式，分析了TileStache和ArcGIS Pro兩種瓦片切割工具的特點和適用性，并通過Web API實現了云平臺上矢量瓦片的可視化表達和實時渲染;唐雅玲等[12]結合Google Maps瓦片切分方案，研究了矢量地圖數據的Web應用。雖然目前WebGIS還沒有大規模地采用矢量瓦片技術，但矢量瓦片已經來到了WebGIS的最前沿。

相比于通常的WebGIS應用，Web ENC對于矢量化的需求更為強烈，一方面S-52顯示標準規定了圖的顯示需要根據不同場景進行樣式切換，另一方面在海事或航道管理中常常需要基于海圖物標進行查詢和分析。然而，目前利用矢量瓦片進行Web ENC的研究還沒有跟進WebGIS的發展進度，只有孫巖松[13]在基于矢量瓦片的Web ENC方面做了初步的探索研究。

本文在前期基礎上，針對湖南省ENC綜合應用系統的需求，研究基于矢量瓦片的Web ENC應用技術方案，并分析和探討矢量瓦片的優勢。

1 應用需求

湖南水系包括湘江、資江、沅江、醴水及其他一些支流，目前水系中約1 400 km 航道已經進行了ENC的建設。為進一步實現對湖南水系所有AIS基站、視頻監控點、渡口以及船舶和航標動態的監控管理，提出以WebGIS的應用形式建設ENC綜合應用系統的需求。

在該應用系統中，ENC除提供背景顯示以外，還需提供對航道要素的信息查詢、對監控對象基于空間的統計分析等功能支撐。傳統的基于柵格瓦片的WebGIS技術難以滿足該要求。 因此，本文提出基于矢量瓦片的 ENC應用技術方案，從數據組織、服務發布、顯示及應用幾個方面展開研究，并在湖南省ENC綜合應用系統中進行實踐和檢驗。

2 ENC矢量瓦片數據組織

2.1 矢量瓦片基本概念

為減輕前端頁面的數據處理負擔，提高地圖的顯示速度，類似于柵格瓦片，矢量瓦片以多層次模型將矢量數據分割成矢量要素描述性文件并存儲于服務器端，客戶端根據顯示范圍從服務器端獲取數據并按指定的樣式進行渲染繪圖。矢量瓦片與柵格瓦片的不同之處在于單個矢量瓦片是存儲投影在一個長方形區域的幾何信息和屬性信息，而不是預先渲染的柵格圖片[14]。在提供服務時，預先把地圖按層切分成多個矢量瓦片文件存儲在后臺服務器，當在Web前端訪問時只將Web頁面確定的比例尺、地理范圍所對應的那層小部分的矢量瓦片文件傳輸到前端，再由前端根據一定的圖例樣式進行顯示。在柵格瓦片技術體系里，由于圖片已經在后臺渲染，在前端很難更改顯示，除非在后臺準備幾套不同顯示方案的切片。這顯然將造成后臺服務器的額外負擔，也缺乏靈活性。矢量瓦片既能解決數據傳輸效率難題，又能給前端提供足夠的靈活性，當然還有最重要的一點，它還給前端帶來直接與數據進行交互的可能。這些優勢為Web ENC的應用帶來了極大的方便。

基于柵格瓦片的地圖服務已經有相應的WMS和TMS等標準，而矢量瓦片技術目前處于百花齊放階段尚未形成OGC的統一規范，但也有幾種流行的開放格式——GeoJSON、TopoJSON和Mapbox Vector Tile （MVT），其中：GeoJSON是一種基于JSON的地理數據編碼格式[15]，可通過鍵和鍵值對表示點線面幾何體、特征和特征集，其在Web前端可由Javascript進行高效的處理;TopoJSON是GeoJSON的一種擴展[16]，幾何體通過邊拓撲的建立可消除大量的冗余;MVT是基于PBF （Google Protocol Buffers）的一種二進制矢量瓦片編碼格式[17]，其數據結構更加緊湊，具有更高的傳輸效率。

最近，ArcGIS、Mapbox等知名GIS廠商推出了矢量瓦片從后臺切片到服務發布再到前端使用的完整商業解決方案，如ArcGIS Pro+Portal for ArcGIS+ArcGIS API for JavaScript 和 Mapbox Studio+Mapbox GL JS。本文主要從開源角度出發研究ENC的矢量瓦片應用技術，因此將選擇開源的GeoServer作為后臺的支撐平臺，開源的OpenLayers作為前端的顯示引擎。

2.2 ENC矢量瓦片數據處理

目前，湖南水系的ENC是根據湖南地方標準按照S-57 ENC產品規范進行生產的，其數據存儲采用便于數據交換的*.000格式，這是本文進行矢量瓦片應用的數據基礎。然而，由于GeoServer不支持S-57數據格式，進行ENC矢量切片前需要研究數據格式的轉換和處理問題。

本文的策略是：將000轉換成GeoServer支持的標準地理信息數據格式Shapefile，并按照物標類別對ENC數據進行分層處理，再利用GeoServer進行數據拼接和矢量切片，最終形成整個湖南水系的 ENC矢量切片數據。

利用地理空間數據抽象庫GDAL中處理矢量數據的分支項目OGR（簡單要素庫）可方便地進行S-57到Shapefile的分層格式轉換。OGR的ogrinfo可讀取000文件包含的所有物標圖層信息，根據該信息再通過ogr2ogr可進一步將每一物標圖層都轉換為Shapefile文件。S-57 2.5D類型的水深數據不被Shapefile文件支持，因此需要為轉換后的水深層Shapefile專門定義水深值字段（如VALSOU），將每個水深點的水深值存入該字段中。本文利用Python編寫了如圖1所示的批處理腳本，專門處理S-57到Shapefile文件的轉換工作。

ENC是以圖幅為單元進行生產的，整個湖南水系總共有174幅ENC，上述數據轉換過程中每個 ENC文件都將根據其包含的數據圖層形成十幾或者二十幾組Shapefile文件，因此轉換后的數據文件比較雜多。為提高GeoServer矢量切圖的效率，利用開源的地理信息系統工具QGIS對所有同一圖層類別的Shapefile文件進行合并處理。

2.3 ENC矢量瓦片的生成與發布

2016年12月，GeoServer 2.11版以vector tiles extension plugin插件的形式擴展了對矢量瓦片生成和發布功能的支持。具體工作流程主要包括：（1）配置數據源，加入各圖層的Shapefile文件;（2）圖層配置，選擇圖層物標中需要發布的屬性項;（3）切片與發布，選擇瓦片層級和瓦片文件格式（GeoJSON、TopoJSON或MVT），然后進行切片并按GeoServer web.xml中配置的地址進行發布。

為便于在前端對ENC矢量數據進行分層管理，矢量瓦片切片時可選擇對ENC的各物標圖層進行單獨切片和發布，見圖2。圖2中BRIDGE為橋梁圖層，COALINE為岸線圖層，DEPARE為等深區圖層等。

GeoServer矢量切片工具將從各圖層數據源基于道格拉斯-普克算法根據層級對矢量信息進行不同程度的簡化，從而形成各個層級的瓦片文件，見圖3。比例尺越小的層級，瓦片的矢量信息越粗略;比例尺越大的層級，瓦片的矢量信息越詳細。

2.4 矢量瓦片與柵格瓦片的對比分析

為驗證矢量瓦片的優勢，在ENC綜合應用系統中，基于相同的ENC S-57文件準備了一套柵格瓦片數據，與矢量瓦片數據進行對比測試。柵格切片的方案如下：切片大小為256×256，輸出格式為PNG，層數為10（∈[9，18]）層，切片工具為ArcGIS Server。矢量切片的方案如下：輸出格式為GeoJSON/MVT，層數為10（∈[9，18]）層，切片工具為GeoServer。對比測試結果見表1。

從表1可以看出：矢量瓦片在數據處理和存儲效率上有著非常明顯的優勢，利用基于PBF的MVT輸出格式還可進一步提高存儲效率。對于Web ENC應用而言，數據處理和存儲效率的提高也意味著數據更新效率、網絡傳輸效率和用戶體驗的全面提升。

3 ENC矢量瓦片的前端繪制

在本文的應用架構中，前端 ENC矢量瓦片的顯示采用開源的OpenLayers方案。OpenLayers從版本3開始支持包括GeoJSON、TopoJSON、MVT等格式的矢量瓦片。通過OpenLayers提供的VectorTile對象可方便地訪問矢量瓦片服務。然而，矢量瓦片的本質是矢量數據，存儲的是物標要素的幾何位置、關系及屬性，并不包含顯示信息，因此前端還需要根據物標要素的類別、屬性等進行顯示樣式的配置，才能完成ENC的實時繪制。

參照基于S-52的湖南省地方標準進行ENC的顯示樣式設計，利用OpenLayers的ol.style.Style對象為ENC中的所有物標類別生成樣式，并集中在一個JavaScript文件中作為表示庫。點物標主要根據如圖4所示的符號圖片利用icon對象進行樣式設置。簡單線主要利用Stroke對象通過不同的線型、顏色和粗細來表達，而復雜線可利用Stroke+icon的組合來表達，對于符號在線段中出現的位置和旋轉方向可利用要素的geometry對象的forEachSegment函數進行分段計算。面的邊界線采用線物標的樣式，區域的純色填充可利用fill對象設置為不同顏色，而符號填充可由HTML5 Canvas的createPattern函數創建符號填充模式來完成。ENC的文字注記主要利用Text對象進行配置。需要注意的是，根據S-52顯示規范，水深的注記需采用整數與小數分離的形式，將水深值的整數和小數部分分別作為獨立的標注來處理，小數部分的標注是利用設置適當的X、Y偏移量來達到規范的顯示效果的。表示庫文件還包含一個對應S-52表示庫檢索表的樣式函數，它以物標要素對象和當前顯示比例尺作為參數，并根據要素的類型以及相關屬性返回對應的表達樣式。例如，當輸入的要素為等深區圖層DEPARE時，根據要素的水深屬性值（DRVAL1和DRVAL2），樣式函數將返回對應的水深區填充樣式。

4 矢量瓦片ENC的應用

本節結合業務需求，介紹矢量瓦片Web ENC在湖南ENC綜合應用系統中的應用。如圖6所示，湖南ENC綜合應用系統建立在Spring MVC框架的基礎上，主要由后臺的數據層、數據服務層、業務邏輯層和前端的表示層4個部分構成。

（1）數據層包括湖南水系的天地圖、ENC、船舶數據庫、航標數據庫、水上矢量要素數據庫和用戶數據庫。為進行對比測試， ENC分別以柵格瓦片和矢量瓦片的形式進行組織和存儲。天地圖只存儲柵格瓦片形式的數據。

（2）數據服務層包括圖的數據服務和業務數據服務兩大部分。圖的數據服務包括ENC和天地圖的柵格瓦片服務（TMS），以及ENC的矢量瓦片服務（VTS），圖的數據服務由GeoServer地圖服務器支撐。業務數據包括船舶信息、航標信息、AIS基站信息以及其他水上矢量要素信息，業務數據服務由Spring MVC框架的Hibernate數據持久層支撐，負責與業務數據庫進行交互從而獲取前端需要的相關業務數據。

（3）業務邏輯層包括Spring MVC框架的服務層和業務接口層。業務接口層用@Controller標注控制層組件，負責后臺對前端具體業務需求的接入，如獲取船舶動態、航標動態等，并通過調用服務層進行業務流程控制。對應不同的前端業務需求，會有不同的控制器。服務層是通過@Service標注的業務層組件，通過調用數據服務層的接口，實現對接口層傳入的業務數據的控制。

（4）表示層運行在前端Web頁面，從數據服務層獲取圖的TMS或VTS，基于OpenLayers地圖API將ENC的柵格或矢量瓦片數據與天地圖柵格瓦片數據進行融合顯示，并以融合圖為基礎進一步疊加船舶、航標、AIS基站、視頻監控點和渡口等業務數據，進行顯示、處理和分析。

矢量瓦片 ENC在系統中不僅提供靈活多樣的航道圖顯示瀏覽功能，為業務數據提供基礎空間背景，還提供對航道要素的信息查詢以及對船舶等動態目標基于空間的統計分析等功能的支撐。

4.1 ENC顯示

如上所述，利用OpenLayers技術可在Web前端實現 ENC矢量瓦片的顯示。利用OpenLayers的接口可進一步開發縮放、拖動瀏覽等ENC顯示基本操作功能。

矢量瓦片的一大技術優勢是無須服務端的支持即可在前端實現“一次切圖多樣顯示”，滿足多種應用場景需求。ENC應用常見的顯示模式包括白天、黃昏和黑夜三種模式，可分別以不同的顏色體系適應不同的光線環境下的視覺要求。

本文利用該技術優勢，根據S-52標準的顏色規范，在表示庫文件中設計了3套顯示模式，并為模式函數增加了顯示模式參數。因此，可快速通過按鈕點擊等方式為所需的參數調用模式函數，實現白天、黃昏和黑夜模式的切換，如圖7所示。

4.2 物標要素信息查詢

與柵格瓦片相比，矢量瓦片的另一大優勢是前端數據交互能力。在OpenLayers的地圖點擊事件中利用getFeaturesAtPixel函數可以獲取矢量瓦片中的物標要素對象，進而進行要素信息的查詢處理，包括突出顯示、彈出屬性信息框等。圖8顯示了對ENC中某個航標的查詢效果。

4.3 空間分析

在獲取矢量瓦片的要素對象后，除進行信息查詢外還可進行空間分析。在本文的 ENC應用中，對錨泊區內的船舶進行統計分析是日常管理的一個基本需求。通過提取矢量瓦片中的錨泊區要素對象，利用要素對象的getGeometry（）.getExtent（）可獲取其地理范圍，從而進行所需的空間分析。

在本文設計的系統架構中，前端除獲取圖的服務外，還可通過Ajax技術持續從接口層服務中獲取船舶的動態信息，并將其以三角形符號疊加到ENC上，見圖9。一旦獲取矢量瓦片的錨泊區要素對象的地理范圍，就可以通過簡單的點與面的空間關系進行判斷并結合船舶的類型，實現圖9左下角所示的關于停泊船舶的類型數量統計分析。

圖9 錨泊區的船舶統計

在湖南ENC綜合應用系統中，同時準備了 ENC的柵格瓦片進行對比測試。測試結果進一步驗證了矢量瓦片在存儲、顯示、交互性等方面的優勢。首先，由第2.4節的對比可以看出，矢量瓦片的數據處理和存儲效率更高，這也使得前端顯示時采用矢量瓦片具有更好的體驗，包括更快的顯示速度、放大過程中不會出現柵格圖片先模糊再清晰的現象等。其次，矢量瓦片實現了“一次切圖多樣顯示”，而對于柵格瓦片方案，如果前端需要展示3種不同樣式，則需要準備3套瓦片，分別進行配圖、切片和存儲，不僅成倍占用資源，而且數據更新工作量巨大。再者，矢量瓦片技術很好地支撐了前端信息查詢和分析的需求，而對于柵格瓦片方案，如果沒有服務器端配合則難以滿足這種交互的需求，而且即使結合服務器實現了交互性，其需要網絡往復的模式使其比矢量瓦片在前端直接交互的效率低很多。

5 結 論

本文研究了基于矢量瓦片的Web 電子航道圖（ENC）應用技術方案，包括服務器端的ENC數據處理、基于GeoServer地圖服務器的ENC矢量切片和發布、前端基于OpenLayers的ENC矢量瓦片數據訪問、基于S-52規范的顯示樣式及樣式切換，以及矢量瓦片的查詢和空間分析應用。與柵格瓦片技術方案的對比測試表明：基于矢量瓦片的ENC應用技術在數據存儲和數據處理等方面具有更高的效率，更適用于基于網絡的Web ENC應用系統。

針對湖南水系的監控管理需求，本文設計開發了湖南Web ENC綜合應用系統。該系統基于矢量瓦片Web ENC應用技術方案，實現了Web前端ENC的靈活顯示、航道要素的信息查詢，以及基于航道要素的空間分析等功能。從工程實踐上進一步驗證了矢量瓦片方案的可行性，同時與柵格瓦片進行的對比驗證得出，矢量瓦片無論是在數據處理、顯示靈活性和用戶體驗還是數據的可交互性上都具有明顯的優勢，是Web ENC未來發展的一個重要的方向。

本文對基于矢量瓦片的Web ENC應用技術進行了初步的探索，但對 ENC的矢量瓦片在服務器端的自動化切片、復雜樣式的自動化生成、數據驗證與授權以及在前端的動態展示等問題尚未展開深入研究，后續工作將繼續對這些關鍵技術進行突破，以實現具有高可用性的矢量瓦片ENC技術體系。此外，也將結合船舶航行等應用需求，研究探索基于矢量瓦片 ENC的其他應用形式，如船舶導航App等。

參考文獻：

[1]彭國均， 翁躍宗. 基于Java Applet技術的網絡電子海圖系統[J]. 上海海事大學學報， 2007， 28（4）： 26-29.

[2]潘明陽， 胡景峰， 張斌. 內河船舶導航監控一體化應用[J]. 大連海事大學學報， 2011， 37（1）： 39-43， 47.

[3]李愛霞， 龔健雅， 賈文玨， 等. 基于WMS的WebGIS[J]. 測繪信息與工程， 2004（6）： 1-3.

[4]許虎， 聶云峰， 舒堅. 基于中間件的瓦片地圖服務設計與實現[J]. 地球信息科學學報， 2010， 12（4）： 562-567.

[5]MATS T. Exploring the future： is HTML5 the solution for GIS applications on the World Wide Web？[D]. Trondheim Norway： Norwegian University of Science and Technology， 2011.

[6]PAN Mingyang， PANG Bobo， LI Chao， et al. Research on Web mapping of vector nautical charts based on HTML5[C]//Institute of Electrical and Electronics Engineers （IEEE）. Proceedings of the 2013 International Conference on Information Science and Cloud Computing Companion. Guangzhou： IEEE Computer Society Washington， 2013： 611-617.

[7]費倫宙. 基于矢量瓦片的地理數據存儲訪問技術研究與實現[D]. 西安： 西安電子科技大學， 2016.

[8]王梅欣. 分布式矢量瓦片生產與訪問系統的設計與實現[D]. 西安： 西安電子科技大學， 2016.

[9]孫晨龍， 霍亮， 高澤輝. 基于矢量瓦片的矢量數據組織方法研究[J]. 測繪與空間地理信息， 2016， 39（4）： 122-124.

[10]周松， 郭佳. 矢量瓦片技術在數字城市中的應用研究與探索[C]//地理信息與人工智能論壇暨江蘇省測繪地理信息學會2017年學術年會論文集， 2017： 10-13.

[11]周磊， 吳國青， 陸海芳. 矢量瓦片技術在地理信息公共服務云平臺中的應用[C]//地理信息與人工智能論壇暨江蘇省測繪地理信息學會2017年學術年會論文集， 2017： 14-16.

[12]唐雅玲， 馬晨燕， 宋佳， 等. 矢量Web網絡地圖應用研究[J]. 測繪與空間地理信息， 2018， 41（2）： 77-80， 83， 86.

[13]孫巖松. 基于矢量瓦片的Web電子海圖研究[D]. 大連： 大連海事大學， 2017.

[14]陳舉平， 丁建勛. 矢量瓦片地圖關鍵技術研究[J]. 地理空間信息， 2017， 15（8）： 44-47， 10.

[15]BULTER H， DALY M， DOYLE A， et al. The GeoJSON format[EB/OL]. （2008-02-08）[2018-08-07]. https：//tools.ietf.org/pdf/rfc7946.pdf.

[16]BOSTOCK M. An extension of GeoJSON that encodes topology[EB/OL]. （2017-09-03）[2018-08-07]. https：//github.com/topojson/topojson.

[17]MAPBOX. Mapbox vector tile specification[EB/OL]. （2016-01-19）[2018-08-07]. https：//www.mapbox.com/vector-tiles/specification/.

（編輯 趙勉）