CN111784833A - 基于WebGL的洪水演进态势三维动态可视化展示方法 - Google Patents

Abstract

本发明公开了一种基于WebGL的洪水演进态势三维动态可视化展示方法。它包括如下步骤，步骤一：三维可视化引擎的选择；步骤二：地形和倾斜摄影模型数据处理及服务的发布；步骤三：洪水风险图三维可视化场景的集成；步骤四：洪水态势数据组织；步骤五：基于WebGL技术的洪水淹没模拟三维可视化展示。本发明具有实现二维洪水演进过程在无插件浏览器端的三维可视化展示的优点。

Description

基于WebGL的洪水演进态势三维动态可视化展示方法

技术领域

本发明涉及信息化技术领域，更具体地说它是一种基于WebGL实现洪水演进数值模拟成果三维动态可视化展示方法。

背景技术

利用可视化技术表达洪水演进的各项信息已成为目前洪水信息管理领域不可或缺的部分。为了能够更高效地掌握洪水演进规律，包括不同时刻的洪水淹没范围、水位、面积等诸多洪水信息都需要直观地进行展示，国内众多商业机构和相关研究者针对不同的应用背景开发了不同的洪水可视化系统平台。

目前，洪水演进三维动态可视化展示主要是基于OpenGL技术，采用的是C/S架构(即Client/Server，客户机/服务器结构)。随着IT技术的发展，B/S架构(即Browser/Server，浏览器/服务器结构)成为主流。目前，基于web端的洪水演进展示主要以二维为主。WebGL是一项用来在网页上绘制和渲染复杂三维图形(3D图形)，并允许用户与之交互的技术。WebGL技术结合了HTML5和JavaScript，允许开发者在网页上创建和渲染三维图形，且WebGL技术标准免去了开发网页专用渲染插件的麻烦。

耿敬等结合GIS技术与Mike21软件，设计了基于Mike21计算数据的GIS洪水淹没三维动态可视化方法，并采用空间数据库与属性数据库相互调用机制，实现淹没过程的动态模拟与实时信息查询；张彪等探讨了洪水淹没模拟三维可视化中的地理环境三维可视化，洪水淹没演进动态可视化和流场动态可视化三个问题，并提出了基于osg和osgEarth三维渲染引擎的解决方案；潘立武给出了根据二维浅水方程的数值计算结果构建洪水演进可视化模型的具体过程，讨论了3D-GIS洪水演进可视化实现的关键技术；葛小平等采用GIS与水力演进模型，结合三维模拟技术和对象关系模型数据库，实现浙江奉化江流域洪水淹没范围模拟；李云等通过建立一、二维洪水演进数学模型，实现淮河临淮岗区段洪水演进数值模拟和三维可视化。但以上方法高渲染的效率低，不能保证渲染效果。因此，现亟需开发一种能保证渲染的效果、提高渲染的效率的洪水演进数值模拟成果三维动态可视化展示方法。

发明内容

本发明的目的是为提供一种基于WebGL实现洪水演进数值模拟成果三维动态可视化展示方法，通过地形和倾斜摄影模型数据处理及服务的发布；洪水风险图三维可视化场景的集成；洪水态势数据组织；根据用户远近视角的变化，显示不同的渲染效果等手段，实现了基于WebGL的洪水演进三维可视化展示，且实现了大数据量洪水模型(超过1万个格网)秒级动态渲染；提出的方法根据用户远近视角的变化，显示不同的渲染效果，即保证了渲染的效果又提高了渲染的效率。

为了实现上述目的，本发明的技术方案为：一种基于WebGL的洪水演进态势三维动态可视化展示方法，其特征在于：包括如下步骤，

步骤一：三维可视化引擎的选择；

三维可视化引擎采用基于WebGL的开源Cesium渲染引擎；

步骤二:地形和倾斜摄影模型数据处理及服务的发布；

1)地形数据处理

运用CesiumLAB数据处理软件对地形数据进行处理，选择基于CTB三角算法并利用GZIP压缩技术生成分级的LOD层级数据；

2)倾斜摄影模型数据处理

运用CesiumLAB数据处理软件对OSGB格式的倾斜摄影数据进行格式转换及单体化处理；

3)数据服务的发布

处理完成后的地形和倾斜摄影模型的LOD层级数据属于静态资源，直接将根文件夹下的所有数据放到数据服务器(可以是TOMCAT或者IIS服务器)上，客户端加载请求根目录文件夹，利用WebGL技术构建直观的地形场景；

步骤三：洪水风险图三维可视化场景的集成；

步骤四：洪水态势数据组织；

二维洪水计算格网为*.shp格式的矢量面数据，包括多个三角网面要素；每个三角面包含洪水演进不同时刻的属性数据，主要属性字段为淹没时刻和淹没水深；

