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

技术论坛

计算机与网络基于WebGIS气象数据前端展示的实现张玲，张敏，刘梅，何双伶，杨丽霞（遂宁市气象局，四川遂宁629099）摘要：以四川省遂宁地区地面气象观测站点离散雨量数据为例，探讨基于WebGIS的气象要素数据在客户端的前端动态展示，通过读取四川省气象局发布的天擎接口，解析为站点气象要素数据的Json格式，运用克里金插值、等值线追踪、WebGIS等技术，采用Html5+JavaScript+CSS3编程实现气象要素数据在PC和安卓客户端的前端动态插值、等值线实时绘制。为天气预报、气象服务等提供直观的气象要素呈现方式，使气象预报服务人员能快速有效地监视气象要素时空变化及天气过程演变趋势，外部门决策用户也可以通过该应用随时掌握雨情和汛情，为各级政府部门防灾减灾科学决策提供参考依据。关键词：WebGIS；气象数据；数据库；接口；等值线；克里金中图分类号：TP393文献标志码：A文章编号：1008-1739（2023）03-54-4ZHANGLing,ZHANGMin,LIUMei,HEShuangling,YANGLixia(SuiningMeteorologicalBureau,Suining629099,China)TakingthediscreterainfalldataofthemeteorologicalobservationgroundstationsinSuining,SichuanProvinceasanexample,thedynamicdisplayofmeteorologingtheTianqinginterfacereleasedbySichuanMeteorologicalBureau,itisanalyzedasthestationmeteorologicalelementdatainJsonformat,andKriginginterpolation,isolinetracking,WebGISandHTML5+JavaScript+CSS3programmingareusedtorealizethedynamicinterpolationandreal-timeisolinedrawitivepresentationofmeteorologicalelementsisprovidedforweatherforecastandmeteorologicalservices,sothatthemeteorologicalforecastpersonnelcanquicklyandeffectivelymonitorthetemporalandspatialchangesernaldecision-makinguserscanalsomastertherainandfloodconditionsatanytimethroughthisapplicationwhichcanprovidereferencebasisforthescientificdecision-makingofd;meteorologicaldata;database;interface;isoline;Kriging0引言目前，遂宁地区共建有自动气象站点179个，后续补短板预警工程项目将陆续新建更多的站点，各气象站点分布在全市各个乡镇，产生的小时数据及分钟数据等数据量庞大，将如此庞大的数据进行集成显示，同时通过网络传输与共享，成为本文研究和解决的问题。近年来，各种灾害性天气频发多发，特别是2021年7月20日郑州遭遇历史罕见特大暴雨，各级各部门对雨量等数据需引起高度警觉，为应对重大雨情、汛收稿日期：2022-11-10基金项目：自动气象站资料移动终端查询系统（遂气课题2021-应用-01）情，针对全市站点离散雨量数据开发一套气象要素动态展示程序，通过克里金插值方法研究空间散乱点的插值，调用天地图在线服务实时绘制四川省遂宁地区气象要素数据等值线并进行填色，实现遂宁地区气象数据信息的广泛共享，同时可应用于气象灾害预警信息发布、天气过程总结和灾情评估等。1总体设计要拥有良好的移植性、扩展性以及共享性，该业务系统采用层次化的设计思路，总体框架包括3部分：数据层、逻辑层及应用层。数据层通过天擎系统读取离散雨量数据，通过插值54Copyright©博看网. All Rights Reserved.

计算机与网络技术论坛地图服务采用天地图，天地图服务对所有用户开放，使用地图服务之前，需要申请一个密钥（Key），在使用地图图层时需首先加载地图服务，如矢量底图需添加代码：/vec_c/wmts?tk=您的密钥。系统加载矢量标注Layer和影像图层Layer1，并设置中心坐标、最大聚焦、缩放级别等[6]。varmap=('map',{crs:4326,layers:[Layer,Layer1]}).setView([30.18,105.5],8);

