基于Leaflet+Spring Boot的降雨等值线图自动绘制方法

王庆平，王轶凡，阙家骏

(宁波弘泰水利信息科技有限公司，浙江 宁波 315033)

等值线图是地图上表达地貌的重要符号，在水利工程中有着重要的使用价值，它不仅能够对原型观测数据(如降雨、墒情、温度、湿度等)进行可视化研究，而且能够直观且迅速地对高精度数据进行分析[1- 2]。

目前已有很多地理信息软件如MapInfo、ArcGIS、Surfer等均可以较好进行等值线图的绘制[3- 4]。党磊等[5]介绍了利用ArcGIS软件绘制降雨等值线图的过程，毛兴华等[6- 8]结合MapInfor和Sufer提出了一种绘制等值线的新方法。但是许多软件需要有一定的操作基础，且配置过程较为繁琐，展示结果不美观。同时，地理信息软件均是基于C/S(Client/Server)结构，存在着兼容性较差、开发与维护成本较高等不可避免的缺陷。随着Web技术的日益成熟，B/S(Browser/Server)结构软件已经逐步取代C/S结构，它分布性强，业务扩展及维护简单，用户只需通过网络和浏览器便可进行业务查询及操作，转变了单机版软件的劣势。本文基于前端地图框架LeafLet结合后端框架Spring Boot实现了降雨等值线图的自动绘制[9- 12]，整个流程算法高效简洁，使用操作简便，等值线图可视化展示美观，为不同领域中等值线图的应用提供了技术思路。

1 等值线生成原理

1.1 插值方法

在对降雨的时空分布规律进行研究时，根据已知离散点的数据对区域内未知点的数值进行预测，是等值线精确与否的关键。因此，需要对计算区域进行网格化处理，然后根据已知的离散雨量站点数据进行空间插值，进而绘出等值线。目前常用的插值方法有反距离加权插值法、最小曲率法、克里金插值法、三角网格法等[13- 15]。本文基于宁波市某水库流域雨量站观测数据为例，使用克里金插值法对网格点雨量进行插值计算。

克里金插值法是一种依据变异函数对随机过程进行空间建模和预测(插值)的回归算法。它基于地统计学理论，引入变异函数模型来统具有空间相关性的地理现象。运用克里金插值法，不仅可以对位置区域进行预测，而且可以对预测结果的不确定性进行分析。克里金插值公式为：

(1)

(2)

对于已知的观测数据，首先两两计算距离与半方差，然后根据变异函数指数模型计算出所有已知测点之间的半方差。对于未知点z0，计算它与所有已知点zi的半方差rio，继续求解出最优系数λi，最后使用最优系数对已知点的属性值进行加权求和，从而得到未知点z0的估计值。

1.2 等值线追踪

首先构建网格并为每个网格分配索引，每个网格的格点值便是插值得出的雨量值，根据每个网格索引去索引边表，获取其所在边位置(并赋予边编号)，并记录点坐标和边编号。通过每个网格索引去索引线表，索引出点的连接顺序(连接顺序形式为边编号)，用边编号从记录的信息中索引出点的坐标位置。最后根据所有点的坐标绘制连线。

1.3 等值线平滑

追踪等值线后由于会出现许多尖锐的凸点，未满足降雨等值线的平滑要求，需要对等值线进行进一步的平滑处理。本文采用三次样条插值(B-Spline插值)对等值线进行平滑，通过插值后的等值线，每两个点之间均是用一条三次方程曲线连接。

2 系统框架介绍

2.1 架构设计

本次降雨等值线图的自动绘制方法使用B/S架构，采用前后端分离的模式，通过后端提供相应的数据接口，在前端页面进行组织数据并展示，可以实现跨平台、跨操作系统、多终端的要求。降雨数据全部存储在MySQL数据库中，前端采用基于Leaflet的JavaScript框架，后端采用基于Spring Boot的Java框架，前后端采用Json数据进行通信，如图1所示。

Leaflet是一个开源轻量级的JavaScript地图库，可以实现在线地图开发及其展示。它坚持设计简便、高性能和可用性好的思想，通过HTML5和CSS3对地图要素在浏览器内进行可视化展示。Spring Boot是由Pivotal团队提供的一个Java后端框架，可以用来简化Spring应用的初始搭建及开发过程。框架支持多数据库源，配备了完整的注解配置方式，可以直接嵌入Tomcat服务器。本文将两者相结合，提供了一种自动绘制降雨量等值线图的新思路。

2.2 算法实现

在降雨量等值线图的绘制过程中，算法部分全部由Java编写，地图与图形表达由JavaScript实现，前后端通过Json数据进行联通。

首先根据研究流域边界框选出包含其流域的一个矩形边界，对该矩形进行网格划分，将矩形边界划分成131535个网格，实验证明该网格精度可以满足等值线图的要求。利用已知的雨量站点数据，通过克里金插值对区域内所有网格进行雨量插值计算。系统为等值线设置了4套配色方案，依据其站点雨量最大值而定，分别为50、100、200mm和大于200mm，对于不同尺度的降雨量采用不用的配色方案绘制等值线。同时在每一套配色方案中设置6种颜色，每种颜色的上下限由雨量最大值内插计算得出，依据此方法计算出每张等值线图的图例。根据指定的图例，通过等值线追踪法生成降雨量等值线，再对等值线进行平滑处理，组装成GeoJson格式的数据返回前端。

前端接受后端返回的GeoJson数据，在leaflet上进行加载，地图背景采用天地图。加载等值线时，采用leaflet内置算法，将等值线依据流域边界裁剪，最终得出结果。

实验证明该算法计算高效，成图迅速。本次研究区域为宁波市某水库流域，流域面积为254km2，系统共划分为131535个网格，后端算法计算数据平均在650ms以内，前端地图渲染平均在100ms以内，整个降雨等值线绘制过程可控制在1s之内。

3 案例展示

本次研究采用宁波市某水库流域2020年8月2日8：00至2020年8月4日8：00的8个雨量站实测雨量数据，对该时段内的降雨等值线图进行绘制。流域内雨量站信息及时段雨量值见表1。

图2 不同时段降雨的等值线图

表1 研究流域内各雨量站分布信息及雨量值 单位：mm

对研究流域自2020年8月2日8：00起，分别计算12、24、36、48h内的降雨量等值线图(如图2所示)。从图中可清晰的看出随着时间的变化，流域内面降雨量的分布情况以及暴雨中心的变化。本方法基于流域实时雨量数据，用户可以调取数据库内任意时段内的降雨量进行绘制。同时，用户可以在页面内通过鼠标拖动地图，或者利用鼠标滚轮对地图进行放大或缩小。结果证明，通过该方法绘制的降雨等值线图具有计算高效、可视化展示美观的优点。

4 结语

(1)本次研究探讨了一种新的降雨等值线图自动绘制方法，通过Web技术将传统的降雨等值线图利用Leaflet+Spring Boot的方法进行全新展示。该方法结合了Spring Boot框架与Leaflet的优点，并且可以接入实时雨量数据，用户只需通过网络和浏览器便可对降雨等值线图绘制进行“一键操作”。

(2)研究证明该方法计算稳定高效，成图美观，多个用户可以在线同时进行计算。该方法减少了等值线绘制的难度和时间，提高了等值线的实用性，为不同领域中等值线图的应用提供了技术思路。