基于Leaflet地图技术的民航气象信息可视化系统的设计与实现

李洋磊 陈瑶

摘  要：目前民航各机场的气象信息主要以报文的方式提供给用户，无法结合地理信息向用户提供更加直观便捷的气象服务，本文基于Leaflet库设计、开发Web前端页面，结合地图信息将全球2800余个机场的实时气象信息以天气图标的形式进行显示，实现了航空气象信息与时空信息在地图上的充分结合。与此同时系统通过快速缓存、分级显示等技术解决了前端页面大量数据频繁更新所带来的资源消耗问题，以较高的效率将信息实时提供给用户。

关键词：气象信息;地图技术;Leaflet;可视化;分级显示

中图分类号：TP311.52       文献标识码：A 文章编号：2096-4706（2019）15-0004-03

Design and Implementation of Civil Aviation Meteorological Information

Visualization System Based on Leaflet

LI Yanglei，CHEN YAO

（Middle South Regional Air Traffic Management Bureau of Civil Aviation of China，Guangzhou  510080，China）

Abstract：At present，the meteorological information of civil aviation airports is mainly provided to users in the form of message，which can not provide more intuitive and convenient meteorological services to users in combination with geographical information. This paper designs and develops Web front-end pages based on Leaflet library，and displays real-time meteorological information of more than 2800 airports in the form of weather icons with map information，it realizes the full integration of aeronautical meteorological information and space-time information on maps. At the same time，the system solves the resource consumption problem caused by frequent updates of large amount of data on front-end pages through fast caching，hierarchical display and other technologies，so as to provide information to users in real time with high efficiency.

Keywords：meteorological information;map technology;Leaflet;visualization;hierarchical display

0  引  言

隨着信息化技术的不断发展，民航气象服务更多地以信息化的形式提供给用户，如：通过网站的形式整合气象报文、自动观测资料、雷达图、卫星云图、航路预告图等各类气象信息向用户提供服务。随着民航业务的高速发展，用户对气象信息服务的要求越来越高，尤其是对高度可视化、高可用性、界面直观友好便捷的要求越来越高。

在当前条件下，民航气象信息尤其是机场报文信息更多的是以文本的形式向用户提供，用户不能直观、便捷的获取所需信息。基于上述需求，本文构建了一个基于地图的民航气象报文信息显示系统，该系统将文本类的气象报文信息转化成为可视化的气象通用图标并结合地理位置信息显示在地图上，便于用户获取信息。该系统使用基于Leaflet地图技术的JavaScript库Leaflet.js作为地图开发的主要工具。

1  Leaflet介绍

Leaflet是一个为建设交互性好适用于移动设备地图的领先开源JavaScript库，是由Vladimir Agafonkin带领一个专业贡献者团队开发的，代码大小仅仅33KB，具有开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。

Leaflet的主要特性有：

（1）更加轻量级，无需部署，程序直接引用。

（2）支持各类桌面及移动端浏览器，桌面浏览器包括：谷歌浏览器、火狐浏览器、IE7-11、Safari5+、Windows Edge，移动浏览器包括：iOS+的Safari、谷歌浏览器移动版、火狐浏览器移动版、移动版Win8 IE10+。

（3）良好的人机交互界面：支持鼠标拖动平移、滚轮变焦、移动设备缩放、双击缩放、键盘导航、各类触发事件等交互功能，以及图层切换器、比例尺、缩放按钮等控件。

（4）响应速度快，使用移动硬件加速、模块化系统构建、智能渲染等功能使图像显示更加快捷。

（5）可扩展性强，开源且支持各类插件，可充分扩展。

2  基于Leaflet的民航气象信息可视化系统的设计与实现

2.1  架构设计

