基于Leaflet地圖技術的民航氣象信息可視化系統的設計與實現

李洋磊 陳瑤

摘? 要：目前民航各機場的氣象信息主要以報文的方式提供給用戶，無法結合地理信息向用戶提供更加直觀便捷的氣象服務，本文基于Leaflet庫設計、開發(fā)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? 引? 言

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

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

1? Leaflet介紹

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

Leaflet的主要特性有：

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

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

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

（4）響應速度快，使用移動硬件加速、模塊化系統構建、智能渲染等功能使圖像顯示更加快捷。

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

2? 基于Leaflet的民航氣象信息可視化系統的設計與實現

2.1? 架構設計

本框架分為服務器端及用戶端兩個部分，服務器端提供全球地圖信息、天氣現象圖標信息、氣象報文信息及機場地理信息，其中全球機場報文信息包括全球2800余個機場實況報文及機場預報，由民航氣象數據庫系統中獲取并形成JSON格式的數據文件，機場地理信息主要包括各機場經緯度坐標、機場名稱、機場規(guī)模等信息，以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//是否屏蔽循環(huán)拖動

}）; // 設置圖層

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

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

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

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）地圖觸發(fā)事件。地圖系統觸發(fā)事件包括點擊鼠標拖動地圖、地圖縮放、鼠標覆蓋圖標、鼠標單擊圖標等，核心實現代碼如下：

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? 系統測試

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

3? 結? 論

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

參考文獻：

[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].科技創(chuàng)新與應用，2017（16）：56-57.

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

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

師，碩士，研究方向：民航氣象信息系統設備維護;陳瑤（1987.04

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