基于WebGIS氣象數據前端展示的實現

張玲 張敏 劉梅 何雙伶 楊麗霞

摘要：以四川省遂寧地區地面氣象觀測站點離散雨量數據為例，探討基于WebGIS的氣象要素數據在客戶端的前端動態展示，通過讀取四川省氣象局發布的天擎接口，解析為站點氣象要素數據的Json格式，運用克里金插值、等值線追蹤、WebGIS等技術，采用Html5+JavaScript+CSS3編程實現氣象要素數據在PC和安卓客戶端的前端動態插值、等值線實時繪制。為天氣預報、氣象服務等提供直觀的氣象要素呈現方式，使氣象預報服務人員能快速有效地監視氣象要素時空變化及天氣過程演變趨勢，外部門決策用戶也可以通過該應用隨時掌握雨情和汛情，為各級政府部門防災減災科學決策提供參考依據。

關鍵詞：WebGIS；氣象數據；數據庫；接口；等值線；克里金

中圖分類號：TP393文獻標志碼：A文章編號：1008-1739（2023）03-54-4

0引言

目前，遂寧地區共建有自動氣象站點179個，后續補短板預警工程項目將陸續新建更多的站點，各氣象站點分布在全市各個鄉鎮，產生的小時數據及分鐘數據等數據量龐大，將如此龐大的數據進行集成顯示，同時通過網絡傳輸與共享，成為本文研究和解決的問題。近年來，各種災害性天氣頻發多發，特別是2021年7月20日鄭州遭遇歷史罕見特大暴雨，各級各部門對雨量等數據需引起高度警覺，為應對重大雨情、汛情，針對全市站點離散雨量數據開發一套氣象要素動態展示程序，通過克里金插值方法研究空間散亂點的插值，調用天地圖在線服務實時繪制四川省遂寧地區氣象要素數據等值線并進行填色，實現遂寧地區氣象數據信息的廣泛共享，同時可應用于氣象災害預警信息發布、天氣過程總結和災情評估等。

1總體設計

要擁有良好的移植性、擴展性以及共享性，該業務系統采用層次化的設計思路，總體框架包括3部分：數據層、邏輯層及應用層。數據層通過天擎系統讀取離散雨量數據，通過插值算法轉化為網格點數據；邏輯層根據用戶的需求對數據層進行操作，主要是通過對數據的深加工，繪制等值線、色斑圖等實現各類數據應用；應用層以網頁、手機App等實現可視化界面，用于顯示數據和接收用戶輸入的數據，以及數據的返回，為用戶提供一種交互式操作界面[1]。

降雨量等值線繪制運用Html5+JavaScript+CSS3以及WebGIS等技術實現，通過請求服務器接口返回Json格式離散點降水數據，采用克里金前端插值算法插值為格點數據，利用基于leaflet的JavaScript框架加載天地圖，將格點值渲染到Web地圖上，從而實現基于WebGIS的降雨量等值線以及色斑圖前端可視化展示[2]。

2插值算法

等值線是GIS制圖中常見的功能，一般有2種思路：一種是先進行插值生成等值面柵格圖，然后將等值面提取成等值線；另一種是進行插值后，直接根據算法進行插值點連接生成一條盡量閉合以及平滑的曲線。進行插值時，有很多算法可以選擇，如三角測量法、反距離權重法、泰森多邊形法、克里金法等，各種算法也會有不同的參數需要調試，并且根據實際情況，比如地理環境因素等進行微調，最后建模[3]。

克里金插值法又稱空間局部插值法，是以變異函數理論和結構分析為基礎，在有限區域內對區域化變量進行無偏最優估計的一種方法，是地統計學的主要內容之一[4]。克里金法在圖像處理、繪制和軟件開發方面都有較優越的表現，它的核心思想是有理有據的統計插值，根據一系列相鄰點之間的統計關系來模擬相鄰點之間空白區域的高程變化。把指定范圍內的所有數據點都放一起進行統計，然后根據每個距離范圍內點之間的高程半方差和距離，預測出這個范圍內最佳的擬合地表[5]。

3地圖調用

地圖調用使用第三方庫leaflet，這是一個為移動設備設計的交互式地圖的開源JavaScript庫，具有完美的開發文檔以及非常好的代碼結構，無依賴，庫文件體積很小，包含了大多數開發者所需的地圖特點，提供地圖展示、標注、定位等功能[5]。首先在Web頁面head區中引入leaflet css與js文件：

4等值線繪制

等值線是以相等數值點的連線表示連續分布且逐漸變化的數量特征的一種圖形，是氣象工作者常用的氣象要素圖形顯示方法，能很好地直觀展示氣象要素的分布情況，而較早使用到的等值線繪圖專業軟件有Matlab，surfer以及grads等[7-10]，各類繪圖軟件各有優缺點，但都需要單獨安裝繪圖軟件，且以靜態圖的形式展示給用戶。隨著氣象用戶的需求變化以及互聯網技術的高速發展，為緩解后臺壓力，隨時控制顯示樣式，實時動態地在前端地圖上展現各氣象要素分布成為新的發展趨勢，氣象探測數據資料和空間分析技術結合在一起，將會使氣象研究和氣象服務發揮更大的作用。