后台数据采用了GeoJSON的数据格式进行组织，把*.shp格式数据转换成GeoJSON格式，GeoJSON格式是用于描述地理空间信息的数据格式，其最外层是单独的对象；

对模型水深值进行分级并赋予特定的颜色值，对每个模型格网进行计算，确定该时刻格网的颜色级别，并增加颜色属性，该属性保存至上述的GeoJSON数据中；

步骤五：基于WebGL技术的洪水淹没模拟三维可视化展示

基于WebGL技术的洪水淹没模拟三维可视化展示包括图例设置和洪水态势演变过程的客户端渲染；

1)图例设置

建立淹没水深与模型格网颜色之间的对应关系，通过模型格网颜色的深浅表现淹没水深的高低；

2)洪水态势演变过程的客户端渲染

①渲染方式的选择

采用图元渲染的方式进行实现模型格网的渲染；

②渲染效果的实现

本发明根据视角高度变化显示不同渲染效果。

在上述技术方案中，在步骤三中，洪水风险图三维可视化场景的集成的具体方法为：

利用数字高程模型与高分辨率遥感影像叠加构建三维地形模型,集成倾斜摄影模型，接入与洪水态势展示相关的专题地理数据，建构模拟区域真实三维场景，最后利用WebGL的shader语言分别增加天气和特效两种虚拟环境增强效果，模拟洪水淹没过程中的外部自然条件。

在上述技术方案中，在步骤四中，对象包括几何体(Geometry)、特征(Feature)和特征集合(FeatureCollection)的信息。

在上述技术方案中，在步骤五中，图例设置的具体步骤如下：

①设置淹没水深分级数及颜色梯度；

②根据分级数及颜色梯度，构建颜色与洪水淹没水深数值之间的对应关系，淹没水深数值的大小与颜色深浅成正比关系。

在上述技术方案中，在步骤五中，本发明根据视角高度变化显示不同渲染效果：

在视角高度较高时，显示基本地形，洪水模型计算格网设置为贴地面显示，根据格网颜色的深浅区分淹没水深；在视角高度较低时，显示模拟区域的精细的三维倾斜地形数据，计算格网设置为根据淹没水深显示离地面绝对高度，通过计算格网和三维倾斜地形数据的叠加可直观展示淹没水深信息；

远视角下洪水模型计算格网是一种贴合地形的方式进行展示，图形颜色代表淹没水深的变化，改变图形外观(Appearance)的颜色属性，利用Cesium的CLAMP_TO_GROUND属性设置贴地形效果；

近视角下图形是一种贴合倾斜摄影模型的方式进行展示，图形颜色依然代表淹没水深的变化；倾斜模型有高度特征，图形通过X、Y坐标来渲染位置信息，且通过Height来确定淹没水深的高度；做倾斜摄影模型的分类单体化处理；利用Cesium的ClassificationType属性设置贴合倾斜摄影模型的效果。

本发明具有如下优点：

(1)本发明基于webGL技术实现了二维洪水演进过程在无插件浏览器端的三维可视化展示；

(2)本发明提出了一种二维洪水演进数值模拟结果的三维无插件可视化展示方法，实现：首先基于三维可视化无插件渲染的需求选择了基于WebGL技术的Cesium开源库作为渲染引擎，其次基于大量网格(一万网格以上)渲染，经过图元与实体渲染效果测试后选择图元渲染作为渲染方式，降低了内存消耗，提高了渲染性能；

(3)本发明采用洪水态势数据组织，即数据提前处理并采用GeoJSON进行存储，达到获取数据后即时渲染的目的，实现：二维洪水演进数值结果只包含淹没水深和淹没时刻两个可用数值，为了达到演进效果，需与颜色建立对应关系，如图12、13所示，渲染时首先获取GeoJSON数据，根据时刻变化动态渲染格网；

(4)本发明设计远近视角，保证渲染效果，提高渲染效率，即按需渲染，远视角观察洪水淹没与地形的关系，近视角观察与倾斜模型的关系，实现：通过在三维场景的观察高度判断远近视角，通过地形与倾斜模型数据发布与加载渲染实现相关效果；

(5)本发明构建三维仿真环境，即渲染天气和特效两种虚拟环境增强效果，增强洪水淹没过程体验，实现：以WebGL的shader语言作为基础构建粒子系统，分别增加雨、雪、雾、云、泛光、夜视、亮度、黑白等效果；

(6)本发明基于webGL技术实现了二维洪水演进数值模拟成果在无插件浏览器端的三维可视化展示，成果能够为洪水淹没的灾害评估与应急决策管理提供技术支撑，并符合互联网技术发展的最新趋势；本发明提出的方法可以直观显示洪水淹没范围及淹没水深随时间的变化，成果可满足管理部门洪水灾害动态评估与风险调控的要求。

附图说明

图1为本发明工艺流程图。

图2为本发明实施例中的地形terrain数据组织结构与数据格式示意图。