本框架分为服务器端及用户端两个部分，服务器端提供全球地图信息、天气现象图标信息、气象报文信息及机场地理信息，其中全球机场报文信息包括全球2800余个机场实况报文及机场预报，由民航气象数据库系统中获取并形成JSON格式的数据文件，机场地理信息主要包括各机场经纬度坐标、机场名称、机场规模等信息，以JSON格式的数据文件提供给用户，全球地图信息以瓦片图形式提供给用户，天气现象图标将机场实况报文中各类天气现象制作成通用气象图标，用户端使用Leaflet模块从服务器端获取地图信息形成全球地图，同时从服务器端获取机场报文信息及机场地理信息，通过可视化模块将信息转化为天气现象图标显示在全球地图上提供给用户。系统架构如图1所示。

在实际操作中，系统会面临大量用户同时读取全球2800余个机场的各类信息的问题，随着各个用户对地图的拖动、缩放等操作机场信息需不断更新，同时由于各机场报文时效性较高，报文信息隨着时间的推移也需要不断更新，这些需求都需要在服务器端、用户端消耗大量资源，甚至可能会导致程序卡死，为了解决上述问题，系统在服务器端和用户端分别设计了缓存机制来提高系统运行效率。

在服务器端系统读取所有机场报文信息及地理信息并整合后以JSON格式写入缓存，为了保持信息的时效性缓存，同时也记录写入时间。用户端初次访问系统时通过网络向服务器端获取机场信息，服务器端首先根据缓存写入时间判断数据的有效性，如果有效则从缓存中读取数据返回给用户，如果失效则重新读取机场信息返回给用户并更新缓存，用户端收到返回信息后传送给可视化系统进行显示，同时将信息写入用户端缓存同时记录写入时间。当用户端显示信息需更新时，程序首先读取用户端缓存看是否有有效时间内的可用数据，如果没有则再次向服务器端请求数据。

2.2  系统实现

系统使用JavaScript+ASP实现，主页面如图2所示，系统将各机场实况中的天气现象转化为气象图标，并结合机场经纬度信息显示在全球地图上。地图支持拖拽平移，滚轮变焦、双击缩放等功能。地图具有根据四字代码快速查询定位机场的功能，具有显示机场中英文名称选项。地图底图可在地图、地形、简明，三种模式中切换。当鼠标覆盖机场图表示会有弹窗显示机场中英文名称、机场实况报文、机场预报。当单击机场图标时会有弹窗显示机场报文分解出来的要素信息。由于机场较多，全部显示会导致系统页面卡顿，因此系统采用了分级显示技术，当地图缩放级别较低时只显示大型机场信息，缩放级别较大时显示全部机场信息。

2.2.1  缓存机制的实现

（1）服务器端缓存。服务器端将所有机场报文信息及地理信息读入缓存，并记录缓存时间以判断缓存有效性，核心实现代码如下：

Response.Buffer = true;//打开缓存模式

Response.CacheControl = 'Public';//设置为共有缓存

Application（"CACHE_INFO"） = '['+aA.join（'，'） +']';//将信息写入缓存

Application（"CACHE_TIME"） = ''+timeNow;//将时间写入缓存

nowMs - ms < oD[tt] //判断缓存是否有效

（2）用户端缓存。用户端将从服务器端获取的机场报文及地理位置信息读入缓存，并记录缓存时间以判断缓存有效性，核心实现代码如下：

CACHE[code].time = UpdateTime; //记录时间信息

CACHE[code].data = INFO[i]; //记录机场信息

localStorage['WX_REPORT'] = JSON.stringify （CACHE）; //将信息写入缓存

panTime - CACHE[p].time > msCached//判断缓存是否有效

2.2.2  可视化模块

（1）显示地图信息。调用Leaflet的API函数读取服务器端的瓦片图信息，形成地图，核心实现代码如下：

var street = L.tileLayer（'http：//服务器IP及目录/{id}/{z}/{y}/{z}_{y}_{x}.png'， {

maxZoom： 8， // 设置最大缩放级别

minZoom： 3， // 设置最小缩放级别

attribution： ''，

id： 'gditu'， //  选择地图、地形、简明三种模式之一的瓦片图

noWrap：false//是否屏蔽循环拖动

}）; // 设置图层

mymap = L.map（'mapid'， {layers：[baseLayer]}）.setView（[36.52，101.04]， 5）; // 将图层加入地图在页面显示

