随着地理信息系统(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为矢量瓦片地图的实现模型。

由于传统的栅格瓦片切片原理是直接切割地图图片, 所以通常一套地图数据需要分层级准备几套不同的渲染方案, 再进行切片存储于服务器端。对于一些常见的地图应用, 尤其是数据量较大的地图应用, 这样不仅增加了后台服务器的负担, 地图的交互性和灵活性也受到限制。矢量瓦片既能在数据传输与存储空间方面提高效率, 又能在客户端地图表达上提供足够的灵活性, 同时也为客户端与地图数据直接交互提供便利。这些优势为优化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格式能很好压缩数据量, 避免重复数据。

1.3 矢量瓦片数据处理

对于电子海图的矢量数据处理, S-57格式的电子海图是目前世界范围内较为通用的一种海图数据传输方式, 其数据存储采用后缀名为*.000格式的文件。其中的数据关联较为复杂, 不仅物标与物标之间有关联, 每个物标中的点、线、面等几何信息也混杂在一起, 与常见的GIS数据格式相差较大^[13]。因此, 为了便于GIS分析和处理, 本文采用开源的地理空间数据抽象库GDAL(Geospatial Data Abstraction Library)来读写空间数据^[14]。利用OGR的ogrinfo.exe工具读取其中一个S-57文件中的物标信息如图 4所示。针对水深数据, 利用水深数据转Shapefile工具转换水深图层, 其中定义水深值字段为VALSOU, 将每个水深点的水深值存入该字段中, 转换后的水深数据属性如图 5所示。

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]。

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所示。

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所示。

由上表可以看出, 矢量瓦片相较于栅格瓦片的数据处理效率优势明显。矢量瓦片数据的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电子海图作为底图, 分别叠加鱼群分布数据和风场数据的融合显示效果图。

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格式, 渲染方式为前端渲染。

由上表可以看出, 基于矢量瓦片的电子海图相较于栅格瓦片电子海图, 在首次加载、缩放及移动的操作中都显具优势, 并且, 除首次加载消耗的时间较长以外, 其他操作都在100 ms以下, 而人的反应时间一般大于100 ms, 所以在海图加载完成时, 底图操作都更加流畅。

3.2 地图显示

在地图显示的过程中, 矢量瓦片地图的目视效果优于栅格瓦片地图。由于矢量切片数据体积小, 加载速度快, 底图数据不会像栅格瓦片一样, 在比例尺增大的过程中出现先卡顿模糊, 再清晰的情况, 不影响视觉效果。基于矢量瓦片技术的电子海图在地图显示中的另一大优势在于缓解服务器压力, 服务器一次切图, 前端多种样式选择, 以适应不同场景的需求。如图 12、图 13所示, 可直接通过按钮一键转换显示样式。

3.3 地图交互能力

由于栅格瓦片无法保留数据的空间特征, 瓦片中的要素无法进行交互。而基于矢量瓦片的电子海图, 可在Leaflet的Map类中, 通过on函数设置地图点击事件, 利用Layer类的identify方法获取鼠标点击位置, 进而获取要素的属性信息, 实现空间查询功能, 提升海图交互能力。叠加卫星影像地图后锚地属性查询和矶钓点中要素查询效果如图 14、图 15所示。

4 结论

本文针对通用的以栅格瓦片形式提供Web电子海图服务中出现的问题进行探索, 通过对矢量切片的原理及数据组织形式的深入分析, 研究了基于矢量瓦片的Web电子海图优化方案, 包括S-57海图数据的处理、基于开源地图服务器Geoserver的矢量切片生成与发布、前端基于Leaflet的矢量瓦片数据多样式显示, 以及矢量瓦片数据要素查询等。通过矢量切片栅格切片效率对比实验及海洋信息展示平台系统应用, 证实优化方案的可行性及高效性, 充分说明基于矢量瓦片技术的Web电子海图在数据存储显示速度、渲染效果及交互性方面的优势, 说明矢量瓦片技术在海洋领域的应用前景广阔。不足之处, 本文也有可继续优化的方面, 如自动切片、样式自动化生成、动态数据前端显示等方面, 因此后续工作将继续对矢量瓦片在Web电子海图优化方面进行深入研究, 以实现高效可靠的矢量切片技术体系。