基于Vue+OpenLayers+Turf的河段洪水預(yù)報動態(tài)可視化展示設(shè)計

王甫志，時焱紅，陶春華，常高松

(1.國能大渡河大數(shù)據(jù)服務(wù)有限公司，四川 成都 610041；2.四川新能工程咨詢有限公司，四川 成都 610041；3.四川省水文水資源勘測局，四川 成都 610036)

0 引 言

傳統(tǒng)河段洪水預(yù)報[1]結(jié)果一般以預(yù)報值和預(yù)報時間組成的過程線或過程表呈現(xiàn)，陸玉忠等[2]設(shè)計的鍋浪蹺水電站施工期洪水預(yù)報系統(tǒng)和王漢明[3]建立的濟(jì)南市河道洪水預(yù)報預(yù)案庫，均以過程線圖表結(jié)合的形式展示預(yù)報結(jié)果；孫平等[4]用預(yù)報單(表)展示鳳灘電廠短期入庫預(yù)報結(jié)果。這些都能為工程建設(shè)和運(yùn)行提供預(yù)報服務(wù)，但在洪水到達(dá)預(yù)報斷面前，對于當(dāng)前洪水傳播位置并不明確，即該場洪水到哪了、距離預(yù)報斷面還有多遠(yuǎn)等在傳統(tǒng)洪水預(yù)報結(jié)果展示中并未體現(xiàn)。

本文結(jié)合洪水預(yù)報結(jié)果，采用地圖導(dǎo)航思路，基于Vue框架和強(qiáng)大的開源地圖引擎OpenLayers，結(jié)合JavaScript Turf空間分析庫強(qiáng)大的空間分析操作功能，設(shè)計實(shí)現(xiàn)一種B/S結(jié)構(gòu)的可視化[5]展示界面，實(shí)時、動態(tài)地展示洪水關(guān)鍵要素：預(yù)測到達(dá)時間、洪峰大小和剩余河道傳播距離，以及預(yù)報區(qū)天氣和區(qū)間降雨情況，較傳統(tǒng)河段洪水預(yù)報能夠更加形象、直觀地展示洪水實(shí)時傳播情況。

1 設(shè)計思路

在日常生活，各種導(dǎo)航產(chǎn)品給人類出行帶來很多的便利，通過設(shè)置出發(fā)地和目的地，便能獲取到符合條件的出行路線，同時在到達(dá)目的地前可觀測到任意時刻所處位置以及距離目的地剩余距離、剩余時長等信息，本次平臺展示設(shè)計通過導(dǎo)航思路，將天然河道視為導(dǎo)航系統(tǒng)中的道路，洪水波峰視為導(dǎo)航者，結(jié)合洪水預(yù)報算法，通過時間變化可視化展示出該場洪水傳播過程，界面設(shè)計見圖1，整體設(shè)計思路如下：

圖1 實(shí)時洪水動態(tài)展示可視化界面設(shè)計

(1)統(tǒng)計河段距離。量算預(yù)報斷面至預(yù)報站河段距離，同時將河段經(jīng)緯度坐標(biāo)保存至關(guān)聯(lián)數(shù)據(jù)庫。

(2)洪水傳播速度計算。應(yīng)用預(yù)報算法預(yù)見期結(jié)果和(1)距離成果，計算當(dāng)場洪水平均傳播速度。

(3)經(jīng)緯度坐標(biāo)實(shí)時計算。結(jié)合(1)、(2)成果，按設(shè)計時間進(jìn)行經(jīng)緯度坐標(biāo)計算，實(shí)時更新傳播點(diǎn)坐標(biāo)。

2 相關(guān)技術(shù)

2.1 Vue

Vue是一種可以自底向上逐層應(yīng)用的漸進(jìn)式框架，其核心庫只關(guān)注視圖層，通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)的雙向數(shù)據(jù)綁定和組合的視圖組件[6-7]，易上手且易整合。Vue通過遍歷data中對象屬性，并將屬性轉(zhuǎn)為getter/setter，每個組件實(shí)例都有watcher對象，在組件渲染的過程中把屬性記錄為依賴，當(dāng)依賴項的setter被調(diào)用時，watcher重新計算，將其關(guān)聯(lián)組件進(jìn)行更新[8]，響應(yīng)原理見圖2。

圖2 Vue響應(yīng)原理

本次河段洪水預(yù)報可視化界面表現(xiàn)層所呈現(xiàn)的內(nèi)容由Vue設(shè)計開發(fā)，通過瀏覽器呈現(xiàn)。

2.2 OpenLayers

OpenLayers是一種用面向?qū)ο蟮姆绞介_發(fā)的開源的JavaScript類庫[9]，擁有強(qiáng)大的地圖展示功能，包括地圖數(shù)據(jù)顯示與相關(guān)操作，并具有靈活的擴(kuò)展機(jī)制，幾乎適配所有的地圖開發(fā)需求。在OpenLayers的體系框架中，把整個地圖看作一個容器(Map)，核心為地圖圖層(Layer)，每個圖層有對應(yīng)的數(shù)據(jù)源(Source)，并由地圖視圖(View)進(jìn)行地圖表現(xiàn)[10]。地圖容器上還支持一些與用戶交互的控件(Control和Interaction)，同時OpenLayers還支持事件機(jī)制[11]。

OpenLayers加載地圖非常簡便，本文演算河段所在區(qū)域通過核心類ol map進(jìn)行地圖初始化加載，分別建立底圖、數(shù)據(jù)以及繪制三大圖層。底圖圖層使用在線地圖或者本地地圖，數(shù)據(jù)圖層用于加載預(yù)報站和預(yù)報斷面位置數(shù)據(jù)，繪制圖層用來實(shí)現(xiàn)洪水傳播位置更新。