等值線的繪制流程主要由客戶端向四川天擎平臺發送數據請求，服務器端接收到請求后返回Json格式的站點離散數據，客戶端接收到數據后利用克里金算法將離散點數據插值為規則的網格點數據，最后加載地圖進行等值線和色斑圖的繪制。

4.1數據獲取與解析

隨著氣象數據源的不斷更新換代，CIMISS氣象數據統一服務接口（MUSIC）已被氣象大數據云平臺天擎所替代，相較CIMISS-MUSIC，天擎MUSIC的服務方式更加完整、服務效率更高。四川省天擎平臺涵蓋地面和高空數據、衛星和雷達數據、數值預報、農氣數據、服務產品等多種類型資料，資料種類已能滿足基礎氣象業務需求，并提供統一的氣象算法[11]。

在客戶端提交數據請求，服務器響應請求，通過天擎MUSIC讀取所需氣象要素數據資料，返回數據格式為一種簡單的數據交換格式———Json格式。Json格式是一種輕量級的數據交換格式，易于閱讀和理解，也易于機器解析和生成。Json采用獨立于語言的文本格式，使用了類似于C語言家族的習慣（包括C、C++、C#、Java、JavaScript、Perl、Python等），這些特性使得Json成為理想的數據交換語言，從而可以在異步應用程序中將字符串從Web客戶端傳遞給服務器端程序[12]。圖1為遂寧2020年8月23日20時—24日20時雨量數據Json格式查詢結果。

客戶端獲取服務器端返回的json格式數據后，運用JavaScript語言編寫代碼將這些數據解析成對象形式存儲在經度、緯度和插值權重字段值（雨量值）3個對象數組中，通過這3個數組供外部對象使用。部分解析代碼如下：

4.2數據插值

基于站點的氣象要素在地圖上表現的是不規則離散點，在等值線繪制過程中往往由于提供的監測數據樣本量較少且分布不規則，如果僅僅以此數據繪制等值線，作出的曲線效果或者gis圖片效果達不到要求，此時需要使用插值的方式將離散點數據插值成更為密集的規則的格點值數據，以提升效果。在繪制氣象要素的等值線圖時，首先要將離散的氣象數據插值成間距更為密集及排列規則的網格數據。

通過輸入前面解析獲得的離散點的經緯度、雨量數據對象數組以及遂寧地圖邊界坐標數組，通過克里金插值算法提供的空間預測和映射功能，代入公式計算獲得給定的行政邊界區域內插值數據，從而形成一組排列規則的格點數據集，供等值線追蹤和等值面繪制。

4.3等值線追蹤

數據插值后，再根據一定的算法利用插值所得的規則格點數據集追蹤生成一條盡量閉合以及平滑的曲線。等值線的追蹤首先從網格邊界或者網格內部上的某一等值點出發，求得下一等值點，然后以此點出發搜索下一等值點（即坐標），如此往復循環，若遇到網格邊界或者又回到起點（封閉等值線），則說明已經找到了一條等值上所有點的坐標位置，連接這些點，也就找到了等值線。

在區域內進行網格劃分，根據網格坐標的格點數據值，從一個矩形網格開始，首先確定等值線進入網格時的走向，追蹤等值線，等值線一定是連續的，所以在相鄰矩形邊界上的一個數值點，肯定會在下一個矩形中找到后續點，并且一定是成對出現的，也就是說，肯定能發現后續的等值點，也許不止一個，但不會出現找不到的情況。在一個矩形的四邊中也有可能出現多于一對的等值點情況，可根據等值線原來的前進方向以及當前等值點的遠近來追蹤下一點，這里是取相鄰點，從而避免與另一條等值線交叉。

對于網格點為等值點的處理，采用對網格點加上一個足夠小的數值（不影響繪圖精度）給予修正。將所有的點連接起來成為折線，會出現許多凸出的點，不能滿足氣象數據等值線的平滑要求，利用線性迭代法對等值線進行平滑處理，最后得到一條需要的光滑等值線。

4.4色斑圖實現

為使等值線圖更加直觀和美觀，將不同的區域以不同的顏色進行區分，在右上角顯示色標圖例。降水量圖形產品的制作和發布按照GB/T 35968—2018的色標規定要求[13]，以24 h降雨量色斑圖為例，降水分級色標如表1所示。

用上面給定的顏色代碼塊繪制分級色標，不同的量級對應不同量級下的色標規范，對等值線進行分析，按照相同值域范圍填充相同顏色的原則在地圖上進行顏色填充展示。

4.5等值線值和站點值的標記

在等值線和色斑圖繪制完成后，往往需要對等值線的線值在地圖上進行標注展示。等值線線值標注就是對一系列等值線圖上的全部或部分等值線旁邊進行屬性值的添加，以便讓用戶清楚了解等值線屬性。本文通過查找一組等值線的起始坐標和終止坐標，將起止坐標的值分別標注在線條上，對于閉合曲線因其起始點和終止點重合，故只需標注一個值，對于過短的等值線且雨量值很小的，為整體美觀起見一般不予標注顯示，但是對于雨量值大于等于50 mm的等值線，不論其線段長短如何均進行顯示并標記。

行政區域內站點要素值的標記通過存入一組Marker數組對象，站點數據通過Marker類在地圖上添加數據標記。遂寧地區2020年8月23日20時—24日20時雨量數據等值線如圖3所示。