28.cesuim分析之淹没分析

最新推荐文章于 2025-10-23 08:45:00 发布

原创最新推荐文章于 2025-10-23 08:45:00 发布 · 529 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis #3d

gis开发学习专栏收录该内容

32 篇文章

订阅专栏

文章介绍了如何在前端使用Cesium库实现一个可交互的水体效果，通过定时器改变水体高度，实现从低到高平滑过渡。

效果图

在这里插入图片描述

前端代码

let Cesium = null

let showWater =false
let waterEntity=null

export const drawWater=(viewer)=> {
    Cesium = DC.Namespace.Cesium
    showWater = true
   waterEntity && viewer.entities.remove(waterEntity)
    const waterCoord = [119.642769, 30.361905, 100, 119.591604, 30.448757, 100, 119.695767, 30.488232, 100, 119.748406, 30.395983, 100]

    let startHeight = 100
    const targetHeight = 500
   waterEntity = viewer.entities.add({
      polygon: {
        hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(waterCoord),
        material: Cesium.Color.fromBytes(64, 157, 253, 200),
        perPositionHeight: true,
        extrudedHeight: new Cesium.CallbackProperty(() => { return startHeight }, false)
      }
    })
    viewer.flyToPosition(
        new DC.Position(119.66332661540228,30.443762489412983, 2000, 0, -90, 0)
    )
    const waterInterval = setInterval(() => {
      if (startHeight < targetHeight) {
        startHeight += 10
        if (startHeight >= targetHeight) {
          startHeight = targetHeight
          clearInterval(waterInterval)
          showWater = false
        }
        // 使用该方式会闪烁，改用 Cesium.CallbackProperty 平滑
        // this.waterEntity.polygon.extrudedHeight.setValue(startHeight)
      }
    }, 100)

  }