在水利部以信息化带动水利现代化的战略方针指导下^[1]，水利专题地图作为水利行业空间地理信息的重要可视化产品，在行业内得到了广泛的应用。与普通地图相比，水利专题地图具有以下特点^[2]：在组成上包括地理底图和水利专题要素两部分，在内容上着重表现水利专题信息，在可视化方面采用专门的符号系统。因此，如何基于水利专题地图的特点实现精细化、自动化、流程化的水利专题地图制图，提升水利行业的信息化水平和专题制图能力，成为了行业研究热点。

相关学者针对在线专题制图的相关技术进行了多方面研究。国内学者对新媒体在线专题制图模式进行了研究^[3]，从功能转变、模式转变和内涵冲击三方面分析了现代专题地图的研究进展与趋势^[4]，对在线专题地图符号模型与渲染机制进行了探讨^[5-7]，同时设计了许多优秀的在线专题地图系统^[8-10]。国外学者则更多地将研究聚焦于统计图表，从统计图表的角度理解专题地图^{[11, 12]}，为在线专题制图提供新思路。在面向水利行业的专题制图方面，张晶等^[2]结合实际制图经验，总结出了水利专题地图的特点与制作流程，曹全龙等^[13]以江苏省为例对水利专题地图制图的在线应用进行了探索。

本文通过对水利专题地图特点和制图需求的充分研究，综合利用在线制图、WebGIS等技术，基于Vue.js渐进式客户端框架和OpenLayers开源地图引擎，以浙江省水利专题数据为例, 设计并建立了一个轻量级、开放式的在线动态水利专题地图系统，制图流程清晰且能满足水利行业的个性化需求。对提升水利行业的专题地图定制能力与制图效率具有积极意义。

1 系统框架

在线动态水利专题地图系统基于B/S模式设计，由应用层、服务层和数据层3层结构组成，如图 1所示。其中，数据层主要是部署在服务器端的数据库；服务层包含了系统所使用的各类服务；应用层则位于客户端，使用浏览器作为系统的应用界面。

1) 数据层负责存储系统所用到的各类数据，主要包括基础地理数据、水利专题数据、制图规则数据和用户制图数据3部分。地理空间数据是系统所调用的地理底图要素的数据源，包括道路、境界、水系、居民地等基本地理要素信息；水利专题数据主要是水库、堤防、水闸等专题要素数据；制图规则数据包含了制图模板、符号库、地图整饰等制图知识；用户制图数据是用户的地图空间，保存用户自定义的专题地图和制图模板。

2) 服务层主要负责对客户端的用户请求进行统一的响应调度，为系统应用层提供符合OGC(Open Geospatial Consortium, 开放地理空间信息联盟)标准的地理底图服务与水利专题要素服务，并通过用户数据访问服务接口实现用户地图空间的管理维护。

3) 应用层是水利专题地图及专题数据的浏览显示层，是实现系统功能的核心层。应用层总体采用Vue.js渐进式前端框架搭建，基于“组件化”的设计理念实现了OpenLayers地图引擎的组件化封装，进而将其融入到Vue框架的主体结构中；其中主要包括顶层地图容器的组件化和专题图层的组件化两部分。以Vue组件化开发框架为基础，实现OpenLayers地图对象的完全组件化集成，使得开源的富客户端开发优势愈发明显：在保证系统轻量级和开放性的同时，使系统的逻辑更加清晰，进一步提升了系统的可交互性。

2 功能特色及关键技术 2.1 模板组件化的在线专题地图定制

制图模板是对制图知识与经验的抽象^[14]，能够有效地提高地图制图的自动化水平、降低地图制图的门槛。本文将系统的水利专题图制图模板抽象为自然水系、水利工程、防汛管理3类父模板，并将制图模板进行组件化封装。每个制图模板都包括底图要素和专题要素两部分内容。用户可以选择系统提供的不同风格的WMTS(Web map tile service, Web地图瓦片服务)，或者WMS(Web map service, Web地图服务)作为模板的地理底图图层；针对专题要素，每个制图模板组件则包括模板类别、模板数据源、模板制图规则等内容。利用模板组件化的可扩展、高度设计重用等特点，用户可以方便地对父模板进行交互式地修改，最终生成不同的制图效果，并能够将定制完成的专题地图和制图模板进行保存和复用。

1) 模板类别定制。系统提供3类父模板组件供用户选择，父模板内置了默认的水利专题要素及其相应的符号化及注记放置等制图规则，用户能够通过父模板快速地生成一副标准的水利专题地图。

2) 专题数据源定制。在3类父模板内置的专题图层的基础上，用户可以扩展并修改用于成图的水利专题图层数据源，除WFS(Web feature service, Web要素服务)形式的水利专题要素服务以外，还可以上传本地文件作为专题图层的数据源。

3) 制图规则定制。用户可以交互式地对制图模板中各水利专题要素图层的符号、注记等制图规则进行配置和修改，实现个性化制图规则配置。

4) 制图模板保存复用。用户可将性化定制的专题制图模板组件及制图状态上传保存到个人地图空间中，便于用户对个人制图模板组件进行浏览、检索和查询，进行模板复用。

2.2 数据双向绑定的动态专题符号配置

水利专题要素的在线动态符号化是系统的核心功能。用户在专题地图定制过程中需要对专题符号和注记的相关参数进行频繁地交互修改，因此本文基于观察者设计模式实现了数据双向绑定的动态专题符号配置，将数据双向绑定和响应式重绘应用到专题图层的渲染中，有效地解决了专题符号的自动更新重绘问题。