图3为本发明实施例中的倾斜摄影模型3D Tiles数据组织结构与数据格式示意图。

图4为本发明实施例中的倾斜摄影模型分类单体处理流程图。

图5为本发明实施例中的倾斜摄影模型数据分类单体效果图。

图6为本发明实施例中的以静态资源的形式部署在IIS服务器示意图。

图7为本发明实施例中的高分辨率影像数据集成示意图。

图8为本发明实施例中的数字高程模型与高分影像叠加显示效果示意图。

图9为本发明实施例中的倾斜摄影模型数据集成示意图。

图10为本发明实施例中的天气环境增强效果示意图。

图11为本发明实施例中的特效环境增强效果示意图。

图12为本发明实施例中的淹没水深示意图。

图13为本发明实施例中的淹没水深GeoJSON数据结构示意图。

图14为本发明实施例中的淹没水深分级前后的模型格网示意图。

图15为本发明实施例中的远近视角下不同的展现方式示意图。

图16为本发明实施例中的某时刻远视角洪水态势演变效果GIS显示示意图。

图17为本发明实施例中的某时刻近视角洪水态势演变效果GIS显示示意图。

图2为数字高程模型处理后的数据组织结构与格式，数据组织结构采用细节层次模型技术(LOD技术)，采用terrain存储地形三角网高程数据，根据地形的不同复杂程度(分辨率)和人眼观察地形的特点，对地形的不同区域采取不同细节的描述，本发明地形数据切割了16个级别，layer.json存储了地形切片的LOD描述信息，通过layer.json来确定不同级别下渲染的地形数据。

图3是倾斜摄影模型3D Tiles数据组织结构与数据格式，数据组织结构采用的也是细节层次模型技术(LOD技术)，本发明模型数据切割了16个级别，tileset.json存储模型的总体描述信息，通过tileset.json来确定不同级别下渲染的模型数据。

图10中，从上左至下右的图依次为雨天环境增强效果图、雪天环境增强效果图、雾天环境增强效果图、云天环境增强效果图。

图11中，从上左至下右的图依次为泛光特效环境增强效果图、夜视特效环境增强效果图、亮度特效环境增强效果图、黑白特效环境增强效果图。

图12中，淹没水深对应梯度颜色。

图13中，位于左边的图为淹没水深数据的GeoJSON数据结构示意图；位于右边的图为淹没水深数据示意图。

图14中，位于左边的图为淹没水深分级前的模型格网示意图；位于右边的图为淹没水深分级后的模型格网示意图。

图15中，位于左边的图为远视角下不同的展现方式示意图；位于右边的图为近视角下不同的展现方式示意图。

图16为本发明实施例中的洪水演进态势进度为22％时远视角下的洪水模型贴合地形的展示效果-----左下角颜色梯度代表淹没水深等级，不同淹没水深的三角格网渲染成对应梯度的颜色值。

图17为本发明实施例中的洪水演进态势进度为36％时近视角下的洪水模型贴合倾斜摄影模型的展示效果-----左下角颜色梯度代表淹没水深等级，不同淹没水深的三角格网渲染成对应梯度的颜色值，同时，根据不同时刻下的淹没水深拉伸三角格网，使三角格网切割倾斜模型，完成三角格网贴合倾斜模型的效果，通过颜色和高度共同反应洪水淹没过程。

具体实施方式

下面结合附图详细说明本发明的实施情况，但它们并不构成对本发明的限定，仅作举例而已。同时通过说明使本发明的优点更加清楚和容易理解。

本发明的核心思路为：1)基于数字高程模型与高分辨率遥感影像数据叠加构建逼真的地形；2)在地形上放置当前区域的倾斜摄影模型，模型放置需与地形高程完全衔接；3)利用WebGL的shader技术分别增加天气和特效两种虚拟环境增强效果，模拟洪水淹没过程中的外部自然条件，增加真实感；4)基于地形数据、倾斜摄影模型数据及虚拟环境增强效果完成三维场景的集成；5)确定洪水水深的分级标准及对应色值，并对模型格网水深数据进行分级；6)通过格网序号建立洪水模型图形与属性数据的关联，并组织成GeoJSON的数据格式；7)分别在远、近两种视角下利用WebGL技术进行洪水淹没模拟的图形渲染，远视角洪水模型贴近地表进行展示，近视角洪水模型贴近倾斜摄影模型进行展示；8)在动态演示的过程中可以像播放器一样进行播放、暂停、继续、停止等操作(如图1所示)。

参阅附图可知：一种基于WebGL的洪水演进态势三维动态可视化展示方法，包括如下步骤，

步骤一：三维可视化引擎的选择；