算法转化为网格点数据；逻辑层根据用户的需求对数据层进行操作，主要是通过对数据的深加工，绘制等值线、色斑图等实现各类数据应用；应用层以网页、手机App等实现可视化界面，用于显示数据和接收用户输入的数据，以及数据的返回，为用户提供一种交互式操作界面[1]。降雨量等值线绘制运用Html5+JavaScript+CSS3以及WebGIS等技术实现，通过请求服务器接口返回Json格式离散点降水数据，采用克里金前端插值算法插值为格点数据，利用基于leaflet的JavaScript框架加载天地图，将格点值渲染到Web地图上，从而实现基于WebGIS的降雨量等值线以及色斑图前端可视化展示[2]。2插值算法等值线是GIS制图中常见的功能，一般有2种思路：一种是先进行插值生成等值面栅格图，然后将等值面提取成等值线；另一种是进行插值后，直接根据算法进行插值点连接生成一条尽量闭合以及平滑的曲线。进行插值时，有很多算法可以选择，如三角测量法、反距离权重法、泰森多边形法、克里金法等，各种算法也会有不同的参数需要调试，并且根据实际情况，比如地理环境因素等进行微调，最后建模[3]。克里金插值法又称空间局部插值法，是以变异函数理论和结构分析为基础，在有限区域内对区域化变量进行无偏最优估计的一种方法，是地统计学的主要内容之一[4]。克里金法在图像处理、绘制和软件开发方面都有较优越的表现，它的核心思想是有理有据的统计插值，根据一系列相邻点之间的统计关系来模拟相邻点之间空白区域的高程变化。把指定范围内的所有数据点都放一起进行统计，然后根据每个距离范围内点之间的高程半方差和距离，预测出这个范围内最佳的拟合地表[5]。普通克里金插值公式为：，其中是点(0,0)处在head区引入遂宁行政边界地图js文件，地图边界文件为一组沿遂宁市边界获取的经纬度坐标值，并将之赋给变量world，通过读取经纬度坐标值并画线连接为一个闭合的曲线，在地图上展示遂宁边界。varpositions=[];world[0].forEach(function(point){([point[1],point[0]]);});varscope=ne(positions,{color:'black',wegth:8}).addTo(map)4等值线绘制等值线是以相等数值点的连线表示连续分布且逐渐变化的数量特征的一种图形，是气象工作者常用的气象要素图形显示方法，能很好地直观展示气象要素的分布情况，而较早使用到的等值线绘图专业软件有Matlab，surfer以及grads等[7-10]，各类绘图软件各有优缺点，但都需要单独安装绘图软件，且以静态图的形式展示给用户。随着气象用户的需求变化以及互联网技术的高速发展，为缓解后台压力，随时控制显示样式，实时动态地在前端地图上展现各气象要素分布成为新的发展趋势，气象探测数据资料和空间分析技术结合在一起，将会使气象研究和气象服务发挥更大的作用。等值线的绘制流程主要由客户端向四川天擎平台发送数据请求，服务器端接收到请求后返回Json格式的站点离散数据，客户端接收到数据后利用克里金算法将离散点数据插值为规则的估计值，即0=(0,0)，为离散值，为用来估算未知点的已知点的数目，是权重系数。用空间上所有已知点的数据加权求和来估计未知点的值。3地图调用地图调用使用第三方库leaflet，这是一个为移动设备设计的交互式地图的开源JavaScript库，具有完美的开发文档以及非常好的代码结构，无依赖，库文件体积很小，包含了大多数开发者所需的地图特点，提供地图展示、标注、定位等功能[5]。首先在Web页面head区中引入leafletcss与js文件：的网格点数据，最后加载地图进行等值线和色斑图的绘制。4.1数据获取与解析随着气象数据源的不断更新换代，CIMISS气象数据统一服务接口（MUSIC）已被气象大数据云平台天擎所替代，相较CIMISS-MUSIC，天擎MUSIC的服务方式更加完整、服务效率55Copyright©博看网. All Rights Reserved.

技术论坛

更高。四川省天擎平台涵盖地面和高空数据、卫星和雷达数据、数值预报、农气数据、服务产品等多种类型资料，资料种类已能满足基础气象业务需求，并提供统一的气象算法[11]。在客户端提交数据请求，服务器响应请求，通过天擎MUSIC读取所需气象要素数据资料，返回数据格式为一种简单的数据交换格式———Json格式。Json格式是一种轻量级的数据交换格式，易于阅读和理解,也易于机器解析和生成。Json采用独立于语言的文本格式，使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等），这些特性使得Json成为理想的数据交换语言，从而可以在异步应用程序中将字符串从Web客户端传递给服务器端程序[12]计算机与网络通过输入前面解析获得的离散点的经纬度、雨量数据对象数组以及遂宁地图边界坐标数组，通过克里金插值算法提供的空间预测和映射功能，代入公式计算获得给定的行政边界区域内插值数据，从而形成一组排列规则的格点数据集，供等值线追踪和等值面绘制。4.3等值线追踪数据插值后，再根据一定的算法利用插值所得的规则格点数据集追踪生成一条尽量闭合以及平滑的曲线。等值线的追踪首先从网格边界或者网格内部上的某一等值点出发，求得下一等值点，然后以此点出发搜索下一等值点（即坐标），如此往复循环，若遇到网格边界或者又回到起点（封闭等值线），则说明已经找到了一条等值上所有点的坐标位置，连接这些点，也就找到了等值线。在区域内进行网格划分，根据网格坐标的格点数据值，从一个矩形网格开始，首先确定等值线进入网格时的走向，追踪等值线，等值线一定是连续的，所以在相邻矩形边界上的一个数值点，肯定会在下一个矩形中找到后续点，并且一定是成对出现的，也就是说，肯定能发现后续的等值点，也许不止一个，但不会出现找不到的情况。在一个矩形的四边中也有可能出现多于一对的等值点情况，可根据等值线原来的前进方向以及。图1为遂宁2020年8月23日20时—24日20时雨量数据Json格式查询结果。图1雨量数据json格式客户端获取服务器端返回的json格式数据后，运用JavaScript语言编写代码将这些数据解析成对象形式存储在经度、纬度和插值权重字段值（雨量值）3个对象数组中，通过这3个数组供外部对象使用。部分解析代码如下：varpoints=readdata('all','2020082321','2020082420')varn=;varr=[];//雨量值varx=[];//经度vary=[];//纬度for(vari=0;i