数据的双向绑定和响应式自动视图更新的原理其实是数据劫持与观察者设计模式的有机结合：Observer(数据监听器)通过Object.defineProperty()来劫持被观察者各个属性的setter、getter，在数据变动时通过Dep(消息订阅器)发布消息给Watcher(订阅者)，触发相应的监听回调。本系统中的订阅者是OpenLayers专题图层组件，被观察者是图层对应的制图规则参数。为每个专题图层绑定一个制图参数控制面板，通过自定义的Observer类和Dep类对各图层的制图参数进行数据劫持。用户进行在线专题符号配置时，本质上是对图层的制图参数进行修改，Observer将通知Dep向专题图层订阅者发布消息，从而进行图层的重绘。

利用上述关键技术，本文设计了符合水利行业专题制图需求的符号库，实现了水利专题要素的动态符号配置功能，主要包括符号类型、符号样式、注记样式、注记放置位置4部分。

1) 符号类型定制。点要素包括普通符号、聚类符号、分级符号3种；线要素符号类型包括实线、虚线、点线3类; 面要素符号类型包括普通填充、纹理填充、分级设色3种。

2) 符号样式定制。符号样式定制主要包括符号尺寸、符号颜色和符号透明度3部分。符号尺寸定制主要是调整点要符号的大小和线符号的线宽，系统具有自动尺寸调整和手动尺寸调整两种模式。符号颜色定制主要实现专题符号的颜色配置，系统设计了30多种web标准颜色，以及10种分级色系方案。而符号透明度定制则主要实现要素符号的透明度调整。

3) 注记样式定制。实现水利专题要素注记的字体、字号、颜色、边线等参数的在线定制。其中注记字号与符号尺寸类似，包括自动字号调整和手动字号调整两种模式。

4) 注记放置位置定制。针对线和面要素，通过OpenLayers提供的接口实现注记放置位置的定制，主要包括注记的对齐方式、水平方向偏移、垂直方向偏移3个参数。由于点要素分布较为密集，注记之间的压盖现象明显，使用原生接口不能解决这一问题。因此，本文基于底层Canvas绘图上下文设计并实现了点要素注记绘制类，将点要素注记绘制在单独的注记Canvas容器中。通过Canvas容器分层实现点要素注记的灵活控制，允许用户手动拖拽、精细调整点注记的放置位置，以解决注记压盖的问题。

2.3 面向客户端的高清专题地图输出

本文基于底层Canvas和OpenLayers地图引擎对面向客户端的高清专题地图输出技术进行了研究，内容主要包括底图图层和专题叠加图层两部分。其中，地理底图图层多以WMTS等格式的栅格瓦片进行使用，服务的每张地图瓦片图像在成图时精度已经固定。因此要想实现高精度的在线地图输出，需要在相同的输出幅面下，使单个逻辑像素的尺寸更小，以承载更多的像素信息(即像素个数更多)。针对分辨率固定为256像素×256像素的栅格瓦片，要获得更多的像素信息只能依赖于瓦片个数的增加。本文利用瓦片金字塔的特性，扩大Canvas容器的尺寸并重新请求更高缩放级别的底图瓦片，获取更多的瓦片数目，并在地图输出时通过缩小图像的逻辑像素尺寸以容纳全部的瓦片信息，在保证地图输出幅面不变的同时提升图像的清晰度。而专题叠加图层多为WFS等形式的矢量图层，由于矢量图层数据是实时绘制在Canvas容器中的。因此不需要对其进行分辨率和缩放级别的换算；但是由于地理底图可能导致地图缩放级别的改变，因此往往需要对矢量图层的符号尺寸进行动态调整，以适配地图的整体效果。实现流程如图 2所示。

利用上述方法，本文实现了面向客户端的高清专题地图输出功能。用户可以通过系统提供的地图整饰编辑工具自由拖动指北针、比例尺、图例等地图整饰要素，对地图的输出效果进行个性化调整；同时允许用户进行地图幅面的定制，选择不同的输出方向、输出精度和地图输出格式。输出完成的专题地图将以网页的形式弹出，供用户下载保存。

3 应用实例

本文以浙江省水利专题数据为例开发了在线动态水利专题地图系统，系统的在线定制界面如图 3所示。客户端基于Vue.js框架搭建，通过组件化封装的OpenLayers地图引擎实现了地理底图的展现和水利专题要素的在线动态可视化；后台则基于Node.js的Express框架搭建，通过该框架实现系统的后台功能，对用户的制图数据进行管理。系统提供了可扩展的制图模板和可定制的水利专题地图符号库，具有轻量级、纯开源、开放性和个性化程度高的特点。

4 结束语

本文利用Vue.js框架和OpenLayers地图引擎，设计实现了开源的在线动态水利专题地图系统，利用组件化的设计理念提升制图功能的开放性，通过可扩展复用的专题制图模板组件为用户提供了更清晰的制图流程，通过可定制的专题地图符号库增强了制图功能的个性化程度和制图效果，创新地将数据双向绑定和响应式视图更新机制引入了专题地图的渲染，并基于底层Canvas实现了在线的高清专题地图输出，对水利行业专题制图的自动化、流程化和定制化起到了一定的推动作用。后续工作中将加强对面向纸质地图输出时的颜色模型转换等问题的研究，并把水利行业的专业模型引入系统以提升系统的数据分析能力，同时利用矢量瓦片技术增强地理底图的定制能力，进一步完善系统功能。