李洋磊 陳瑤

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

關(guān)鍵詞：氣象信息;地圖技術(shù);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? 引? 言

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

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

1? Leaflet介紹

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

Leaflet的主要特性有：

（1）更加輕量級，無需部署，程序直接引用。

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

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

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

（5）可擴展性強，開源且支持各類插件，可充分擴展。

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

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

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

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

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

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

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

2.2.1? 緩存機制的實現(xiàn)

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

Response.Buffer = true;//打開緩存模式

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

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

Application（"CACHE_TIME"） = ''+timeNow;//將時間寫入緩存

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

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

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

CACHE[code].data = INFO[i]; //記錄機場信息

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

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

2.2.2? 可視化模塊

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

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

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

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

attribution： ''，

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

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

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

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

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

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

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

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

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

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（）;}）;// 鼠標移出機場圖標時關(guān)閉機場信息彈窗

2.2.3? 其他功能

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

2.2.4? 系統(tǒng)測試

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

3? 結(jié)? 論

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

參考文獻：

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

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

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

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

作者簡介：李洋磊（1983.01-），男，漢族，河南洛陽人，工程

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

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