基于WebGIS气象数据前端展示的实现

张玲 张敏 刘梅 何双伶 杨丽霞

摘要：以四川省遂宁地区地面气象观测站点离散雨量数据为例，探讨基于WebGIS的气象要素数据在客户端的前端动态展示，通过读取四川省气象局发布的天擎接口，解析为站点气象要素数据的Json格式，运用克里金插值、等值线追踪、WebGIS等技术，采用Html5+JavaScript+CSS3编程实现气象要素数据在PC和安卓客户端的前端动态插值、等值线实时绘制。为天气预报、气象服务等提供直观的气象要素呈现方式，使气象预报服务人员能快速有效地监视气象要素时空变化及天气过程演变趋势，外部门决策用户也可以通过该应用随时掌握雨情和汛情，为各级政府部门防灾减灾科学决策提供参考依据。

关键词：WebGIS；气象数据；数据库；接口；等值线；克里金

中图分类号：TP393文献标志码：A文章编号：1008-1739（2023）03-54-4

0引言

目前，遂宁地区共建有自动气象站点179个，后续补短板预警工程项目将陆续新建更多的站点，各气象站点分布在全市各个乡镇，产生的小时数据及分钟数据等数据量庞大，将如此庞大的数据进行集成显示，同时通过网络传输与共享，成为本文研究和解决的问题。近年来，各种灾害性天气频发多发，特别是2021年7月20日郑州遭遇历史罕见特大暴雨，各级各部门对雨量等数据需引起高度警觉，为应对重大雨情、汛情，针对全市站点离散雨量数据开发一套气象要素动态展示程序，通过克里金插值方法研究空间散乱点的插值，调用天地图在线服务实时绘制四川省遂宁地区气象要素数据等值线并进行填色，实现遂宁地区气象数据信息的广泛共享，同时可应用于气象灾害预警信息发布、天气过程总结和灾情评估等。

1总体设计

要拥有良好的移植性、扩展性以及共享性，该业务系统采用层次化的设计思路，总体框架包括3部分：数据层、逻辑层及应用层。数据层通过天擎系统读取离散雨量数据，通过插值算法转化为网格点数据；逻辑层根据用户的需求对数据层进行操作，主要是通过对数据的深加工，绘制等值线、色斑图等实现各类数据应用；应用层以网页、手机App等实现可视化界面，用于显示数据和接收用户输入的数据，以及数据的返回，为用户提供一种交互式操作界面[1]。

降雨量等值线绘制运用Html5+JavaScript+CSS3以及WebGIS等技术实现，通过请求服务器接口返回Json格式离散点降水数据，采用克里金前端插值算法插值为格点数据，利用基于leaflet的JavaScript框架加载天地图，将格点值渲染到Web地图上，从而实现基于WebGIS的降雨量等值线以及色斑图前端可视化展示[2]。

2插值算法

等值线是GIS制图中常见的功能，一般有2种思路：一种是先进行插值生成等值面栅格图，然后将等值面提取成等值线；另一种是进行插值后，直接根据算法进行插值点连接生成一条尽量闭合以及平滑的曲线。进行插值时，有很多算法可以选择，如三角测量法、反距离权重法、泰森多边形法、克里金法等，各种算法也会有不同的参数需要调试，并且根据实际情况，比如地理环境因素等进行微调，最后建模[3]。

克里金插值法又称空间局部插值法，是以变异函数理论和结构分析为基础，在有限区域内对区域化变量进行无偏最优估计的一种方法，是地统计学的主要内容之一[4]。克里金法在图像处理、绘制和软件开发方面都有较优越的表现，它的核心思想是有理有据的统计插值，根据一系列相邻点之间的统计关系来模拟相邻点之间空白区域的高程变化。把指定范围内的所有数据点都放一起进行统计，然后根据每个距离范围内点之间的高程半方差和距离，预测出这个范围内最佳的拟合地表[5]。

3地图调用

地图调用使用第三方库leaflet，这是一个为移动设备设计的交互式地图的开源JavaScript库，具有完美的开发文档以及非常好的代码结构，无依赖，库文件体积很小，包含了大多数开发者所需的地图特点，提供地图展示、标注、定位等功能[5]。首先在Web页面head区中引入leaflet css与js文件：

4等值线绘制

等值线是以相等数值点的连线表示连续分布且逐渐变化的数量特征的一种图形，是气象工作者常用的气象要素图形显示方法，能很好地直观展示气象要素的分布情况，而较早使用到的等值线绘图专业软件有Matlab，surfer以及grads等[7-10]，各类绘图软件各有优缺点，但都需要单独安装绘图软件，且以静态图的形式展示给用户。隨着气象用户的需求变化以及互联网技术的高速发展，为缓解后台压力，随时控制显示样式，实时动态地在前端地图上展现各气象要素分布成为新的发展趋势，气象探测数据资料和空间分析技术结合在一起，将会使气象研究和气象服务发挥更大的作用。

