王甫志，時(shí)焱紅，陶春華，常高松

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

0 引 言

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

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

1 設(shè)計(jì)思路

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

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

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

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

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

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

2.1 Vue

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

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

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

2.2 OpenLayers

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

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

2.3 Turf

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

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

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

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)軌跡，計(jì)算出距離起點(diǎn) space km處的坐標(biāo)點(diǎn)along。

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

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

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

表1 丹巴水文站基本情況

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

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

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

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

4 結(jié) 語(yǔ)

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