SuperMap iClient for Webgl 实现时序性淹没分析

作者：taco

前言：常规实例中的淹没分析效果是一个基准面，随着时间平稳的上升，但实际情况可能并不会有一个平稳的上升效果，此时就有一个新问题？能否实现根据时间，降水量，或者水位的参数来控制淹没的效果呢？基于现有的接口的话，仅靠前端实现还是有些困难的。此时可以通过数据的辅助来实现该效果，本篇文章将介绍如何制作该类型数据，以及代码的实现方法。

一、数据制作

由于淹没数据，和时序性的降雨数据并不是很好的获取。我们这里采用的是地形基于水文分析构造的淹没数据。

1.数据导入

在iDesktopX中导入一份栅格数据，右键【数据源】-【导入数据集】-【选择需要导入的tif文件】

2.提取水系

导入后我们使用【空间分析】-【水文分析】来提取我们需要的数据。很不错的是这里提供了处理自动化流程，我们直接采用这个流程即可。

我们这里删掉一些不用的节点，仅保留我们需要的节点。

在填充伪洼池位置选择原始的栅格数据集

我们单击计算流向，选择上一步拿到的填充伪洼池后的栅格数据集来创建流向。并以流向数据集计算最终的汇水量。并单击执行从而得到汇水量数据集。

基于汇水量我们提取出栅格的水系数据，此时我们给定阈值来提取。此处阈值相当于栅格值也可以理解为水的高度。

重复执行上述操作多次分别得到10、20、30、40、50...等所需高度的值。为了最终效果好看，我这里提取的值相对来说较多。接下来使用【空间分析】-【矢栅转换】-【栅格矢量化】工具将栅格数据转为点数据。因为水系提取后栅格是0、1分布的，所以此时我们这里只提取出栅格值为1的数据即可，矢量类型注意选择点数据。

提取后我们得到下图这样的点位，会发现水位越高点位约少。其实相当于淹没的越高淹没的范围越小。

3.构造时序点位

我们基于水位点最低的点进行更新，在点位较低的点中创建多个时序字段。右键点数据集选择【属性】在右侧【属性结构】中点击【+】进行创建修改命名后选择【应用】。

此时我们浏览点数据集的属性表，可以发现字段是创建好了的，我们以记录的水位更新该字段的time1的值。点击time1列全部选中右键选择【更新列】，整列更新为我们需要的高度值即可。

由于我们需要多个时间字段，但时间字段保存在不同的点上，我们需要区分点位把不同时期的点赋值到最基础的点位上去。

接下来可以使用【空间分析】-【空间查询】功能，对数据进行更新。参考下方参数对点点相交查询。查询后会弹出属性表。直接在表的中更新time2的列即可。该列值为此点位的高度值。

更新后我们打开最低点的点数据集会发现其中包含很多空白字段，这些空白字段就是这个高度没有水位的点，我们需要用上一个字段值的点位信息来补充这个字段。右键含有空白字段的列，选择筛选只保留空白字段。在更新这个空白字段为上一个字段的值。

在更新后我们最终得到一份包含多时段的点数据集。

4.生成时序点位数据

我们将原始的栅格数据添加到地图中，新建面数据集。绘制一个我们需要执行淹没的范围。该范围可以为河流范围，也可以为一个区域范围。

使用【三维数据】-【生成瓦片】-【点集生成时序模型瓦片】功能进行处理，该功能仅在iDesktopX11.1.1版本中提供，需要的话可以在超图官网中下载最新版本。选择最低点的数据集，并且选择我们创建的时序字段。单机确定即可生成该类型缓存数据。

将缓存添加至场景中保存工作空间发布为三维服务即可。

二、代码效果实现

由于时序性淹没分析接口比较新，也需要使用SuperMap iClient for Webgl 11.1.1版本。可以在超图官网中进行下载（SuperMap技术资源中心|为您提供全面的在线技术服务）。注意：Cesium包并不支持该功能。

淹没分析参数与原始研发分析设置方法一致。

