基于矢量瓦片技术的Web电子海图优化方法

范梦琪, 宋伟东, 郑人维, 何欢. 2021. 基于矢量瓦片技术的Web电子海图优化方法[J]. 海洋科学, 45(2): 68-75. 

FAN Meng-qi, SONG Wei-dong, ZHENG Ren-wei, HE Huan. 2021. Electronic chart optimized method based on the vector tiles technology[J]. Marina Sciences, 45(2): 68-75. 

基于矢量瓦片技术的Web电子海图优化方法

范梦琪

, 宋伟东, 郑人维, 何欢     

摘要：传统的基于栅格瓦片技术生产的Web电子海图虽解决了跨浏览器显示的问题，但其显示速度、渲染效果及交互能力仍无法满足现在用户的需求。为了实现Web电子海图的大规模应用，针对栅格瓦片技术支持的下电子海图中存在的缺陷，提出基于开源地图服器Geoserver与地图可视化JS库Leaflet的矢量瓦片技术优化方案，包括海图数据预处理、矢量切片的制作、矢量瓦片数据多样式显示及矢量瓦片数据要素查询等，通过在实验室海洋信息展示平台中的验证与测试，实现了矢量电子海图数据在Web页面上的多样式灵活显示及交互功能，证实了优化方案的可行性及高效性，整体提升了Web海图服务的效率。

关键词：矢量瓦片    电子海图    Geoserver    GeoWebCache    Leaflet    

Electronic chart optimized method based on the vector tiles technology

FAN Meng-qi

, SONG Wei-dong, ZHENG Ren-wei, HE Huan     

Abstract: Although traditional electronic charts based on the grid tile technology solve the problem of cross-browser display, its display speed, rendering effect, and interactive capabilities still cannot meet the needs of current users. To achieve the large-scale application of web electronic charts and make up for defects in the lower electronic charts supported using the grid tile technology, this study proposes a vector tile technology optimization scheme based on the open source Geoserver (a map server) and Leaflet (a map visualization JS library). These include chart-data preprocessing, vector-slice production, vector-tile data multistyle display, and vector-tile data element query. Through verification and testing in the laboratory marine information display platform, this scheme has realized the multistyle flexible display and interaction of vector electronic chart data on the web page. Finally, the feasibility and efficiency of the optimization scheme was confirmed and the overall efficiency of the web chart service was improved.

Key words: vector tile    electronic chart    Geoserver    GeoWebCache    Leaflet    

随着地理信息系统(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矢