基于Leaflet地圖技術(shù)的民航氣象信息可視化系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

李洋磊 陳瑤

摘? 要：目前民航各機(jī)場(chǎng)的氣象信息主要以報(bào)文的方式提供給用戶，無(wú)法結(jié)合地理信息向用戶提供更加直觀便捷的氣象服務(wù)，本文基于Leaflet庫(kù)設(shè)計(jì)、開(kāi)發(fā)Web前端頁(yè)面，結(jié)合地圖信息將全球2800余個(gè)機(jī)場(chǎng)的實(shí)時(shí)氣象信息以天氣圖標(biāo)的形式進(jìn)行顯示，實(shí)現(xiàn)了航空氣象信息與時(shí)空信息在地圖上的充分結(jié)合。與此同時(shí)系統(tǒng)通過(guò)快速緩存、分級(jí)顯示等技術(shù)解決了前端頁(yè)面大量數(shù)據(jù)頻繁更新所帶來(lái)的資源消耗問(wèn)題，以較高的效率將信息實(shí)時(shí)提供給用戶。

關(guān)鍵詞：氣象信息;地圖技術(shù);Leaflet;可視化;分級(jí)顯示

中圖分類(lèi)號(hào)：TP311.52? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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? 引? 言

隨著信息化技術(shù)的不斷發(fā)展，民航氣象服務(wù)更多地以信息化的形式提供給用戶，如：通過(guò)網(wǎng)站的形式整合氣象報(bào)文、自動(dòng)觀測(cè)資料、雷達(dá)圖、衛(wèi)星云圖、航路預(yù)告圖等各類(lèi)氣象信息向用戶提供服務(wù)。隨著民航業(yè)務(wù)的高速發(fā)展，用戶對(duì)氣象信息服務(wù)的要求越來(lái)越高，尤其是對(duì)高度可視化、高可用性、界面直觀友好便捷的要求越來(lái)越高。

在當(dāng)前條件下，民航氣象信息尤其是機(jī)場(chǎng)報(bào)文信息更多的是以文本的形式向用戶提供，用戶不能直觀、便捷的獲取所需信息。基于上述需求，本文構(gòu)建了一個(gè)基于地圖的民航氣象報(bào)文信息顯示系統(tǒng)，該系統(tǒng)將文本類(lèi)的氣象報(bào)文信息轉(zhuǎn)化成為可視化的氣象通用圖標(biāo)并結(jié)合地理位置信息顯示在地圖上，便于用戶獲取信息。該系統(tǒng)使用基于Leaflet地圖技術(shù)的JavaScript庫(kù)Leaflet.js作為地圖開(kāi)發(fā)的主要工具。

1? Leaflet介紹

Leaflet是一個(gè)為建設(shè)交互性好適用于移動(dòng)設(shè)備地圖的領(lǐng)先開(kāi)源JavaScript庫(kù)，是由Vladimir Agafonkin帶領(lǐng)一個(gè)專業(yè)貢獻(xiàn)者團(tuán)隊(duì)開(kāi)發(fā)的，代碼大小僅僅33KB，具有開(kāi)發(fā)在線地圖的大部分功能。Leaflet設(shè)計(jì)堅(jiān)持簡(jiǎn)便、高性能和可用性好的思想，在所有主要桌面和移動(dòng)平臺(tái)能高效運(yùn)作，在現(xiàn)代瀏覽器上會(huì)利用HTML5和CSS3的優(yōu)勢(shì)，同時(shí)也支持舊的瀏覽器訪問(wèn)。支持插件擴(kuò)展，有一個(gè)友好、易于使用的API文檔和一個(gè)簡(jiǎn)單的、可讀的源代碼。

Leaflet的主要特性有：

（1）更加輕量級(jí)，無(wú)需部署，程序直接引用。

（2）支持各類(lèi)桌面及移動(dòng)端瀏覽器，桌面瀏覽器包括：谷歌瀏覽器、火狐瀏覽器、IE7-11、Safari5+、Windows Edge，移動(dòng)瀏覽器包括：iOS+的Safari、谷歌瀏覽器移動(dòng)版、火狐瀏覽器移動(dòng)版、移動(dòng)版Win8 IE10+。

（3）良好的人機(jī)交互界面：支持鼠標(biāo)拖動(dòng)平移、滾輪變焦、移動(dòng)設(shè)備縮放、雙擊縮放、鍵盤(pán)導(dǎo)航、各類(lèi)觸發(fā)事件等交互功能，以及圖層切換器、比例尺、縮放按鈕等控件。