计算机与网络技术论坛用克里金插值算法和等值线追踪等技术将离散的气象观测数据在前端进行插值、分析和处理，并利用Html5+JavaScript+CSS3以及WebGIS等技术绘制出等值线和色斑图。经过实际应用，该功能可实现气温、降水、湿度、风场、精细化预报等气象数据前端实时绘制，在近2年的气象服务中得到了很好的实践应用。系统界面简洁，右上工具栏设置有填色、填值、线条、线值、边界和裁剪等选项，能够满足用户基于WebGIS的数据分析展示应用需求，灵活性和直观性强，特别是在汛期，雨量等值线图能直观地展示降雨量的时空分布和降

雨量色斑图为例，降水分级色标如表1所示。表124h降水分级色标对应表用上面给定的颜色代码块绘制分级色标，不同的量级对应不同量级下的色标规范，对等值线进行分析，按照相同值域范围填充相同颜色的原则在地图上进行颜色填充展示。水过程的发展趋势，对气象灾害监测分析、预警服务等起到很好的支撑作用。4.5等值线值和站点值的标记在等值线和色斑图绘制完成后，往往需要对等值线的线值在地图上进行标注展示。等值线线值标注就是对一系列等值线图上的全部或部分等值线旁边进行属性值的添加，以便让用户清楚了解等值线属性。本文通过查找一组等值线的起始坐标和终止坐标，将起止坐标的值分别标注在线条上，对于闭合曲线因其起始点和终止点重合，故只需标注一个值，对于过短的等值线且雨量值很小的，为整体美观起见一般不予标注显示，但是对于雨量值大于等于50mm的等值线，不论其线段长短如何均进行显示并标记。行政区域内站点要素值的标记通过存入一组Marker数组对象，站点数据通过Marker类在地图上添加数据标记。遂宁地区2020年8月23日20时—24日20时雨量数据等值线如图3所示。参考文献[1]王庆平,王轶凡,阙家骏.基于Leaflet+SpringBoot的降雨等值线图自动绘制方法[J].水利技术监督,2021(4):69-71.[2]刘旭林,赵文芳.气象观测数据等值线自动绘制系统[J].气象,2009,35(4):102-107.[3]张伟强,招伟文,伍淑瑜.佛山市气象要素等值线动态显示系统[J].中低纬度山地气象,2018,42(2):85-88.[4]王靖波,潘懋,张绪定.基于Kriging方法的空间散乱点插值[J].计算机辅助设计与图形学学报,1999(6):525-529.[5]谷良平.Kriging插值法在测绘工作中的应用分析[J].山西农经,2016(9):131-132.[6]张玲,刘浩然,张敏,等.基于GoogleMap的自动气象站实时资料发布系统[J].高原山地气象研究,2015(S1):266-268.[7]况雪源.GrADS绘图系统在站点等值线中的应用[J].广西气象,2001(2):53-56.[8]刘敏.利用ASP+IIS在Internet上动态生成雨量等值线的应用[J].水文,2009,29(5):36-38.[9]张慧,史奎桥,杨扬,等.应用Matlab自动绘制气象等值线图[J].广东气象,2016,38(4):74-77.[10]张晓东,翟世奎,许淑梅.基于GIS组件和Surfer软件的海洋调查数据等值线绘制方法[J].海洋技术,2005(2):25-27.[11]杨雪,宋智.基于CIMISS环境的气象要素图像产品生成系图3雨量数据等值线统[C]//第33届中国气象学会年会S20气象信息化———业务实践与技术应用.西安:[出版者不详],2016:233-235.[12]付会明.JSON在气象信息系统建设中的应用实践[J].江西通信科技,2018(2):19-23.[13]标准降水量图形产品规范:GB/T35968-2018[S].2018.5结束语通过四川省气象大数据云平台天擎获取气象要素数据，运57Copyright©博看网. All Rights Reserved.