cesium实现电子围栏——动态渐变墙效果

通过着色器，实现cesium电子围栏——动态渐变墙效果，效果图如下：

具体实现步骤：

1、新建DynamicGradientWallMaterialProperty.js，加入下面的代码：

import * as Cesium from "cesium";
function DynamicGradientWallMaterialProperty(color, duration) {
  this._definitionChanged = new Cesium.Event();
  this._color = undefined;
  this._colorSubscription = undefined;
  this.color = color;
  this.duration = duration;
  this._time = Cesium.JulianDate.now().secondsOfDay;
}
Object.defineProperties(DynamicGradientWallMaterialProperty.prototype, {
  isConstant: {
    get: function () {
      return false;
    }
  },
  definitionChanged: {
    get: function () {
      return this._definitionChanged;
    }
  },
  color: Cesium.createPropertyDescriptor('color')
});
DynamicGradientWallMaterialProperty.prototype.getType = function(time) {
  return 'DynamicGradientWall';
};
DynamicGradientWallMaterialProperty.prototype.getValue = function(time, result) {
  if (!result) result = {};
  result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.RED.withAlpha(0.8), result.color);
  // 动态时间偏移
  const now = Cesium.JulianDate.now().secondsOfDay;
  result.time = (now - this._time) % this.duration / this.duration;
  return result;
};
DynamicGradientWallMaterialProperty.prototype.equals = function(other) {
  return this === other ||
      (other instanceof DynamicGradientWallMaterialProperty &&
          Cesium.Property.equals(this._color, other._color));
};
// Cesium.DynamicGradientWallMaterialProperty = DynamicGradientWallMaterialProperty
Cesium.Material.DynamicGradientWallType = 'DynamicGradientWall';
// 材质源码：GLSL 片段着色器
Cesium.Material.DynamicGradientWallSource = `
  czm_material czm_getMaterial(czm_materialInput materialInput)
  {
    czm_material material = czm_getDefaultMaterial(materialInput);
    vec2 st = materialInput.st; 
    vec4 baseColor = color;  
    float wave = sin(2.0 * 3.1415926 * (st.t - time)); 
    float alphaFactor = 0.5 + 0.5 * wave;  
    material.alpha = baseColor.a * alphaFactor;
    material.diffuse = baseColor.rgb;
    return material;
  }
`;
// 注册材质到 Cesium
Cesium.Material._materialCache.addMaterial(Cesium.Material.DynamicGradientWallType, {
    fabric: {
        type: Cesium.Material.DynamicGradientWallType,
        uniforms: {
            color: new Cesium.Color(0.0, 0.0, 1.0, 0.8), // 蓝色，半透明
            time: 0
        },
        source: Cesium.Material.DynamicGradientWallSource
    },
    translucent: function(material) {
        return true;
    }
});
export default DynamicGradientWallMaterialProperty

2、引入DynamicGradientWallMaterialProperty

import DynamicGradientWallMaterialProperty from "./lib/DynamicGradientWallMaterialProperty"

3、将动态渐变墙效果应用到wall的材质上：

viewer.entities.add({
  name: "动态渐变立体墙",
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArray([
      117.154815, 31.853495,
      117.181255, 31.854257,
      117.182284, 31.848255,
      117.184748, 31.840141,
      117.180557, 31.835556,
      117.180023, 31.833741,
      117.166846, 31.833737,
      117.155531, 31.833151,
      117.154787, 31.835978,
      117.151994, 31.839036,
      117.150691, 31.8416,
      117.151215, 31.844734,
      117.154815, 31.853495,
    ]),
    minimumHeights: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    maximumHeights: [600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600],
    material: new DynamicGradientWallMaterialProperty(Cesium.Color.fromCssColorString('#00ffff'), 2)
  }
})