（4）響應(yīng)速度快，使用移動(dòng)硬件加速、模塊化系統(tǒng)構(gòu)建、智能渲染等功能使圖像顯示更加快捷。

（5）可擴(kuò)展性強(qiáng)，開(kāi)源且支持各類(lèi)插件，可充分?jǐn)U展。

2? 基于Leaflet的民航氣象信息可視化系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

2.1? 架構(gòu)設(shè)計(jì)

本框架分為服務(wù)器端及用戶端兩個(gè)部分，服務(wù)器端提供全球地圖信息、天氣現(xiàn)象圖標(biāo)信息、氣象報(bào)文信息及機(jī)場(chǎng)地理信息，其中全球機(jī)場(chǎng)報(bào)文信息包括全球2800余個(gè)機(jī)場(chǎng)實(shí)況報(bào)文及機(jī)場(chǎng)預(yù)報(bào)，由民航氣象數(shù)據(jù)庫(kù)系統(tǒng)中獲取并形成JSON格式的數(shù)據(jù)文件，機(jī)場(chǎng)地理信息主要包括各機(jī)場(chǎng)經(jīng)緯度坐標(biāo)、機(jī)場(chǎng)名稱、機(jī)場(chǎng)規(guī)模等信息，以JSON格式的數(shù)據(jù)文件提供給用戶，全球地圖信息以瓦片圖形式提供給用戶，天氣現(xiàn)象圖標(biāo)將機(jī)場(chǎng)實(shí)況報(bào)文中各類(lèi)天氣現(xiàn)象制作成通用氣象圖標(biāo)，用戶端使用Leaflet模塊從服務(wù)器端獲取地圖信息形成全球地圖，同時(shí)從服務(wù)器端獲取機(jī)場(chǎng)報(bào)文信息及機(jī)場(chǎng)地理信息，通過(guò)可視化模塊將信息轉(zhuǎn)化為天氣現(xiàn)象圖標(biāo)顯示在全球地圖上提供給用戶。系統(tǒng)架構(gòu)如圖1所示。

在實(shí)際操作中，系統(tǒng)會(huì)面臨大量用戶同時(shí)讀取全球2800余個(gè)機(jī)場(chǎng)的各類(lèi)信息的問(wèn)題，隨著各個(gè)用戶對(duì)地圖的拖動(dòng)、縮放等操作機(jī)場(chǎng)信息需不斷更新，同時(shí)由于各機(jī)場(chǎng)報(bào)文時(shí)效性較高，報(bào)文信息隨著時(shí)間的推移也需要不斷更新，這些需求都需要在服務(wù)器端、用戶端消耗大量資源，甚至可能會(huì)導(dǎo)致程序卡死，為了解決上述問(wèn)題，系統(tǒng)在服務(wù)器端和用戶端分別設(shè)計(jì)了緩存機(jī)制來(lái)提高系統(tǒng)運(yùn)行效率。

在服務(wù)器端系統(tǒng)讀取所有機(jī)場(chǎng)報(bào)文信息及地理信息并整合后以JSON格式寫(xiě)入緩存，為了保持信息的時(shí)效性緩存，同時(shí)也記錄寫(xiě)入時(shí)間。用戶端初次訪問(wèn)系統(tǒng)時(shí)通過(guò)網(wǎng)絡(luò)向服務(wù)器端獲取機(jī)場(chǎng)信息，服務(wù)器端首先根據(jù)緩存寫(xiě)入時(shí)間判斷數(shù)據(jù)的有效性，如果有效則從緩存中讀取數(shù)據(jù)返回給用戶，如果失效則重新讀取機(jī)場(chǎng)信息返回給用戶并更新緩存，用戶端收到返回信息后傳送給可視化系統(tǒng)進(jìn)行顯示，同時(shí)將信息寫(xiě)入用戶端緩存同時(shí)記錄寫(xiě)入時(shí)間。當(dāng)用戶端顯示信息需更新時(shí)，程序首先讀取用戶端緩存看是否有有效時(shí)間內(nèi)的可用數(shù)據(jù)，如果沒(méi)有則再次向服務(wù)器端請(qǐng)求數(shù)據(jù)。

2.2? 系統(tǒng)實(shí)現(xiàn)