（2）显示机场信息。显示当前地图区域内机场信息，根据经纬度坐标判断机场是否在当前地图区域内，分析机场实况报文信息，根据分解出的天气现象将对应的天气图标在地图上进行显示，核心实现代码如下：

if （lat < lat1 || lat > lat2 || lon < lon1 || lon > lon2）//判断机场是否在当前地图区域内

var t=cfg.SA.replace（/[＼/=]/g，'  '）.replace（/ /g， '  '）.match（re_weather）; //解析机场实况报文

var myIcon = L.divIcon（{className： 'my-icon'， html：'<img src="'+sType+'" width="150%" align="left" /><span class="airport_code" style="padding：1px;background-color：white;border： 0px solid red;visibility：hidden;" four="'+code+'"><nobr>'+apname+'</nobr></span>'}）;//绘制天气现象图标

markers[code] = L.marker（latlng，  {icon： myIcon}）.addTo（mymap）.bindPopup（setinfo（cfg），{maxWidth： 800，minWidth：800}）;//將图标添加至地图

（3）地图触发事件。地图系统触发事件包括点击鼠标拖动地图、地图缩放、鼠标覆盖图标、鼠标单击图标等，核心实现代码如下：

mymap.on（'mouseup'，function（e）{showSymbols （）;}）;// 鼠标拖动地图时重新加载地图上的机场图标

mymap.on（'zoomend'， function（）{showSymbols （）;}）;// 地图缩放级别改变时重新加载地图上的机场图标

markers[code].on（'click'，function（e）{ frame.location.href='单击显示页面地址';}）// 鼠标单击机场图标时显示机场报文解析页面

markers[code].on（'mouseover'，function（e）{this.openPopup（）;}）; // 鼠标覆盖机场图标时显示机场信息弹窗

markers[code].on（'mouseout'， function（e）{this.closePopup（）;}）;// 鼠标移出机场图标时关闭机场信息弹窗

2.2.3  其他功能

除上述功能外，由于机场报文信息时效性较高，系统还增加了报文有效性判断功能，页面定时更新功能确保报文信息及时准确。为了使系统界面友好符合用户习惯，系统在用户端记录用户使用地图的底图模式、缩放级别、中心点等信息，在之后的服务中提供符合用户习惯的最佳界面。为了使系统便于查找信息，系统还增加了根据机场四字代码快速查找定位功能。

2.2.4  系统测试

在完成系统的开发和基本测试后，在民航中南地区航空气象综合信息服务系统中使用了该系统，并将该系统提供给了机场、航空公司等20余家用户进行了使用测试。测试结果表明该系统在用户使用友好性、可用性、便捷性等方面有较好的效果。

3  结  论

该系统已应用于向民航气象用户提供便捷的气象报文信息，这种基于地图的气象信息显示系统为用户提供了更加直观的气象信息，缩短了用户获取信息的时间，取得了用户的好评。未来民航气象其他信息如气象雷达、卫星云图、航班信息等数据也可以与该系统进行融合显示，可以极大地提高用户获取信息的效率，为用户决策提供更有效的参考。

参考文献：

[1] Leaflet.An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps [EB/OL].https：//leafletjs.com，2019-05-20.

[2] 顾振雄.基于Leaflet和Web服务的移动端矢量瓦片显示系统 [J].地理空间信息，2019，17（3）：24-26+9.

[3] 赵虎川，曲超.基于开源Leaflet的WebGIS客户端设计与实现 [J].科技创新与应用，2017（16）：56-57.

[4] 范志龙，李善驰，刘贤宝，等.基于Leaflet的变形监测数据发布系统 [J].测绘与空间地理信息，2017，40（10）：149-150+153.

作者简介：李洋磊（1983.01-），男，汉族，河南洛阳人，工程

师，硕士，研究方向：民航气象信息系统设备维护;陈瑶（1987.04

-），女，汉族，湖南湘潭人，工程师，硕士，研究方向：民航气象信息系统设备维护。