cesium实现水闸放水以及水面升降效果

Mars3d水闸放水水面升降效果

用mars3d实现了开闸 水闸放水，水面升降以及控制流速等效果

效果图

QQ录屏20231130132647

QQ录屏20231129144059

水闸水柱

// 添加水柱
function addWaterGate() {
  // 阀门位置
  const posArr = [
    [121.479861, 29.791326, 18],
    [121.479826, 29.791326, 18],
    [121.479789, 29.791336, 18]
  ]

  for (let i = 0, len = posArr.length; i < len; i++) {
    const pos = posArr[i]
    const particleSystem = new mars3d.graphic.ParticleSystem({
      id: i + 1,
      position: pos, // 位置
      style: {
        image: "./img/particle/waterdrink.png", // "./img/particle/waterfall.png",
        particleSize: 36, // 粒子大小（单位：像素）
        emissionRate: 100.0, // 发射速率 （单位：次/秒）
        heading: 105, // 方向角
        pitch: 90, // 俯仰角
        gravity: -11, // 重力因子，会修改速度矢量以改变方向或速度（基于物理的效果）
        transZ: 5, // 离地高度（单位：米）
        maxHeight: 300, // 超出该高度后不显示粒子效果

        startColor: Cesium.Color.LIGHTYELLOW.withAlpha(0.3), // 开始颜色
        endColor: Cesium.Color.LIGHTYELLOW.withAlpha(0.0), // 结束颜色
        minimumParticleLife: 1, // 最小寿命时间（秒）
        maximumParticleLife: 2, // 最大寿命时间（秒）
        minimumSpeed: 10.0, // 最小速度(米/秒)
        maximumSpeed: 14.0 // 最大速度(米/秒)
      }
    })
    map.graphicLayer.addGraphic(particleSystem)
  }
}

 阀门控制

 //闸门加载
  zmGraphic = new mars3d.graphic.ModelEntity({
    name: "闸门",
    position: [121.479813, 29.791278, 16],
    style: {
      url: "//data.mars3d.cn/gltf/mars/zhamen.glb",
      heading: 105
    }
  })
  map.graphicLayer.addGraphic(zmGraphic)


// 全部闸门的控制
function bindShowAll(val) {
  map.graphicLayer.eachGraphic((graphic) => {
    graphic.show = val
    if (graphic.name == "闸门") {
      graphic.show = !val
    }
  })
}
/**
 * 开启阀门
 *
 * @export
 * @param {number} height  阀门高度  单位: m
 * @param {number} time //时间 单位:s
 * @returns {void} 无
 */
export function openZm(height, time) {
  addWaterGate()
  let thisHeight = 0 // 当前高度
  const endHeight = height // 结束高度

  const step = time / 0.1 // 步长
  const stepHeight = (endHeight - thisHeight) / step // 每次阀门、水面上移高度

  // 再次点击"开启"时从当前位置开启
  updateHeight(thisHeight)

  clearInterval(timeInv)
  timeInv = setInterval(() => {
    thisHeight += stepHeight // 上移后的当前高度,相当于时实更新

    if (thisHeight >= endHeight) {
      thisHeight = endHeight
      clearInterval(timeInv) // 清除定时器,当前阀门的高度值等于结束时阀门的高度值时，停止上移，关闭定时器
    }
    updateHeight(thisHeight)
  }, 100)
}

/**
 * 关闭阀门
 *
 * @export
 * @param {number} height  阀门高度 单位: m
 * @param {number} time //时间 单位:s
 * @returns {void} 无
 */
export function closeZm(height, time) {
  let thisHeight = height
  const endHeight = 0

  const step = time / 0.1
  const stepHeight = (endHeight - thisHeight) / step

  updateHeight(thisHeight)

  clearInterval(timeInv)
  timeInv = setInterval(() => {
    thisHeight += stepHeight

    if (thisHeight <= endHeight) {
      thisHeight = endHeight
      clearInterval(timeInv)
    }
    updateHeight(thisHeight)
  }, 100)
  bindShowAll(false)
}

 水面升降

waterLayer = new mars3d.layer.GeoJsonLayer({
    name: "排污河流(面状)",
    url: "//data.mars3d.cn/file/geojson/hedao-wai.json",
    symbol: {
      type: "waterC",
      styleOptions: {
        height: 16, // 水面高度
        offsetHeight: 0,
        normalMap: "img/textures/waterNormals.jpg", // 水正常扰动的法线图
        frequency: 8000.0, // 控制波数的数字。
        animationSpeed: 0.02, // 控制水的动画速度的数字。
        amplitude: 2.0, // 控制水波振幅的数字。
        specularIntensity: 0.4, // 控制镜面反射强度的数字。
        baseWaterColor: "#998c62", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4,#877658,#ac8113
        blendColor: "#877658", // 从水中混合到非水域时使用的rgba颜色对象。
        opacity: 0.6 // 透明度
      }
    }
  })
  map.addLayer(waterLayer)



// 高度更新
function updateHeight(height) {
  zmGraphic.height = 16 + height // 阀门高度

  waterLayer.eachGraphic((graphic) => {
    graphic.offsetHeight = height// 水域高度变化
  })
}

水面流速控制

//添加水面效果
function addDemoGraphic1() {
  debugger
  dynamicRiver = new mars3d.graphic.DynamicRiver({
    positions: [
      [121.487538, 29.803229, 16],
      [121.485562, 29.801082, 16],
      [121.484083, 29.79374, 16],
      [121.483607, 29.792796, 16],
      [121.482538, 29.792148, 16],
      [121.4811, 29.791998, 16],
      [121.479441, 29.792376, 16],
      [121.475508, 29.795565, 16],
      [121.474042, 29.795589, 16],
      [121.473272, 29.795118, 16],
      [121.473111, 29.790095, 16],
      [121.471644, 29.789939, 16]
    ],
    style: {
      image: "img/textures/poly-soil.jpg", // "img/textures/poly-rivers.png",
      width: 150,
      height: 0,
      speed: 2
    }
  })
  map.graphicLayer.addGraphic(dynamicRiver)
}

/**
 * 改变流速
 *
 * @export
 * @param {number} speed
 * @returns {void} 无
 */
export function changeSpeed(speed) {
  // debugger
  // const frequency = 8000 / speed
  speed = speed === 0 ? 1 : speed
  // const animationSpeed = 0.04 * speed
  // const amplitude = 2 * speed
  // waterLayer.eachGraphic((graphic) => {
  //   graphic.setStyle({
  //     animationSpeed: animationSpeed, // 控制水的动画速度的数字。
  //     amplitude: amplitude // 控制水波振幅的数字。
  //   })
  // })

  const riverSpeed = 2 * speed
  dynamicRiver.setStyle({
    speed: riverSpeed
  })
}

cesium的写的效果太一般了，草草放个乱码吧cesium实现