系統(tǒng)使用JavaScript+ASP實(shí)現(xiàn)，主頁(yè)面如圖2所示，系統(tǒng)將各機(jī)場(chǎng)實(shí)況中的天氣現(xiàn)象轉(zhuǎn)化為氣象圖標(biāo)，并結(jié)合機(jī)場(chǎng)經(jīng)緯度信息顯示在全球地圖上。地圖支持拖拽平移，滾輪變焦、雙擊縮放等功能。地圖具有根據(jù)四字代碼快速查詢定位機(jī)場(chǎng)的功能，具有顯示機(jī)場(chǎng)中英文名稱選項(xiàng)。地圖底圖可在地圖、地形、簡(jiǎn)明，三種模式中切換。當(dāng)鼠標(biāo)覆蓋機(jī)場(chǎng)圖表示會(huì)有彈窗顯示機(jī)場(chǎng)中英文名稱、機(jī)場(chǎng)實(shí)況報(bào)文、機(jī)場(chǎng)預(yù)報(bào)。當(dāng)單擊機(jī)場(chǎng)圖標(biāo)時(shí)會(huì)有彈窗顯示機(jī)場(chǎng)報(bào)文分解出來(lái)的要素信息。由于機(jī)場(chǎng)較多，全部顯示會(huì)導(dǎo)致系統(tǒng)頁(yè)面卡頓，因此系統(tǒng)采用了分級(jí)顯示技術(shù)，當(dāng)?shù)貓D縮放級(jí)別較低時(shí)只顯示大型機(jī)場(chǎng)信息，縮放級(jí)別較大時(shí)顯示全部機(jī)場(chǎng)信息。

2.2.1? 緩存機(jī)制的實(shí)現(xiàn)

（1）服務(wù)器端緩存。服務(wù)器端將所有機(jī)場(chǎng)報(bào)文信息及地理信息讀入緩存，并記錄緩存時(shí)間以判斷緩存有效性，核心實(shí)現(xiàn)代碼如下：

Response.Buffer = true;//打開(kāi)緩存模式

Response.CacheControl = 'Public';//設(shè)置為共有緩存

Application（"CACHE_INFO"） = '['+aA.join（'，'） +']';//將信息寫(xiě)入緩存

Application（"CACHE_TIME"） = ''+timeNow;//將時(shí)間寫(xiě)入緩存

nowMs - ms < oD[tt] //判斷緩存是否有效

（2）用戶端緩存。用戶端將從服務(wù)器端獲取的機(jī)場(chǎng)報(bào)文及地理位置信息讀入緩存，并記錄緩存時(shí)間以判斷緩存有效性，核心實(shí)現(xiàn)代碼如下：

CACHE[code].time = UpdateTime; //記錄時(shí)間信息

CACHE[code].data = INFO[i]; //記錄機(jī)場(chǎng)信息

localStorage['WX_REPORT'] = JSON.stringify （CACHE）; //將信息寫(xiě)入緩存

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

2.2.2? 可視化模塊

（1）顯示地圖信息。調(diào)用Leaflet的API函數(shù)讀取服務(wù)器端的瓦片圖信息，形成地圖，核心實(shí)現(xiàn)代碼如下：

var street = L.tileLayer（'http：//服務(wù)器IP及目錄/{id}/{z}/{y}/{z}_{y}_{x}.png'， {

maxZoom： 8， // 設(shè)置最大縮放級(jí)別

minZoom： 3， // 設(shè)置最小縮放級(jí)別

attribution： ''，

id： 'gditu'， //? 選擇地圖、地形、簡(jiǎn)明三種模式之一的瓦片圖

noWrap：false//是否屏蔽循環(huán)拖動(dòng)

}）; // 設(shè)置圖層

mymap = L.map（'mapid'， {layers：[baseLayer]}）.setView（[36.52，101.04]， 5）; // 將圖層加入地圖在頁(yè)面顯示

（2）顯示機(jī)場(chǎng)信息。顯示當(dāng)前地圖區(qū)域內(nèi)機(jī)場(chǎng)信息，根據(jù)經(jīng)緯度坐標(biāo)判斷機(jī)場(chǎng)是否在當(dāng)前地圖區(qū)域內(nèi)，分析機(jī)場(chǎng)實(shí)況報(bào)文信息，根據(jù)分解出的天氣現(xiàn)象將對(duì)應(yīng)的天氣圖標(biāo)在地圖上進(jìn)行顯示，核心實(shí)現(xiàn)代碼如下：

if （lat < lat1 || lat > lat2 || lon < lon1 || lon > lon2）//判斷機(jī)場(chǎng)是否在當(dāng)前地圖區(qū)域內(nèi)

var t=cfg.SA.replace（/[＼/=]/g，'? '）.replace（/ /g， '? '）.match（re_weather）; //解析機(jī)場(chǎng)實(shí)況報(bào)文

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>'}）;//繪制天氣現(xiàn)象圖標(biāo)

markers[code] = L.marker（latlng，? {icon： myIcon}）.addTo（mymap）.bindPopup（setinfo（cfg），{maxWidth： 800，minWidth：800}）;//將圖標(biāo)添加至地圖