三维可视化引擎采用基于WebGL的开源Cesium渲染引擎；本发明采用B/S架构(即Browser/Server，浏览器/服务器结构)对洪水演进过程进行动态渲染，Web端系统存在浏览器性能的限制，不能与桌面端软件相提并论，因此选择一种Web端渲染技术至关重要；基于WebGL的开源Cesium渲染引擎是一个跨平台、跨浏览器的展示三维地球和地图的开源JavaScript库，使用WebGL来进行硬件加速图形，使用时不需要任何插件支持，凡是支持WebGL的浏览器均能运行；Cesium支持2D、2.5D、3D形式的地图展示，可以绘制各种几何图形、高亮区域，支持加载地形数据、人工模型、倾斜摄影数据等三维数据，自由、开放、灵活可定制的特征可以满足实现自定义的功能开发效果，为洪水时空态势三维可视化高效展示提供了可能；

步骤二：地形和倾斜摄影模型数据处理及服务的发布；

1)地形数据处理

浏览器地形加载需要.terrain格式的LOD层级数据；本发明运用CesiumLAB数据处理软件对地形数据进行处理，选择基于CTB三角算法并利用GZIP压缩技术生成分级的LOD层级数据(图2所示)；

2)倾斜摄影模型数据处理

倾斜摄影模型原始格式为OSGB，需要转化成3D Tiles的数据格式，3D Tiles是用于流式传输大规模异构3D地理空间数据集的开放规范；本发明运用CesiumLAB数据处理软件对OSGB格式的倾斜摄影数据进行格式转换及单体化处理(如图3、图4、图5所示)；

3)数据服务的发布

处理完成后的地形和倾斜摄影模型的LOD层级数据属于静态资源，可以直接将根文件夹下的所有数据放到数据服务器(可以是TOMCAT或者IIS服务器)上(如图6所示)，客户端加载只需请求根目录文件夹，利用WebGL技术可构建直观的地形场景；

步骤三：洪水风险图三维可视化场景的集成(如图7所示)；

步骤四：洪水态势数据组织；

二维洪水计算格网为*.shp格式的矢量面数据，包括多个三角网面要素；每个三角面包含洪水演进不同时刻的属性数据，主要属性字段为淹没时刻和淹没水深；

由于洪水演进数据包含的三角网较多，为了减少数据量，优化前端渲染，后台数据采用了GeoJSON的数据格式进行组织，需要把*.shp格式数据转换成GeoJSON格式，GeoJSON格式是用于描述地理空间信息的数据格式，语法规范是符合JSON格式，只不过对其名称进行了规范，专门用于表示地理信息，其最外层是单独的对象；

为了直观表达计算模型淹没水深信息，对模型水深值进行分级并赋予特定的颜色值，对每个模型格网进行计算，确定该时刻格网的颜色级别，并增加颜色属性，该属性保存至上述的GeoJSON数据中，便于客户端渲染(如图8所示)；

步骤五：基于WebGL技术的洪水淹没模拟三维可视化展示

基于WebGL技术的洪水淹没模拟三维可视化展示包括图例设置和洪水态势演变过程的客户端渲染；

1)图例设置

建立淹没水深与模型格网颜色之间的对应关系，通过模型格网颜色的深浅表现淹没水深的高低(如图12、图13、图14所示)；

2)洪水态势演变过程的客户端渲染

①渲染方式的选择

模型格网的渲染有两种方式，分别为图元(Primitive)渲染和实体(Entity)渲染，图元渲染相对于实体渲染有以下优势：

a性能：绘制大量Primitive时，可以将其合并为单个Geometry以减轻CPU负担、更好的使用GPU；

b灵活性：Geometry与Appearance解耦，两者可以分别进行修改；

c低级别访问：易于编写GLSL顶点、片段着色器、使用自定义的渲染状态；

在洪水演进三维可视化渲染实现过程中，先后试验了两种渲染方式，当模型格网超过1万个时，实体渲染会导致客户端崩溃，而采用图元渲染，可以比较流畅的实现图形的动态渲染过程，因此，本发明采用图元渲染的方式进行实现模型格网的渲染；

②渲染效果的实现

本发明可根据视角高度变化显示不同渲染效果(如图15、图16、图17所示)。

进一步地，在步骤三中，洪水风险图三维可视化场景的集成的具体方法为：

利用数字高程模型与高分辨率遥感影像叠加构建三维地形模型,集成倾斜摄影模型，接入与洪水态势展示相关的专题地理数据，建构模拟区域真实三维场景，最后利用WebGL的shader语言分别增加天气和特效两种虚拟环境增强效果，模拟洪水淹没过程中的外部自然条件(如图10、图11所示)，三维场景集成如图8、图9所示。

进一步地，在步骤四中，对象包括几何体(Geometry)、特征(Feature)和特征集合(FeatureCollection)的信息。

更进一步地，在步骤五中，图例设置的具体步骤如下：

①设置淹没水深分级数及颜色梯度；

②根据分级数及颜色梯度，构建颜色与洪水淹没水深数值之间的对应关系，淹没水深数值的大小与颜色深浅成正比关系(如图12、图13、图14所示)。

