cesium加载电子围栏，通过shader自定义材质实现动态墙效果，cavans自定义材质实现分层效果

shader自定义材质，设置贴图

定义DynamicWallMaterialProperty.js并引入

(function () {
  /*
      动态墙材质
      color 颜色
      duration 持续时间 毫秒
      trailImage 贴图地址
  */
  function DynamicWallMaterialProperty(options) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = options.color || Color.BLUE;
    this.duration = options.duration || 1000;
    this.trailImage = options.trailImage;
    this._time = (new Date()).getTime();
  }

  /**
   * 带方向的墙体
   * @param {*} options.get:true/false
   * @param {*} options.count:数量 
   * @param {*} options.freely:vertical/standard
   * @param {*} options.direction:+/-
   */
  function _getDirectionWallShader(options) {
    if (options && options.get) {
      var materail = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
      {\n\
          czm_material material = czm_getDefaultMaterial(materialInput);\n\
          vec2 st = materialInput.st;";
      if (options.freely == "vertical") { //（由下到上）
        materail += "vec4 colorImage = texture2D(image, vec2(fract(st.s), fract(float(" + options.count + ")*st.t" + options.direction + " time)));\n\ ";
      } else { //（逆时针）
        materail += "vec4 colorImage = texture2D(image, vec2(fract(float(" + options.count + ")*st.s " + options.direction + " time), fract(st.t)));\n\ ";
      }
      //泛光
      materail += "vec4 fragColor;\n\
          fragColor.rgb = (colorImage.rgb+color.rgb) / 1.0;\n\
          fragColor = czm_gammaCorrect(fragColor);\n\
          material.diffuse = colorImage.rgb;\n\
          material.alpha = colorImage.a;\n\
          material.emission = fragColor.rgb;\n\
          return material;\n\
      }";
      return materail
    }
  }
  
  Object.defineProperties(DynamicWallMaterialProperty.prototype, {
    isConstant: {
      get: function () {
        return false;
      }
    },
    definitionChanged: {
      get: function () {
        return this._definitionChanged;
      }
    },
    color: Cesium.createPropertyDescriptor('color')
  });
  
  var MaterialType = 'wallType' + parseInt(Math.random() * 1000);
  DynamicWallMaterialProperty.prototype.getType = function (time) {
    return MaterialType;
  };
  
  DynamicWallMaterialProperty.prototype.getValue = function (time, result) {
    if (!Cesium.defined(result)) {
      result = {};
    }
    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
    result.image = this.trailImage;
    if (this.duration) {
      result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
    }
    viewer.scene.requestRender();
    return result;
  };
  
  DynamicWallMaterialProperty.prototype.equals = function (other) {
    return this === other ||
      (other instanceof DynamicWallMaterialProperty
        && Cesium.Property.equals(this._color, other._color))
  };
  
  Cesium.Material._materialCache.addMaterial(MaterialType, {
    fabric: {
      type: MaterialType,
      uniforms: {
        color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
        image: Cesium.Material.DefaultImageId,
        time: -20
      },
      source: _getDirectionWallShader({
        get: true,
        count: 3.0,
        freely: 'vertical',
        direction: '-'
      })
    },
    translucent: function (material) {
      return true;
    }
  });
  Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty;
})();

//加载范围
function loadWall() {
  let data = [
    [
      104.0185546875,
      30.66235300961486
    ],
    [
      104.01589393615723,
      30.65652022496456
    ],
    [
      104.029541015625,
      30.65053940942565
    ],
    [
      104.0397548675537,
      30.65777541087788
    ],
    [
      104.03829574584961,
      30.66604446357028
    ],
    [
      104.0255069732666,
      30.667963963897005
    ],
    [
      104.0185546875,
      30.66235300961486
    ]
  ]
  let coor = Array.prototype.concat.apply(
    [],
    data
  );
  let datasouce = map_common_addDatasouce('wall');
  datasouce.entities.add({
    wall: {
      positions: Cesium.Cartesian3.fromDegreesArray(coor),
      positions: Cesium.Cartesian3.fromDegreesArray(coor),
      maximumHeights: new Array(data.length).fill(500),
      minimunHeights: new Array(data.length).fill(0),
      /* material: new Cesium.ImageMaterialProperty({
        transparent: true,//设置透明
        image: "./images/map/wl.png",
        repeat: new Cesium.Cartesian2(1.0, 1),
      }), */
      material: new Cesium.DynamicWallMaterialProperty({ trailImage: './images/map/wl.png', color: Cesium.Color.CYAN, duration: 1500 })
    },
  });
}

图片资源：

实现效果：

修改以上材质贴图和运动方向

图片资源：

实现效果：

cavans自定义材质，设置颜色

/**
 * 颜色渐变
 */
getColorRamp(elevationRamp, isVertical = true) {
    let ramp = document.createElement('canvas');
    ramp.width = isVertical ? 1 : 100;
    ramp.height = isVertical ? 100 : 1;
    let ctx = ramp.getContext('2d');

    let values = elevationRamp;
    let grd = isVertical ? ctx.createLinearGradient(0, 0, 0, 100) : ctx.createLinearGradient(0, 0, 100, 0);
    grd.addColorStop(values[0], 'rgba(22,35,64,1)');
    grd.addColorStop(values[1], 'rgba(49,67,71,1)');
    grd.addColorStop(values[2], 'rgba(22,35,64,1)');
    grd.addColorStop(values[3], 'rgba(49,67,71,1)');
    grd.addColorStop(values[4], 'rgba(22,35,64,1)');
    grd.addColorStop(values[5], 'rgba(49,67,71,1)');
    ctx.globalAlpha = 0.3;
    ctx.fillStyle = grd;
    if (isVertical)
        ctx.fillRect(0, 0, 1, 100);
    else
        ctx.fillRect(0, 0, 100, 1);
    return ramp;
}

let data = {
      id: '1',
      name: '电子围栏',
      rangerArr: [[116.52320712206836, 40.23406811024757, 20], [116.52321177601786, 40.23347668875855, 20], [116.52452838827061, 40.23347827970169, 20], [116.52453120516144, 40.23515431118559, 20], [116.52321855758989, 40.23407917327679, 20], [116.52320712206836, 40.23406811024757, 20]]
};
addWall(data) {
    if (data && data.rangerArr && data.rangerArr.length > 0) {
        let datasource = map_common_addDatasouce("wall");
        let positions = Array.prototype.concat.apply(
            [],
            data.rangerArr
        );
        datasource.entities.add(
            new Cesium.Entity({
                wall: {
                    positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),
                    material: new Cesium.ImageMaterialProperty({
                    	//自定义，通过canvas绘制
                        image: getColorRamp([0.0, 0.2, 0.4, 0.6, 0.8, 1.0], true,"county_border_line"),
                        //纯色
                        /*color: Cesium.Color.fromCssColorString('#faff12').withAlpha(0.3)*/
                    })
                }
            })
        );
    }
}