基于矢量瓦片的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/.

（编辑 赵勉）