等值线的绘制流程主要由客户端向四川天擎平台发送数据请求，服务器端接收到请求后返回Json格式的站点离散数据，客户端接收到数据后利用克里金算法将离散点数据插值为规则的网格点数据，最后加载地图进行等值线和色斑图的绘制。

4.1数据获取与解析

随着气象数据源的不断更新换代，CIMISS气象数据统一服务接口（MUSIC）已被气象大数据云平台天擎所替代，相较CIMISS-MUSIC，天擎MUSIC的服务方式更加完整、服务效率更高。四川省天擎平台涵盖地面和高空数据、卫星和雷达数据、数值预报、农气数据、服务产品等多种类型资料，资料种类已能满足基础气象业务需求，并提供统一的气象算法[11]。

在客户端提交数据请求，服务器响应请求，通过天擎MUSIC读取所需气象要素数据资料，返回数据格式为一种简单的数据交换格式———Json格式。Json格式是一种轻量级的数据交换格式，易于阅读和理解，也易于机器解析和生成。Json采用独立于语言的文本格式，使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等），这些特性使得Json成为理想的数据交换语言，从而可以在异步应用程序中将字符串从Web客户端传递给服务器端程序[12]。图1为遂宁2020年8月23日20时—24日20时雨量数据Json格式查询结果。

客户端获取服务器端返回的json格式数据后，运用JavaScript语言编写代码将这些数据解析成对象形式存储在经度、纬度和插值权重字段值（雨量值）3个对象數组中，通过这3个数组供外部对象使用。部分解析代码如下：

4.2数据插值

基于站点的气象要素在地图上表现的是不规则离散点，在等值线绘制过程中往往由于提供的监测数据样本量较少且分布不规则，如果仅仅以此数据绘制等值线，作出的曲线效果或者gis图片效果达不到要求，此时需要使用插值的方式将离散点数据插值成更为密集的规则的格点值数据，以提升效果。在绘制气象要素的等值线图时，首先要将离散的气象数据插值成间距更为密集及排列规则的网格数据。

通过输入前面解析获得的离散点的经纬度、雨量数据对象数组以及遂宁地图边界坐标数组，通过克里金插值算法提供的空间预测和映射功能，代入公式计算获得给定的行政边界区域内插值数据，从而形成一组排列规则的格点数据集，供等值线追踪和等值面绘制。

4.3等值线追踪

数据插值后，再根据一定的算法利用插值所得的规则格点数据集追踪生成一条尽量闭合以及平滑的曲线。等值线的追踪首先从网格边界或者网格内部上的某一等值点出发，求得下一等值点，然后以此点出发搜索下一等值点（即坐标），如此往复循环，若遇到网格边界或者又回到起点（封闭等值线），则说明已经找到了一条等值上所有点的坐标位置，连接这些点，也就找到了等值线。

在区域内进行网格划分，根据网格坐标的格点数据值，从一个矩形网格开始，首先确定等值线进入网格时的走向，追踪等值线，等值线一定是连续的，所以在相邻矩形边界上的一个数值点，肯定会在下一个矩形中找到后续点，并且一定是成对出现的，也就是说，肯定能发现后续的等值点，也许不止一个，但不会出现找不到的情况。在一个矩形的四边中也有可能出现多于一对的等值点情况，可根据等值线原来的前进方向以及当前等值点的远近来追踪下一点，这里是取相邻点，从而避免与另一条等值线交叉。

对于网格点为等值点的处理，采用对网格点加上一个足够小的数值（不影响绘图精度）给予修正。将所有的点连接起来成为折线，会出现许多凸出的点，不能满足气象数据等值线的平滑要求，利用线性迭代法对等值线进行平滑处理，最后得到一条需要的光滑等值线。

4.4色斑图实现

为使等值线图更加直观和美观，将不同的区域以不同的颜色进行区分，在右上角显示色标图例。降水量图形产品的制作和发布按照GB/T 35968—2018的色标规定要求[13]，以24 h降雨量色斑图为例，降水分级色标如表1所示。

用上面给定的颜色代码块绘制分级色标，不同的量级对应不同量级下的色标规范，对等值线进行分析，按照相同值域范围填充相同颜色的原则在地图上进行颜色填充展示。

4.5等值线值和站点值的标记

在等值线和色斑图绘制完成后，往往需要对等值线的线值在地图上进行标注展示。等值线线值标注就是对一系列等值线图上的全部或部分等值线旁边进行属性值的添加，以便让用户清楚了解等值线属性。本文通过查找一组等值线的起始坐标和终止坐标，将起止坐标的值分别标注在线条上，对于闭合曲线因其起始点和终止点重合，故只需标注一个值，对于过短的等值线且雨量值很小的，为整体美观起见一般不予标注显示，但是对于雨量值大于等于50 mm的等值线，不论其线段长短如何均进行显示并标记。

行政区域内站点要素值的标记通过存入一组Marker数组对象，站点数据通过Marker类在地图上添加数据标记。遂宁地区2020年8月23日20时—24日20时雨量数据等值线如图3所示。