（3）地圖觸發(fā)事件。地圖系統(tǒng)觸發(fā)事件包括點(diǎn)擊鼠標(biāo)拖動(dòng)地圖、地圖縮放、鼠標(biāo)覆蓋圖標(biāo)、鼠標(biāo)單擊圖標(biāo)等，核心實(shí)現(xiàn)代碼如下：

mymap.on（'mouseup'，function（e）{showSymbols （）;}）;// 鼠標(biāo)拖動(dòng)地圖時(shí)重新加載地圖上的機(jī)場(chǎng)圖標(biāo)

mymap.on（'zoomend'， function（）{showSymbols （）;}）;// 地圖縮放級(jí)別改變時(shí)重新加載地圖上的機(jī)場(chǎng)圖標(biāo)

markers[code].on（'click'，function（e）{ frame.location.href='單擊顯示頁(yè)面地址';}）// 鼠標(biāo)單擊機(jī)場(chǎng)圖標(biāo)時(shí)顯示機(jī)場(chǎng)報(bào)文解析頁(yè)面

markers[code].on（'mouseover'，function（e）{this.openPopup（）;}）; // 鼠標(biāo)覆蓋機(jī)場(chǎng)圖標(biāo)時(shí)顯示機(jī)場(chǎng)信息彈窗

markers[code].on（'mouseout'， function（e）{this.closePopup（）;}）;// 鼠標(biāo)移出機(jī)場(chǎng)圖標(biāo)時(shí)關(guān)閉機(jī)場(chǎng)信息彈窗

2.2.3? 其他功能

除上述功能外，由于機(jī)場(chǎng)報(bào)文信息時(shí)效性較高，系統(tǒng)還增加了報(bào)文有效性判斷功能，頁(yè)面定時(shí)更新功能確保報(bào)文信息及時(shí)準(zhǔn)確。為了使系統(tǒng)界面友好符合用戶習(xí)慣，系統(tǒng)在用戶端記錄用戶使用地圖的底圖模式、縮放級(jí)別、中心點(diǎn)等信息，在之后的服務(wù)中提供符合用戶習(xí)慣的最佳界面。為了使系統(tǒng)便于查找信息，系統(tǒng)還增加了根據(jù)機(jī)場(chǎng)四字代碼快速查找定位功能。

2.2.4? 系統(tǒng)測(cè)試

在完成系統(tǒng)的開(kāi)發(fā)和基本測(cè)試后，在民航中南地區(qū)航空氣象綜合信息服務(wù)系統(tǒng)中使用了該系統(tǒng)，并將該系統(tǒng)提供給了機(jī)場(chǎng)、航空公司等20余家用戶進(jìn)行了使用測(cè)試。測(cè)試結(jié)果表明該系統(tǒng)在用戶使用友好性、可用性、便捷性等方面有較好的效果。

3? 結(jié)? 論

該系統(tǒng)已應(yīng)用于向民航氣象用戶提供便捷的氣象報(bào)文信息，這種基于地圖的氣象信息顯示系統(tǒng)為用戶提供了更加直觀的氣象信息，縮短了用戶獲取信息的時(shí)間，取得了用戶的好評(píng)。未來(lái)民航氣象其他信息如氣象雷達(dá)、衛(wèi)星云圖、航班信息等數(shù)據(jù)也可以與該系統(tǒng)進(jìn)行融合顯示，可以極大地提高用戶獲取信息的效率，為用戶決策提供更有效的參考。

參考文獻(xiàn)：

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

[2] 顧振雄.基于Leaflet和Web服務(wù)的移動(dòng)端矢量瓦片顯示系統(tǒng) [J].地理空間信息，2019，17（3）：24-26+9.

[3] 趙虎川，曲超.基于開(kāi)源Leaflet的WebGIS客戶端設(shè)計(jì)與實(shí)現(xiàn) [J].科技創(chuàng)新與應(yīng)用，2017（16）：56-57.

[4] 范志龍，李善馳，劉賢寶，等.基于Leaflet的變形監(jiān)測(cè)數(shù)據(jù)發(fā)布系統(tǒng) [J].測(cè)繪與空間地理信息，2017，40（10）：149-150+153.

作者簡(jiǎn)介：李洋磊（1983.01-），男，漢族，河南洛陽(yáng)人，工程

師，碩士，研究方向：民航氣象信息系統(tǒng)設(shè)備維護(hù);陳瑤（1987.04

-），女，漢族，湖南湘潭人，工程師，碩士，研究方向：民航氣象信息系統(tǒng)設(shè)備維護(hù)。