更进一步地，在步骤五中，本发明可根据视角高度变化显示不同渲染效果：

在视角高度较高时，显示基本地形，洪水模型计算格网设置为贴地面显示，根据格网颜色的深浅区分淹没水深；在视角高度较低时，显示模拟区域的精细的三维倾斜地形数据，计算格网设置为根据淹没水深显示离地面绝对高度，通过计算格网和三维倾斜地形数据的叠加可直观展示淹没水深信息(如图15所示)；

远视角下洪水模型计算格网是一种贴合地形的方式进行展示，图形颜色代表了淹没水深的变化，需要改变图形外观(Appearance)的颜色属性，利用Cesium的CLAMP_TO_GROUND属性设置贴地形效果(如图16所示)；

近视角下图形是一种贴合倾斜摄影模型的方式进行展示，图形颜色依然代表淹没水深的变化；不同的是，倾斜模型有高度特征，图形除了通过X、Y坐标来渲染位置信息外，还需要通过Height来确定淹没水深的高度；为了实现图形贴合效果，需要做倾斜摄影模型的分类单体化处理，即用拉伸后带有一定高度的图形切割倾斜摄影，通过颜色和高度共同反应洪水淹没过程；利用Cesium的ClassificationType属性设置贴合倾斜摄影模型的效果(如图17所示)。

现以本发明应用于某地域的洪水演进展示为实施例对本发明进行详细说明，对本发明应用于其他地域的洪水演进展示同样具有指导作用。

本实施例选择某流域的大通湖东垸蓄滞洪区作为该实施例地域，大通湖东垸东临东洞庭湖，西南以胡子口隔堤与大通湖垸相隔，北为藕池河东支注滋口河。蓄洪区面积197.48平方公里，蓄洪水位33.68米，蓄洪容积11.20亿立方米，耕地面积19.08万亩，常住人口约13.47万人。

参阅附图可知：本发明应用于某地域的洪水演进展示，即基于WebGL的某地域的洪水演进态势三维动态可视化展示方法，具体包括如下步骤，

步骤一：三维可视化引擎的选择

本实施例采用B/S架构(即Browser/Server，浏览器/服务器结构)对洪水演变过程进行动态渲染，Web端系统存在浏览器性能的限制，不能与桌面端软件相提并论，因此选择一种Web端渲染技术至关重要；

本实施例三维可视化引擎采用基于WebGL的开源Cesium渲染引擎，它是一个跨平台、跨浏览器的展示三维地球和地图的开源JavaScript库，使用WebGL来进行硬件加速图形，使用时不需要任何插件支持，凡是支持WebGL的浏览器均能运行；Cesium支持2D、2.5D、3D形式的地图展示，可以绘制各种几何图形、高亮区域，支持加载地形数据、人工模型、倾斜摄影数据等三维数据，自由、开放、灵活可定制的特征可以满足实现自定义的功能开发效果，为洪水时空态势三维可视化高效展示提供了可能；

步骤二：地形和倾斜摄影模型数据处理及服务的发布

1)地形数据处理

客户端地形加载需要.terrain格式的LOD层级数据(如图2所示)，需要把不同格式的数字高程模型数据处理成客户端能够识别的格式；本实施例运用CesiumLAB数据处理软件对地形数据进行处理，选择基于CTB三角算法并利用GZIP压缩技术生成分级的LOD层级数据；

2)倾斜摄影模型数据处理

倾斜摄影模型数据原始格式为OSGB，需要转化成3D Tiles的数据格式(如图3所示)；倾斜摄影模型不仅要加载到场景中，还需要对模型做分类单体处理。本发明运用CesiumLAB数据处理软件对倾斜摄影模型数据进行格式转化和分类单体进行处理；图4为倾斜摄影模型分类单体处理流程，图5为分类单体后的效果图，经过处理后的数据也是LOD层级数据；

3)数据服务的发布

处理完成后的地形和倾斜摄影模型的LOD层级数据属于静态资源，可以直接将根文件夹下的所有数据放到数据服务器上，可以是TOMCAT或者IIS服务器(如图6所示)，客户端加载只需请求根目录文件夹，利用WebGL技术可构建直观的地形场景；

步骤三：洪水风险图三维可视化场景的集成

1)高分辨率遥感影像数据集成

高分辨率的遥感影像数据可通过卫星遥感、航空摄影、无人机等方式获取，通过影像纠正、匀色、镶嵌等数据处理后，利用GIS服务器等发布成地图服务，利用Web端渲染引擎集成至三维场景内(如图7所示)；

2)数字高程模型数据集成

数字高程模型数据，简称DEM，是构建三维地形的数据来源，不同分辨率的DEM数据构建的地形精细程度也不同；三维场景构建地形只需要terrain格式的LOD层级数据，通过地形数据处理软件可将不同格式、分辨率的DEM数据统一集成至三维场景内，通过与影像数据的叠加获取更加逼真的效果(如图8所示)。

