cesium淹没分析(纯前端实现)

1 篇文章 3 订阅

淹没分析是指根据指定的最大、最小高程值及淹没速度,动态模拟某区域水位由最小高程涨到最大高程的淹没过程。该功能应用于地形、DEM等数据。应用场景这里举两个例子,帮助大家理解。
(1)根据某区域洪水涨势速度,模拟洪水涨到指定高程的淹没过程,为防洪救灾提供一定的参考。
(2)淹没分析结果可为河流区域的水利工程或建筑地选址提供依据。
SuperMap iDesktop中有两种类型数据可以做三维淹没分析,分别是栅格数据集和地形缓存,二者操作方式有一定区别,下面我将分开来讲解两种格式数据三维淹没分析操作步骤和注意事项。

以地形数据方式添加栅格数据到场景中,为了场景地形效果更明显可以同时勾选以影像数据方式加载。

淹没分析可在“三维空间分析”面板处设置分析相关的参数,包括分析结果纹理颜色、透明度、播放设置等参数。可在分析结果列表中同时选中一个或多个结果进行设置。

参数设置:
*纹理颜色表:用来设置分析区域的填充纹理颜色,对应区域的高程值不同,则显示的颜色不同。
*透明度:用来设置分析区域填充纹理及等值线的透明度,默认值为 0。

播放设置:
*当前高程: 用来显示和设置当前水位所到达的高程值,当前高程需在最小高程和最大高程范围内。
*最小高程:用于设置淹没分析的最小高程,默认为 100 米。
*最大高程:用于设置淹没分析的最大高程,默认为 2000 米。
*总时间:用于显示和设置动态模拟淹没分析结果的播放时间,单位为:秒。
*速度:用来显示和设置从当前选中淹没分析结果由最小高程淹没至最大高程的动态播放速度,单位为:m/s,默认速度为 100 m/s。
*循环播放:勾选该复选框后,在执行分析结果播放时,将重复执行淹没效果的播放操作,直到用户停止播放;若未选中该复选框,则执行播放操作时,只能播放一次淹没效果。

原理:利用polygon的extrudedHeight属性,动态增加(原理很简单,但效果挺好)

效果图:

部分示例代码:

	_drawWater(targetHeight, adapCoordi) {
		let entity = this.earth.entities.add({
			polygon: {
				hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(adapCoordi),
				material: new GV.Color.fromBytes(64, 157, 253, 150),
				perPositionHeight: true,
				extrudedHeight: 0.0,
			}
		})
		this.waterEntities = entity
		let waterHeight = adapCoordi[2]
			this.timer = setInterval(() => {
			if (waterHeight < targetHeight) {
				waterHeight += 100
				if (waterHeight > targetHeight) {
					waterHeight = targetHeight
				}
				entity.polygon.extrudedHeight.setValue(waterHeight)
			}
		}, 100)
		this.entities.push(entity)
	}

骋天淹没分析系统 骋天淹没分析系统是以三维地理信息系统为基础平台,基于数字高程模型(DEM)格网模型,通过改进迭代种子蔓延算法将淹没分析结果直观在三维地理系统系统上呈现出来。 骋天淹没分析系统应用于水库的库区淹没分析时,设置好起止水位和终止水位,以三维的形式呈现库区淹没区域,根据不同是水深来计算库容量,移民数量、直接经济影响和间接经济影响。可将数据制作成柱状图、饼状图、曲线图等多种多样的统计图;能够根据业务流程和用户要求定制各类表格,进行业务报表输出;还能按某一要素生成范围图、点密度图、分级符号图等,进行专题图分析,形象直观地反映防洪要素的时空变化规律。 骋天淹没分析系统亦可应用于洪水淹没分析时,根据洪水演进过程,配合数字化地图,利用三维模型,计算洪水淹没范围和淹没水深,并动态显示淹没区域并动态显示淹没区域,计算人口、家庭财产、工商、企业、农业、林业、渔业和畜牧业等淹没信息。并可根据预报调度、实时调度和历史调度等不同洪水下泻过程,计算分析洪水淹没损失,显示淹没分布状况,从而得出最佳洪水调度预案,提供泄洪区域内人员撤退、避灾转移和救灾物资供应等最佳行动路线。 广西骋天信息科技有限公司 网站 www.gxchengtian.com
Cesium可以通过加载地形、影像和矢量数据,来构建一个真实的地球模型,并进行洪水淹没分析。以下是一些Cesium洪水淹没分析的代码实现示例: 1. 加载影像和地形数据 ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); var imageryLayers = viewer.imageryLayers; imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ url: 'http://localhost:8080/geoserver/gwc/service/wmts', layer: 'workspace:layer', style: '', format: 'image/png', tileMatrixSetID: 'EPSG:4326', maximumLevel: 20, credit: new Cesium.Credit('Data © OpenStreetMap contributors, GeoServer') })); var terrainProvider = new Cesium.CesiumTerrainProvider({ url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles', requestVertexNormals: true }); viewer.terrainProvider = terrainProvider; ``` 2. 加载矢量数据 ```javascript var dataSource = new Cesium.GeoJsonDataSource('flood'); viewer.dataSources.add(dataSource); dataSource.load('http://localhost:8080/geoserver/workspace/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=workspace:layer&outputFormat=application%2Fjson', { stroke: Cesium.Color.BLACK, fill: Cesium.Color.BLUE.withAlpha(0.5), strokeWidth: 3, clampToGround: true }); ``` 3. 洪水淹没分析 ```javascript var floodHeight = 20; // 洪水高度 var floodPolygon = dataSource.entities.getById('workspace:layer.1'); // 获取洪水区域 var floodPolygonPositions = floodPolygon.polygon.hierarchy.getValue().positions; // 获取洪水区域顶点坐标 var floodPolygonHeight = floodPolygonPositions[0].height; // 获取洪水区域高度 var terrainSamplePositions = Cesium.SampledPositionProperty.fromCartographicArray(terrainCartographicPositions, 50); // 获取地形高度采样点 var floodPolygonCartographicPositions = Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray(floodPolygonPositions); // 将洪水区域顶点坐标转换为地理坐标 // 计算洪水淹没面积 var floodPolygonArea = Cesium.PolygonGeometryLibrary.computeArea2D(floodPolygonCartographicPositions); var floodHeightArray = new Array(floodPolygonPositions.length).fill(floodPolygonHeight + floodHeight); // 构造洪水高度数组 // 计算洪水淹没体积 var floodPolygonVolume = Cesium.PolygonGeometryLibrary.computeVolume(floodPolygonPositions, floodHeightArray, terrainSamplePositions); console.log('Flood area: ' + (floodPolygonArea / 1000000).toFixed(2) + ' km²'); console.log('Flood volume: ' + (floodPolygonVolume / 1000000).toFixed(2) + ' million m³'); ``` 以上代码示例中,首先通过加载影像和地形数据,构建了一个真实的地球模型。然后通过加载矢量数据,获取了洪水淹没区域。最后,通过计算洪水淹没面积和体积,完成了洪水淹没分析
评论 22
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值