基于Vue+OpenLayers+Turf的河段洪水預報動態可視化展示設計

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

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

0 引 言

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

本文結合洪水預報結果，采用地圖導航思路，基于Vue框架和強大的開源地圖引擎OpenLayers，結合JavaScript Turf空間分析庫強大的空間分析操作功能，設計實現一種B/S結構的可視化[5]展示界面，實時、動態地展示洪水關鍵要素：預測到達時間、洪峰大小和剩余河道傳播距離，以及預報區天氣和區間降雨情況，較傳統河段洪水預報能夠更加形象、直觀地展示洪水實時傳播情況。

1 設計思路

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

圖1 實時洪水動態展示可視化界面設計

(1)統計河段距離。量算預報斷面至預報站河段距離，同時將河段經緯度坐標保存至關聯數據庫。

(2)洪水傳播速度計算。應用預報算法預見期結果和(1)距離成果，計算當場洪水平均傳播速度。

(3)經緯度坐標實時計算。結合(1)、(2)成果，按設計時間進行經緯度坐標計算，實時更新傳播點坐標。

2 相關技術

2.1 Vue

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

圖2 Vue響應原理

本次河段洪水預報可視化界面表現層所呈現的內容由Vue設計開發，通過瀏覽器呈現。

2.2 OpenLayers

OpenLayers是一種用面向對象的方式開發的開源的JavaScript類庫[9]，擁有強大的地圖展示功能，包括地圖數據顯示與相關操作，并具有靈活的擴展機制，幾乎適配所有的地圖開發需求。在OpenLayers的體系框架中，把整個地圖看作一個容器(Map)，核心為地圖圖層(Layer)，每個圖層有對應的數據源(Source)，并由地圖視圖(View)進行地圖表現[10]。地圖容器上還支持一些與用戶交互的控件(Control和Interaction)，同時OpenLayers還支持事件機制[11]。

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

2.3 Turf

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

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

為了讓洪峰過程“動起來”，通過Turf庫中“獲取線上指定距離的點”的方法，結合河段洪水傳播速度，按設計時間計算傳播距離，依據GeoJSON格式的河道經緯度坐標數據，進行傳播點經緯度動態實時計算。GeoJSON的優點是它具有簡單的結構[13]，并且受所有Web地圖API的支持。計算示例核心代碼如下：

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

var options={units: ’kilometers’};

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

即在坐標數據集中，按坐標軌跡，計算出距離起點 space km處的坐標點along。

3 設計應用

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

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

表1 丹巴水文站基本情況

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

圖3 實時洪水動態展示可視化界面應用效果示意

表2 猴子巖水電站時變線性匯流模型預報結果

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

4 結 語

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