基于Leaflet+Spring Boot的降雨等值線圖自動(dòng)繪制方法

王慶平，王軼凡，闕家駿

(寧波弘泰水利信息科技有限公司，浙江 寧波 315033)

等值線圖是地圖上表達(dá)地貌的重要符號(hào)，在水利工程中有著重要的使用價(jià)值，它不僅能夠?qū)υ陀^測(cè)數(shù)據(jù)(如降雨、墑情、溫度、濕度等)進(jìn)行可視化研究，而且能夠直觀且迅速地對(duì)高精度數(shù)據(jù)進(jìn)行分析[1- 2]。

目前已有很多地理信息軟件如MapInfo、ArcGIS、Surfer等均可以較好進(jìn)行等值線圖的繪制[3- 4]。黨磊等[5]介紹了利用ArcGIS軟件繪制降雨等值線圖的過程，毛興華等[6- 8]結(jié)合MapInfor和Sufer提出了一種繪制等值線的新方法。但是許多軟件需要有一定的操作基礎(chǔ)，且配置過程較為繁瑣，展示結(jié)果不美觀。同時(shí)，地理信息軟件均是基于C/S(Client/Server)結(jié)構(gòu)，存在著兼容性較差、開發(fā)與維護(hù)成本較高等不可避免的缺陷。隨著Web技術(shù)的日益成熟，B/S(Browser/Server)結(jié)構(gòu)軟件已經(jīng)逐步取代C/S結(jié)構(gòu)，它分布性強(qiáng)，業(yè)務(wù)擴(kuò)展及維護(hù)簡(jiǎn)單，用戶只需通過網(wǎng)絡(luò)和瀏覽器便可進(jìn)行業(yè)務(wù)查詢及操作，轉(zhuǎn)變了單機(jī)版軟件的劣勢(shì)。本文基于前端地圖框架LeafLet結(jié)合后端框架Spring Boot實(shí)現(xiàn)了降雨等值線圖的自動(dòng)繪制[9- 12]，整個(gè)流程算法高效簡(jiǎn)潔，使用操作簡(jiǎn)便，等值線圖可視化展示美觀，為不同領(lǐng)域中等值線圖的應(yīng)用提供了技術(shù)思路。

1 等值線生成原理

1.1 插值方法

在對(duì)降雨的時(shí)空分布規(guī)律進(jìn)行研究時(shí)，根據(jù)已知離散點(diǎn)的數(shù)據(jù)對(duì)區(qū)域內(nèi)未知點(diǎn)的數(shù)值進(jìn)行預(yù)測(cè)，是等值線精確與否的關(guān)鍵。因此，需要對(duì)計(jì)算區(qū)域進(jìn)行網(wǎng)格化處理，然后根據(jù)已知的離散雨量站點(diǎn)數(shù)據(jù)進(jìn)行空間插值，進(jìn)而繪出等值線。目前常用的插值方法有反距離加權(quán)插值法、最小曲率法、克里金插值法、三角網(wǎng)格法等[13- 15]。本文基于寧波市某水庫流域雨量站觀測(cè)數(shù)據(jù)為例，使用克里金插值法對(duì)網(wǎng)格點(diǎn)雨量進(jìn)行插值計(jì)算。

克里金插值法是一種依據(jù)變異函數(shù)對(duì)隨機(jī)過程進(jìn)行空間建模和預(yù)測(cè)(插值)的回歸算法。它基于地統(tǒng)計(jì)學(xué)理論，引入變異函數(shù)模型來統(tǒng)具有空間相關(guān)性的地理現(xiàn)象。運(yùn)用克里金插值法，不僅可以對(duì)位置區(qū)域進(jìn)行預(yù)測(cè)，而且可以對(duì)預(yù)測(cè)結(jié)果的不確定性進(jìn)行分析?？死锝鸩逯倒綖椋?/p>

(1)

(2)