3)倾斜摄影模型数据集成

利用洪水计算格网对倾斜摄影模型进行单体化处理，通过分层设色可对居民房屋、工厂、住宅、商业楼等进行单体分类显示，在洪水淹没过程中，可直观的看到淹没区内的三维景观(如图9所示)；

4)虚拟环境效果

对三维场景增加天气和特效两种虚拟环境效果，天气环境包括雨、雪、雾、云等因素(如图10所示)，特效环境包括泛光、夜视、亮度、黑白等因素(如图11所示)；

虚拟环境效果可以模拟洪水淹没过程中的外部自然条件，结合地形、倾斜摄影模型等数据搭建的三维效果，增加真实感，制造更加接近现实的洪水淹没三维场景；虚拟环境效果的实现主要采用WebGL的着色器(shader)语言；

步骤四：洪水态势数据组织

二维洪水计算格网为*.shp格式的矢量面数据，包括多个三角网面要素。每个三角面包含洪水演进不同时刻的属性数据，主要属性字段为淹没时刻和淹没水深；由于洪水演进数据包含的三角网较多，为了减少数据量，优化前端渲染，后台数据采用了GeoJSON的数据格式进行组织，需要把shp格式数据转换成GeoJSON格式；

为了直观表达计算模型淹没水深信息，对模型水深值进行分级并赋予特定的颜色值，对每个模型格网进行计算，确定该时刻格网的颜色级别，并增加颜色属性，该属性保存至上述的GeoJSON数据中(如图13所示)，便于客户端渲染；如图14为淹没水深分级前和分级后的模型格网；

步骤五：基于WebGL技术的洪水态势三维可视化展示

1)图例设置

建立淹没水深值与洪水模型格网颜色之间的对应关系，通过格网颜色的深浅表现淹没水深的高低，具体步骤如下：

①根据洪水态势演变数据特点，将淹没水深分为6个级别，分别对应的数值区间为<0.5、0.5-1.0、1.0-1.5、1.5-2.5、2.5-5.0、>5.0；

②颜色选择，选择渐进变化的6种颜色，分别为"#CDFF00"、"#99FE00"、"#01FF35"、"#06FF99"、"#0099FF"、"#0033FF"；图12中，颜色从上到下依次对应淹没水深设置了0.4的透明度，"#CDFF00"的颜色相对于"#99FE00"增加了0.4的透明度；"#99FE00"相对于"#01FF35"增加了0.4的透明度；"#01FF35"相对于"#06FF99"增加了0.4的透明度；"#06FF99"相对于"#0099FF"增加了0.4的透明度；"#0099FF"相对于"#0033FF"增加了0.4的透明度；"#CDFF00"、"#99FE00"、"#01FF35"、"#06FF99"、"#0099FF"、"#0033FF"从上到下分别对应图12中从上到下的颜色。

③建立颜色和水深数值区间的对应关系，颜色梯度和数值区间的对应关系如图12所示；

5)洪水态势演变过程的客户端渲染

洪水态势演变过程渲染的实施流程如下：

①利用基于WebGL的Cesium三维渲染引擎分别渲染地形和倾斜摄影模型；

②利用WebGL分别添加天气和特效两种虚拟环境效果；

③获取洪水态势演变的GeoJSON数据；

④通过开始、暂停、重播按钮实现对洪水态势演变过程的控制；

⑤根据播放时刻，获取该时刻下所有的模型格网数据，包括模型格网图形位置信息、颜色属性信息，根据远近视角的不同(如图15所示)，分别渲染与地形、倾斜摄影模型的贴合效果，根据淹没水深数值确定颜色，给三角网格设置颜色属性，展示淹没水深(如图16、17所示)；

⑥在反复的洪水态势演变过程中，为减少内存消耗，对已渲染过的模型格网不再重复渲染，只通过颜色显示来控制(如图1所示)。

结论：本实施例基于webGL技术实现了二维洪水演进过程在无插件浏览器端的三维可视化展示，可以直观显示洪水淹没范围及淹没水深随时间的变化，成果可满足管理部门洪水灾害动态评估与风险调控的要求；

本实施例通过对洪水模拟结果数据结构的优化及Web前端渲染方式的优化设计，实现了大数据量洪水模型(超过1万个格网)秒级动态渲染，提出的方法根据用户远近视角的变化，显示不同的渲染效果，远视角洪水模型贴近地表进行展示，近视角洪水模型贴近倾斜摄影模型进行展示，既保证了渲染的效果又提高了渲染的效率。

上述技术术语解释如下：

Cesium是一个用于显示三维地球和地图的开源js库。它可以用来显示海量三维模型数据、影像数据、地形高程数据、矢量数据等等。

WebGL(全写Web Graphics Library)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

