基于WebGIS氣象數(shù)據(jù)前端展示的實(shí)現(xiàn)

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

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

關(guān)鍵詞：WebGIS；氣象數(shù)據(jù)；數(shù)據(jù)庫(kù)；接口；等值線；克里金

中圖分類號(hào)：TP393文獻(xiàn)標(biāo)志碼：A文章編號(hào)：1008-1739（2023）03-54-4

0引言

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

1總體設(shè)計(jì)

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

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

2插值算法

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

克里金插值法又稱空間局部插值法，是以變異函數(shù)理論和結(jié)構(gòu)分析為基礎(chǔ)，在有限區(qū)域內(nèi)對(duì)區(qū)域化變量進(jìn)行無(wú)偏最優(yōu)估計(jì)的一種方法，是地統(tǒng)計(jì)學(xué)的主要內(nèi)容之一[4]。克里金法在圖像處理、繪制和軟件開發(fā)方面都有較優(yōu)越的表現(xiàn)，它的核心思想是有理有據(jù)的統(tǒng)計(jì)插值，根據(jù)一系列相鄰點(diǎn)之間的統(tǒng)計(jì)關(guān)系來(lái)模擬相鄰點(diǎn)之間空白區(qū)域的高程變化。把指定范圍內(nèi)的所有數(shù)據(jù)點(diǎn)都放一起進(jìn)行統(tǒng)計(jì)，然后根據(jù)每個(gè)距離范圍內(nèi)點(diǎn)之間的高程半方差和距離，預(yù)測(cè)出這個(gè)范圍內(nèi)最佳的擬合地表[5]。

3地圖調(diào)用

地圖調(diào)用使用第三方庫(kù)leaflet，這是一個(gè)為移動(dòng)設(shè)備設(shè)計(jì)的交互式地圖的開源JavaScript庫(kù)，具有完美的開發(fā)文檔以及非常好的代碼結(jié)構(gòu)，無(wú)依賴，庫(kù)文件體積很小，包含了大多數(shù)開發(fā)者所需的地圖特點(diǎn)，提供地圖展示、標(biāo)注、定位等功能[5]。首先在Web頁(yè)面head區(qū)中引入leaflet css與js文件：

4等值線繪制

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

等值線的繪制流程主要由客戶端向四川天擎平臺(tái)發(fā)送數(shù)據(jù)請(qǐng)求，服務(wù)器端接收到請(qǐng)求后返回Json格式的站點(diǎn)離散數(shù)據(jù)，客戶端接收到數(shù)據(jù)后利用克里金算法將離散點(diǎn)數(shù)據(jù)插值為規(guī)則的網(wǎng)格點(diǎn)數(shù)據(jù)，最后加載地圖進(jìn)行等值線和色斑圖的繪制。

4.1數(shù)據(jù)獲取與解析

隨著氣象數(shù)據(jù)源的不斷更新?lián)Q代，CIMISS氣象數(shù)據(jù)統(tǒng)一服務(wù)接口（MUSIC）已被氣象大數(shù)據(jù)云平臺(tái)天擎所替代，相較CIMISS-MUSIC，天擎MUSIC的服務(wù)方式更加完整、服務(wù)效率更高。四川省天擎平臺(tái)涵蓋地面和高空數(shù)據(jù)、衛(wèi)星和雷達(dá)數(shù)據(jù)、數(shù)值預(yù)報(bào)、農(nóng)氣數(shù)據(jù)、服務(wù)產(chǎn)品等多種類型資料，資料種類已能滿足基礎(chǔ)氣象業(yè)務(wù)需求，并提供統(tǒng)一的氣象算法[11]。

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

客戶端獲取服務(wù)器端返回的json格式數(shù)據(jù)后，運(yùn)用JavaScript語(yǔ)言編寫代碼將這些數(shù)據(jù)解析成對(duì)象形式存儲(chǔ)在經(jīng)度、緯度和插值權(quán)重字段值（雨量值）3個(gè)對(duì)象數(shù)組中，通過這3個(gè)數(shù)組供外部對(duì)象使用。部分解析代碼如下：

4.2數(shù)據(jù)插值

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

通過輸入前面解析獲得的離散點(diǎn)的經(jīng)緯度、雨量數(shù)據(jù)對(duì)象數(shù)組以及遂寧地圖邊界坐標(biāo)數(shù)組，通過克里金插值算法提供的空間預(yù)測(cè)和映射功能，代入公式計(jì)算獲得給定的行政邊界區(qū)域內(nèi)插值數(shù)據(jù)，從而形成一組排列規(guī)則的格點(diǎn)數(shù)據(jù)集，供等值線追蹤和等值面繪制。

4.3等值線追蹤

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

在區(qū)域內(nèi)進(jìn)行網(wǎng)格劃分，根據(jù)網(wǎng)格坐標(biāo)的格點(diǎn)數(shù)據(jù)值，從一個(gè)矩形網(wǎng)格開始，首先確定等值線進(jìn)入網(wǎng)格時(shí)的走向，追蹤等值線，等值線一定是連續(xù)的，所以在相鄰矩形邊界上的一個(gè)數(shù)值點(diǎn)，肯定會(huì)在下一個(gè)矩形中找到后續(xù)點(diǎn)，并且一定是成對(duì)出現(xiàn)的，也就是說(shuō)，肯定能發(fā)現(xiàn)后續(xù)的等值點(diǎn)，也許不止一個(gè)，但不會(huì)出現(xiàn)找不到的情況。在一個(gè)矩形的四邊中也有可能出現(xiàn)多于一對(duì)的等值點(diǎn)情況，可根據(jù)等值線原來(lái)的前進(jìn)方向以及當(dāng)前等值點(diǎn)的遠(yuǎn)近來(lái)追蹤下一點(diǎn)，這里是取相鄰點(diǎn)，從而避免與另一條等值線交叉。

對(duì)于網(wǎng)格點(diǎn)為等值點(diǎn)的處理，采用對(duì)網(wǎng)格點(diǎn)加上一個(gè)足夠小的數(shù)值（不影響繪圖精度）給予修正。將所有的點(diǎn)連接起來(lái)成為折線，會(huì)出現(xiàn)許多凸出的點(diǎn)，不能滿足氣象數(shù)據(jù)等值線的平滑要求，利用線性迭代法對(duì)等值線進(jìn)行平滑處理，最后得到一條需要的光滑等值線。

4.4色斑圖實(shí)現(xiàn)

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

用上面給定的顏色代碼塊繪制分級(jí)色標(biāo)，不同的量級(jí)對(duì)應(yīng)不同量級(jí)下的色標(biāo)規(guī)范，對(duì)等值線進(jìn)行分析，按照相同值域范圍填充相同顏色的原則在地圖上進(jìn)行顏色填充展示。

4.5等值線值和站點(diǎn)值的標(biāo)記

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

行政區(qū)域內(nèi)站點(diǎn)要素值的標(biāo)記通過存入一組Marker數(shù)組對(duì)象，站點(diǎn)數(shù)據(jù)通過Marker類在地圖上添加數(shù)據(jù)標(biāo)記。遂寧地區(qū)2020年8月23日20時(shí)—24日20時(shí)雨量數(shù)據(jù)等值線如圖3所示。