對(duì)于已知的觀測(cè)數(shù)據(jù)，首先兩兩計(jì)算距離與半方差，然后根據(jù)變異函數(shù)指數(shù)模型計(jì)算出所有已知測(cè)點(diǎn)之間的半方差。對(duì)于未知點(diǎn)z0，計(jì)算它與所有已知點(diǎn)zi的半方差rio，繼續(xù)求解出最優(yōu)系數(shù)λi，最后使用最優(yōu)系數(shù)對(duì)已知點(diǎn)的屬性值進(jìn)行加權(quán)求和，從而得到未知點(diǎn)z0的估計(jì)值。

1.2 等值線追蹤

首先構(gòu)建網(wǎng)格并為每個(gè)網(wǎng)格分配索引，每個(gè)網(wǎng)格的格點(diǎn)值便是插值得出的雨量值，根據(jù)每個(gè)網(wǎng)格索引去索引邊表，獲取其所在邊位置(并賦予邊編號(hào))，并記錄點(diǎn)坐標(biāo)和邊編號(hào)。通過每個(gè)網(wǎng)格索引去索引線表，索引出點(diǎn)的連接順序(連接順序形式為邊編號(hào))，用邊編號(hào)從記錄的信息中索引出點(diǎn)的坐標(biāo)位置。最后根據(jù)所有點(diǎn)的坐標(biāo)繪制連線。

1.3 等值線平滑

追蹤等值線后由于會(huì)出現(xiàn)許多尖銳的凸點(diǎn)，未滿足降雨等值線的平滑要求，需要對(duì)等值線進(jìn)行進(jìn)一步的平滑處理。本文采用三次樣條插值(B-Spline插值)對(duì)等值線進(jìn)行平滑，通過插值后的等值線，每?jī)蓚€(gè)點(diǎn)之間均是用一條三次方程曲線連接。

2 系統(tǒng)框架介紹

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

本次降雨等值線圖的自動(dòng)繪制方法使用B/S架構(gòu)，采用前后端分離的模式，通過后端提供相應(yīng)的數(shù)據(jù)接口，在前端頁面進(jìn)行組織數(shù)據(jù)并展示，可以實(shí)現(xiàn)跨平臺(tái)、跨操作系統(tǒng)、多終端的要求。降雨數(shù)據(jù)全部存儲(chǔ)在MySQL數(shù)據(jù)庫中，前端采用基于Leaflet的JavaScript框架，后端采用基于Spring Boot的Java框架，前后端采用Json數(shù)據(jù)進(jìn)行通信，如圖1所示。

Leaflet是一個(gè)開源輕量級(jí)的JavaScript地圖庫，可以實(shí)現(xiàn)在線地圖開發(fā)及其展示。它堅(jiān)持設(shè)計(jì)簡(jiǎn)便、高性能和可用性好的思想，通過HTML5和CSS3對(duì)地圖要素在瀏覽器內(nèi)進(jìn)行可視化展示。Spring Boot是由Pivotal團(tuán)隊(duì)提供的一個(gè)Java后端框架，可以用來簡(jiǎn)化Spring應(yīng)用的初始搭建及開發(fā)過程?？蚣苤С侄鄶?shù)據(jù)庫源，配備了完整的注解配置方式，可以直接嵌入Tomcat服務(wù)器。本文將兩者相結(jié)合，提供了一種自動(dòng)繪制降雨量等值線圖的新思路。

2.2 算法實(shí)現(xiàn)

在降雨量等值線圖的繪制過程中，算法部分全部由Java編寫，地圖與圖形表達(dá)由JavaScript實(shí)現(xiàn)，前后端通過Json數(shù)據(jù)進(jìn)行聯(lián)通。

