王甫志，时焱红，陶春华，常高松

(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 结 语

较传统预报展示形式，本设计实现的动态可视化界面能够给使用者更加形象、直观地展示洪水实时传播过程，从而使得使用者能在第一时间了解洪水峰值以及实时传播位置，能为下游防汛抢险、水资源合理利用与保护、水利工程建设和调度运用管理以及工农业的安全生产等提供更实时、有效的安全服务。设计的关键是预报结果的精度和河道坐标点的密集度，预测预见期和洪峰结果越准确，洪水单位传播距离越精准，河道坐标点越密集，坐标计算结果越接近河道实际位置，可视化展示效果越逼近洪水真实传播过程。