2.3 Turf

Turf是Web GIS開發(fā)提供的JavaScript空間分析庫，用于實(shí)現(xiàn)地理空間分析以及處理各種地圖算法，使用JavaScript編寫，通過npm進(jìn)行包管理。良好的模塊化設(shè)計使得Turf不僅可用于瀏覽器端，還可以通過Node.js在服務(wù)器端使用。

傳統(tǒng)的空間分析往往由服務(wù)器端調(diào)用空間數(shù)據(jù)庫完成分析過程，再將結(jié)果作為圖層返回到瀏覽器端，使得瀏覽器端的地圖應(yīng)用局限于圖層展示與簡單的查詢，計算復(fù)雜，本地設(shè)置功能也受局限[12]。2015年，Mapbox發(fā)布Turf空間分析庫，實(shí)現(xiàn)常用的空間分析操作。支持瀏覽器端操作，通過網(wǎng)頁地圖不僅可提供地名搜索與路徑查詢，還可以在瀏覽器中分享空間分析模型，使用Turf可將分析過程完全移至本地，在本地對模型進(jìn)行修改并立即看到分析結(jié)果；同時，它還可提供更多樣的數(shù)據(jù)展示并滿足更加復(fù)雜的用戶交互。

為了讓洪峰過程“動起來”，通過Turf庫中“獲取線上指定距離的點(diǎn)”的方法，結(jié)合河段洪水傳播速度，按設(shè)計時間計算傳播距離，依據(jù)GeoJSON格式的河道經(jīng)緯度坐標(biāo)數(shù)據(jù)，進(jìn)行傳播點(diǎn)經(jīng)緯度動態(tài)實(shí)時計算。GeoJSON的優(yōu)點(diǎn)是它具有簡單的結(jié)構(gòu)[13]，并且受所有Web地圖API的支持。計算示例核心代碼如下：

var line=turf.lineString([[Latitude，longitude]， [Latitude 1，longitude 1]，…]);

var options={units: ’kilometers’};

var along=turf.along(line， space， options);

即在坐標(biāo)數(shù)據(jù)集中，按坐標(biāo)軌跡，計算出距離起點(diǎn) space km處的坐標(biāo)點(diǎn)along。

3 設(shè)計應(yīng)用

猴子巖水電站位于四川省甘孜州康定市境內(nèi)，大渡河干流水電規(guī)劃28級開發(fā)方案中第9個梯級水電站[14-15]，電站總裝機(jī)容量170萬kW，具季調(diào)節(jié)性能，是國家及四川“十三五”規(guī)劃建設(shè)的重大工程，為世界第二高混凝土面板堆石壩，最大壩高223.5 m。

國電大渡河流域水電開發(fā)有限公司在成都建立了大渡河流域梯級電站調(diào)度中心[16]，并建立了上游丹巴站至猴子巖電站斷面的洪水預(yù)報模型，河段洪水預(yù)報主要采用上游丹巴水文站實(shí)測流量計算。丹巴水文站地處甘孜州丹巴縣章谷鎮(zhèn)，為長江流域大渡河上游控制站，上距丹巴縣城約2.0 km，下距猴子巖大壩約45 km，區(qū)間河道比降約0.4%，基本情況見表1。

表1 丹巴水文站基本情況

選用丹巴站作為預(yù)報站標(biāo)記點(diǎn)，猴子巖電站大壩為預(yù)報斷面標(biāo)記點(diǎn)，采用google地球[17]獲取區(qū)間河道KML經(jīng)緯度坐標(biāo)并轉(zhuǎn)換為GeoJSON格式文件，共計量坐標(biāo)點(diǎn)1 045個，取用水情水調(diào)自動化系統(tǒng)實(shí)時、1 h以及24 h區(qū)間面雨量成果，選擇時變線性匯流模型[18]對丹巴水文站至猴子巖電站進(jìn)行河段洪水預(yù)報，成果見表2、3。洪峰位置刷新時間設(shè)置為1s，建立平臺可視化界面見圖3。圖3中圖示十字圓點(diǎn)代表洪峰此刻在河道中的傳播位置，同時可視化標(biāo)注本場洪水洪峰值、預(yù)計到達(dá)預(yù)報斷面時間以及動態(tài)展示剩余河道距離。平臺界面將按照1 s的頻率，實(shí)時動態(tài)的刷新洪峰(十字圓點(diǎn))位置。

圖3 實(shí)時洪水動態(tài)展示可視化界面應(yīng)用效果示意

表2 猴子巖水電站時變線性匯流模型預(yù)報結(jié)果

表3 丹巴水文站至猴子巖水電站河道演算成果統(tǒng)計

4 結(jié) 語

較傳統(tǒng)預(yù)報展示形式，本設(shè)計實(shí)現(xiàn)的動態(tài)可視化界面能夠給使用者更加形象、直觀地展示洪水實(shí)時傳播過程，從而使得使用者能在第一時間了解洪水峰值以及實(shí)時傳播位置，能為下游防汛搶險、水資源合理利用與保護(hù)、水利工程建設(shè)和調(diào)度運(yùn)用管理以及工農(nóng)業(yè)的安全生產(chǎn)等提供更實(shí)時、有效的安全服務(wù)。設(shè)計的關(guān)鍵是預(yù)報結(jié)果的精度和河道坐標(biāo)點(diǎn)的密集度，預(yù)測預(yù)見期和洪峰結(jié)果越準(zhǔn)確，洪水單位傳播距離越精準(zhǔn)，河道坐標(biāo)點(diǎn)越密集，坐標(biāo)計算結(jié)果越接近河道實(shí)際位置，可視化展示效果越逼近洪水真實(shí)傳播過程。