Cesiumlab是一款专为Cesium开源数字地球平台打造的免费数据处理工具集。目前包含地形数据处理、影像数据处理、点云数据处理、数据下载、建筑物矢量面处理、倾斜数据处理、三维场景处理等工具。同时提供一套java开发的数据服务器。形成从数据处理、服务发布、到代码集成的完整工具链。

CTB是Conditional Turn-based Battle的简称，以速度和行动内容为基础，计算出可以行动的时间，决定行动顺序的系统。

gzip是GNUzip的缩写，它是一个GNU自由软件的文件压缩程序。

层级细节(LOD)，根据物体在游戏画面中所占视图的百分比来掉调用不同复杂度的模型。

OSGB(Open Scene Gragh Binary)，是二进制存贮的、带有嵌入式链接纹理数据(.jpg)的OSGB格式。

shape文件由ESRI开发，一个ESRI(Environmental Systems ResearchInstitute)的shape文件包括一个主文件，一个索引文件，和一个dBASE表。其中主文件的后缀就是.shp；shp文件由固定长度的文件头和接着的变长度记录组成。每个变长度记录是由固定长度的记录头和接着的变长度记录内容组成。

GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法的地理空间信息数据交换格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

着色器语言(英语：Shader Language)也叫着色语言(英语：Shading Language)，是一类专门用来为着色器编程的编程语言。这类语言使用“颜色”“法线”等特殊的数据类型。由于三维计算机图形目标市场的多元化，不同的目标市场通常使用不同的着色器语言。

height属性设置元素的高度。

ClassificationType，分类类型；Cesium中提供的【classificationType:Cesium.ClassificationType.CESIUM_3D_TILE】参数，可以轻松实现单体化。

clampToGround属性用来表示该线段要贴地。1.54版以后贴地中的地字同时指代地形和3dtiles数据。

所述GIS为地理信息系统(Geographic Information System或Geo－Informationsystem，GIS)有时又称为“地学信息系统”。它是一种特定的十分重要的空间信息系统。它是在计算机硬、软件系统支持下，对整个或部分地球表层(包括大气层)空间中的有关地理分布数据进行采集、储存、管理、运算、分析、显示和描述的技术系统。

MIKE 21是一个专业的工程软件包，用于模拟河流、湖泊、河口、海湾、海岸及海洋的水流、波浪、泥沙及环境。

Osg(OpenSceneGraph)，能够更加快速、便捷地创建高性能、跨平台的交互式图形程序。

osgEarth是基于三维引擎osg开发的三维数字地球引擎库，在osg基础上实现了瓦片调度插件，可选的四叉树调度插件，更多的地理数据加载插件(包括GDAL，ogr，WMS，TMS，VPB，filesystem等)，再结合一套地理投影转换插件，这样就能够实现高效处理加载调度地理数据在三维地球上的显示，实现三维虚拟地球。

三维地理信息系统(3D GIS)，是新一代的地理信息系统，采用完全自主知识产权的核心3D引擎，三维地理信息系统是革命性突破，是物联网采集信息的最好展示管理平台，是智慧城市、智慧校园、智慧景区、智慧港口等建设的核心平台。

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

JavaScript(简称“JS”)是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式(如函数式编程)风格。

Terrain数据集是一种多分辨率的基于TIN的表面数据结构，它是基于作为要素存储在地理数据库中的测量值构建而成的。通常，terrain数据集利用激光雷达、声纳和摄影测量源进行构建。Terrain存储在地理数据库的要素数据集中，其中包含用于构建terrain的要素。

3D Tiles是用于流式传输大规模异构3D地理空间数据集的开放规范。为了扩展Cesium的地形和图像流，3D Tiles将用于流式传输3D内容，包括建筑物，树木，点云和矢量数据。3DTiles使用一个或多个tileset的json文件来组成整个场景，这些json文件不需要遵循特定的命名规则。

Server的Internet信息服务(IIS)是一种灵活，安全且可管理的WorldWide Web server，用于承载Web上的任何内容。从媒体流到Web应用程序，IIS的可扩展和开放式体系结构随时可以处理最苛刻的任务。

3D(three dimensional)，是指三维、三个维度、三个坐标，即有长、宽、高。换句话说，就是立体的，3D就是空间的概念也就是由X、Y、Z三个轴组成的空间，是相对于只有长和宽的平面(2D)而言2D又叫平面图形，2D图形内容只有水平的X轴向与垂直的Y轴向。2.5d又俗称伪3d，是一种结合了3d与2d的图形技术，通常被用于游戏图形渲染中。

Tomcat是由Apache开发的一个Servlet容器，实现了对Servlet和JSP的支持，并提供了作为Web服务器的一些特有功能，如Tomcat管理和控制平台、安全域管理和Tomcat阀等。

Geometry，几何学几何结构。