首先根據(jù)研究流域邊界框選出包含其流域的一個(gè)矩形邊界，對(duì)該矩形進(jìn)行網(wǎng)格劃分，將矩形邊界劃分成131535個(gè)網(wǎng)格，實(shí)驗(yàn)證明該網(wǎng)格精度可以滿足等值線圖的要求。利用已知的雨量站點(diǎn)數(shù)據(jù)，通過克里金插值對(duì)區(qū)域內(nèi)所有網(wǎng)格進(jìn)行雨量插值計(jì)算。系統(tǒng)為等值線設(shè)置了4套配色方案，依據(jù)其站點(diǎn)雨量最大值而定，分別為50、100、200mm和大于200mm，對(duì)于不同尺度的降雨量采用不用的配色方案繪制等值線。同時(shí)在每一套配色方案中設(shè)置6種顏色，每種顏色的上下限由雨量最大值內(nèi)插計(jì)算得出，依據(jù)此方法計(jì)算出每張等值線圖的圖例。根據(jù)指定的圖例，通過等值線追蹤法生成降雨量等值線，再對(duì)等值線進(jìn)行平滑處理，組裝成GeoJson格式的數(shù)據(jù)返回前端。

前端接受后端返回的GeoJson數(shù)據(jù)，在leaflet上進(jìn)行加載，地圖背景采用天地圖。加載等值線時(shí)，采用leaflet內(nèi)置算法，將等值線依據(jù)流域邊界裁剪，最終得出結(jié)果。

實(shí)驗(yàn)證明該算法計(jì)算高效，成圖迅速。本次研究區(qū)域?yàn)閷幉ㄊ心乘畮炝饔颍饔蛎娣e為254km2，系統(tǒng)共劃分為131535個(gè)網(wǎng)格，后端算法計(jì)算數(shù)據(jù)平均在650ms以內(nèi)，前端地圖渲染平均在100ms以內(nèi)，整個(gè)降雨等值線繪制過程可控制在1s之內(nèi)。

3 案例展示

本次研究采用寧波市某水庫流域2020年8月2日8：00至2020年8月4日8：00的8個(gè)雨量站實(shí)測(cè)雨量數(shù)據(jù)，對(duì)該時(shí)段內(nèi)的降雨等值線圖進(jìn)行繪制。流域內(nèi)雨量站信息及時(shí)段雨量值見表1。

圖2 不同時(shí)段降雨的等值線圖

表1 研究流域內(nèi)各雨量站分布信息及雨量值 單位：mm

對(duì)研究流域自2020年8月2日8：00起，分別計(jì)算12、24、36、48h內(nèi)的降雨量等值線圖(如圖2所示)。從圖中可清晰的看出隨著時(shí)間的變化，流域內(nèi)面降雨量的分布情況以及暴雨中心的變化。本方法基于流域?qū)崟r(shí)雨量數(shù)據(jù)，用戶可以調(diào)取數(shù)據(jù)庫內(nèi)任意時(shí)段內(nèi)的降雨量進(jìn)行繪制。同時(shí)，用戶可以在頁面內(nèi)通過鼠標(biāo)拖動(dòng)地圖，或者利用鼠標(biāo)滾輪對(duì)地圖進(jìn)行放大或縮小。結(jié)果證明，通過該方法繪制的降雨等值線圖具有計(jì)算高效、可視化展示美觀的優(yōu)點(diǎn)。

4 結(jié)語

(1)本次研究探討了一種新的降雨等值線圖自動(dòng)繪制方法，通過Web技術(shù)將傳統(tǒng)的降雨等值線圖利用Leaflet+Spring Boot的方法進(jìn)行全新展示。該方法結(jié)合了Spring Boot框架與Leaflet的優(yōu)點(diǎn)，并且可以接入實(shí)時(shí)雨量數(shù)據(jù)，用戶只需通過網(wǎng)絡(luò)和瀏覽器便可對(duì)降雨等值線圖繪制進(jìn)行“一鍵操作”。

(2)研究證明該方法計(jì)算穩(wěn)定高效，成圖美觀，多個(gè)用戶可以在線同時(shí)進(jìn)行計(jì)算。該方法減少了等值線繪制的難度和時(shí)間，提高了等值線的實(shí)用性，為不同領(lǐng)域中等值線圖的應(yīng)用提供了技術(shù)思路。