cesium实现淹没分析(基于polygon)并解决屏闪


Cesium实战系列文章总目录传送门

1.实现效果

在这里插入图片描述

2.实现方法

基于面状entity的extrudedHeight高度来拉伸面,实现简单的淹没分析效果。

但直接使用setInterval设置extrudedHeight,会导致闪烁问题严重,可视化效果不好。
因此使用Cesium回调函数CallbackProperty来动态设置拉伸高度,可视化效果较好。

/**
 * 淹没分析函数,通过拉伸面的高度来进行分析
 * @param {*} viewer
 * @param {*} targertWaterHeight :目标水位高度
 * @param {*} positions :研究区域底部坐标数组
 * @param {*} waterHeight :当前水位高度
 */
function induationAnalysis(viewer, targertWaterHeight, positions, waterHeight) {
    viewer.entities.add({
        polygon: {
            hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(positions)),
            perPositionHeight: true,
            // 使用回调函数Callback,直接设置extrudedHeight会导致闪烁
            extrudedHeight: new Cesium.CallbackProperty(function() {
                waterHeight += 0.2;
                if (waterHeight > targertWaterHeight) {
                    waterHeight = targertWaterHeight;
                }
                return waterHeight;
            }, false),
            material: new Cesium.Color.fromBytes(64, 157, 253, 150),
        }
    });
}
  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
使用Cesium实现淹没分析,可以按照以下步骤进行操作: 1. 准备数据:收集淹没分析相关的数据,包括地形数据、水位高度、淹没分析区域等,可以使用GIS软件进行数据处理。 2. 构建地形模型:使用Cesium提供的3D Tiles功能,构建地形模型,可以借助Cesium ion平台的高精度地形数据。 3. 加载数据:将准备好的淹没分析数据加载到Cesium中,可以使用GeoJSON或KML格式的数据进行加载。 4. 实现淹没分析:根据水位高度和淹没分析区域,对Cesium中的地形进行修改,可以使用Cesium的Primitive或3D Tiles扩展来实现。 5. 更新动画效果:使用Cesium的动画功能,实现淹没分析过程的动画效果,可以使用Tween.js或者D3.js等动画库协助实现。 下面是一个详细的实现源码示例,其中使用了Cesium的terrainProvider和Primitive功能,实现了基本的淹没分析效果: ```javascript // 初始化Cesium Viewer var viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain() }); // 加载淹没分析数据 Cesium.GeoJsonDataSource.load('flood_analysis_data.geojson').then(function(dataSource) { viewer.dataSources.add(dataSource); var entities = dataSource.entities.values; // 循环遍历每个实体,获取淹没分析区域和水位高度信息 for (var i = 0; i < entities.length; i++) { var entity = entities[i]; var floodHeight = entity.properties.floodHeight; var floodExtent = entity.polygon.hierarchy; // 创建淹没分析Primitive var floodPrimitive = new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.PolygonGeometry({ polygonHierarchy: floodExtent, height: 0 }), attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE) } }), appearance: new Cesium.PerInstanceColorAppearance() }); // 添加淹没分析Primitive到场景中 viewer.scene.primitives.add(floodPrimitive); // 获取地形高度信息 var terrainProvider = viewer.terrainProvider; var positions = Cesium.Cartesian3.fromDegreesArray([ 119.0, 31.0, 119.5, 31.0, 119.5, 31.5, 119.0, 31.5 ]); var promise = Cesium.sampleTerrainMostDetailed(terrainProvider, positions); // 修改地形高度,实现淹没分析效果 Cesium.when(promise, function(updatedPositions) { var vertices = []; for (var j = 0; j < updatedPositions.length; ++j) { vertices.push(updatedPositions[j].x); vertices.push(updatedPositions[j].y); vertices.push(updatedPositions[j].z + floodHeight); // 修改高度信息 } floodPrimitive.getGeometryInstanceAttributes('color').color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.YELLOW); floodPrimitive.getGeometryInstanceAttributes('position').value = new Float32Array(vertices); }); } // 设置动画效果 var startTime = Cesium.JulianDate.now(); var stopTime = Cesium.JulianDate.addSeconds(startTime, 60, new Cesium.JulianDate()); viewer.clock.startTime = startTime.clone(); viewer.clock.stopTime = stopTime.clone(); viewer.clock.currentTime = startTime.clone(); viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; viewer.timeline.zoomTo(startTime, stopTime); viewer.clock.multiplier = 10; }); ``` 需要注意的是,这只是一个简单的示例代码,实际应用中还需要对数据进行预处理和优化,以提高效率和渲染质量。同时还需要考虑如何与其他Cesium功能和组件进行集成,以实现更加复杂的场景和应用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

右弦GISer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值