中央处理器(CPU，central processing unit)作为计算机系统的运算和控制核心，是信息处理、程序运行的最终执行单元。

GPU图形处理器(英语：Graphics Processing Unit，缩写：GPU)，又称显示核心、视觉处理器、显示芯片，是一种专门在个人电脑、工作站、游戏机和一些移动设备(如平板电脑、智能手机等)上做图像和图形相关运算工作的微处理器。GPU使显卡减少了对CPU的依赖，并进行部分原本CPU的工作。

其它未说明的部分均属于现有技术。

Claims (5)

1.一种基于WebGL的洪水演进态势三维动态可视化展示方法，其特征在于：包括如下步骤，

步骤一：三维可视化引擎的选择；

三维可视化引擎采用基于WebGL的开源Cesium渲染引擎；

步骤二:地形和倾斜摄影模型数据处理及服务的发布；

1)地形数据处理

运用CesiumLAB数据处理软件对地形数据进行处理，选择基于CTB三角算法并利用GZIP压缩技术生成分级的LOD层级数据；

2)倾斜摄影模型数据处理

运用CesiumLAB数据处理软件对OSGB格式的倾斜摄影数据进行格式转换及单体化处理；

3)数据服务的发布

处理完成后的地形和倾斜摄影模型的LOD层级数据属于静态资源，直接将根文件夹下的所有数据放到数据服务器上，客户端加载请求根目录文件夹，利用WebGL技术构建直观的地形场景；

步骤三：洪水风险图三维可视化场景的集成；

步骤四：洪水态势数据组织；

二维洪水计算格网为*.shp格式的矢量面数据，包括多个三角网面要素；每个三角面包含洪水演进不同时刻的属性数据，主要属性字段为淹没时刻和淹没水深；

后台数据采用GeoJSON的数据格式进行组织，把*.shp格式数据转换成GeoJSON格式，GeoJSON格式用于描述地理空间信息的数据格式，其最外层是单独的对象；

对模型水深值进行分级并赋予特定的颜色值，对每个模型格网进行计算，确定该时刻格网的颜色级别，并增加颜色属性，该属性保存至上述的GeoJSON数据中；

步骤五：基于WebGL技术的洪水淹没模拟三维可视化展示

基于WebGL技术的洪水淹没模拟三维可视化展示包括图例设置和洪水态势演变过程的客户端渲染；

1)图例设置

建立淹没水深与模型格网颜色之间的对应关系，通过模型格网颜色的深浅表现淹没水深的高低；

2)洪水态势演变过程的客户端渲染

①渲染方式的选择

采用图元渲染的方式进行实现模型格网的渲染；

②渲染效果的实现

根据视角高度变化显示不同渲染效果。

2.根据权利要求1所述的基于WebGL的洪水演进态势三维动态可视化展示方法，其特征在于：在步骤三中，洪水风险图三维可视化场景的集成的具体方法为：

利用数字高程模型与高分辨率遥感影像叠加构建三维地形模型,集成倾斜摄影模型，接入与洪水态势展示相关的专题地理数据，建构模拟区域真实三维场景，最后利用WebGL的shader语言分别增加天气和特效两种虚拟环境增强效果，模拟洪水淹没过程中的外部自然条件。

3.根据权利要求2所述的基于WebGL的洪水演进态势三维动态可视化展示方法，其特征在于：在步骤四中，对象包括几何体、特征和特征集合的信息。

4.根据权利要求3所述的基于WebGL的洪水演进态势三维动态可视化展示方法，其特征在于：在步骤五中，图例设置的具体步骤如下：

①设置淹没水深分级数及颜色梯度；

②根据分级数及颜色梯度，构建颜色与洪水淹没水深数值之间的对应关系，淹没水深数值的大小与颜色深浅成正比关系。

5.根据权利要求4所述的基于WebGL的洪水演进态势三维动态可视化展示方法，其特征在于：在步骤五中，根据视角高度变化显示不同渲染效果：

在视角高度较高时，显示基本地形，洪水模型计算格网设置为贴地面显示，根据格网颜色的深浅区分淹没水深；在视角高度较低时，显示模拟区域的精细的三维倾斜地形数据，计算格网设置为根据淹没水深显示离地面绝对高度，通过计算格网和三维倾斜地形数据的叠加可直观展示淹没水深信息；

远视角下洪水模型计算格网是一种贴合地形的方式进行展示，图形颜色代表了淹没水深的变化，改变图形外观的颜色属性，利用Cesium的CLAMP_TO_GROUND属性设置贴地形效果；

近视角下图形是一种贴合倾斜摄影模型的方式进行展示，图形颜色依然代表淹没水深的变化；倾斜模型有高度特征，图形通过X、Y坐标来渲染位置信息，且通过Height来确定淹没水深的高度；做倾斜摄影模型的分类单体化处理；利用Cesium的ClassificationType属性设置贴合倾斜摄影模型的效果。

Images