var colorTable = new SuperMap3D.ColorTable();
							colorTable.insert(0, SuperMap3D.Color.fromCssColorString("#00A5EB"));
							colorTable.insert(10.630219, SuperMap3D.Color.fromCssColorString("#A6D9FF"));
							colorTable.insert(20, SuperMap3D.Color.fromCssColorString("#00A5EB"));
							colorTable.insert(25.945329, SuperMap3D.Color.fromCssColorString("#9AD1FF"));
							colorTable.insert(30.260439, SuperMap3D.Color.fromCssColorString("#8EC9FF"));
							colorTable.insert(35.575548, SuperMap3D.Color.fromCssColorString("#81C1FF"));
							colorTable.insert(40.890658, SuperMap3D.Color.fromCssColorString("#75B9FF"));
							colorTable.insert(45.205768, SuperMap3D.Color.fromCssColorString("#69B1FF"));
							colorTable.insert(50.890658, SuperMap3D.Color.fromCssColorString("#75B9FF"));
							colorTable.insert(55.205768, SuperMap3D.Color.fromCssColorString("#69B1FF"));
							colorTable.insert(60.520877, SuperMap3D.Color.fromCssColorString("#5CAAFF"));
							colorTable.insert(65.835987, SuperMap3D.Color.fromCssColorString("#50A2FF"));
							colorTable.insert(70.151097, SuperMap3D.Color.fromCssColorString("#449AFF"));
							colorTable.insert(75.466206, SuperMap3D.Color.fromCssColorString("#3792FF"));
							colorTable.insert(80.781316, SuperMap3D.Color.fromCssColorString("#2B8AFF"));
							colorTable.insert(85.096426, SuperMap3D.Color.fromCssColorString("#1F82FF"));
							colorTable.insert(90.411535, SuperMap3D.Color.fromCssColorString("#127AFF"));
							colorTable.insert(95.726645, SuperMap3D.Color.fromCssColorString("#0672FF"));
							colorTable.insert(100.041755, SuperMap3D.Color.fromCssColorString("#006CFA"));
							colorTable.insert(105.356865, SuperMap3D.Color.fromCssColorString("#0067F1"));
							colorTable.insert(110.671974, SuperMap3D.Color.fromCssColorString("#0062E8"));
							colorTable.insert(120.987084, SuperMap3D.Color.fromCssColorString("#005EDF"));
							colorTable.insert(125.302194, SuperMap3D.Color.fromCssColorString("#0059D6"));
							colorTable.insert(130.617303, SuperMap3D.Color.fromCssColorString("#0054CD"));
							colorTable.insert(140.932413, SuperMap3D.Color.fromCssColorString("#0050C4"));
							colorTable.insert(145.247523, SuperMap3D.Color.fromCssColorString("#004BBB"));
							colorTable.insert(150.562632, SuperMap3D.Color.fromCssColorString("#0047B2"));
							colorTable.insert(170.877742, SuperMap3D.Color.fromCssColorString("#0042A9"));
							colorTable.insert(100, new SuperMap3D.Color(0, 0, 1, 0.1));


							var hyp = new SuperMap3D.HypsometricSetting();
							hyp.ColorTable = colorTable;
							hyp.DisplayMode = SuperMap3D.HypsometricSettingEnum.DisplayMode.FACE;
							hyp.Opacity = 1.0;
							hyp.LineInterval = 1.0;
							hyp.ColorTableMaxKey = layer._hypMaxCategory;
							hyp.ColorTableMinKey = layer._hypMinCategory;
				
							//设置非法值颜色 
							hyp.noValueColor = new SuperMap3D.Color(0.0, 0.0, 0.0, 0.0);
							hyp.MaxVisibleValue = layer._hypMaxCategory;
							hyp.MinVisibleValue = layer._hypMinCategory;
							hyp.filterMode = SuperMap3D.HypsometricSettingEnum.FilterMode.NEAREST;
							layer.hypsometricSetting = {
								hypsometricSetting: hyp,
								analysisMode: SuperMap3D.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL,
							};
							layer.temporalSetting = new SuperMap3D.TemporalSetting();
							layer.temporalSetting.location = 0;
							//							layer.temporalSetting.changeZValue = false;
							layer.minTransparentAlpha = 1;
							// 图层上的时间总数
							var temporalCount = layer.temporalCount
							// 开始
							var timer;
							var isStop = false;
							var isPlay = false;

通过setInterval来控制时序的进行。


								if (isStop || isPlay) {
									layer.temporalSetting.location = 0;
									isPlay = false;
									isStop = false;
									clearInterval(timer);
									$('.single-slider').jRange('setValue', "0");
								}
								timer = setInterval(() => {
									layer.temporalSetting.location += 1;
									// 获取input的value值 必须是字符串类型的值
									$('.single-slider').jRange('setValue', layer.temporalSetting.location
										.toString())
									if (layer.temporalSetting.location >= temporalCount) {
										layer.temporalSetting.location = 0;
										clearInterval(timer);
									}
								}, 200);

完整代码可以在资源中下载https://download.csdn.net/download/weixin_42532695/88595266

最终效果：

时序性淹没分析