cesium 动态线

动态线、流动线是智慧城市项目中，比较常见的可视化效果，cesium 中对于线图元提供了几种材质，但是并没有流动材质效果。我们可以通过自定义MaterialProperty材质来实现该效果。、

1. MaterialProperty类

在 Cesium 自定义MaterialProperty原理解析篇里已经详细介绍了MaterialProperty的原理，这里不在详述。

2. 自定义DnamicImageMaterialProperty类

这里的动态线是通过向shader里传入一张图片，设置图片的重复比率来，在每一帧更新中，动态采样，实现流动效果。

2.1. 自定义 CustomColorMaterialProperty 类

/*
 * @Description: 
 * @Author: maizi
 * @Date: 2024-08-16 15:06:46
 * @LastEditTime: 2024-08-16 17:28:51
 * @LastEditors: maizi
 */

function DnamicImageMaterialProperty(options) {
  options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT);

  this._definitionChanged = new Cesium.Event();
  this._image = undefined;
  this._repeat = undefined;
  this._color = undefined;
  this._speed = undefined;

  this.image = options.image;
  this.repeat = new Cesium.Cartesian2(
    options.repeat?.x || 1,
    options.repeat?.y || 1
  )
  this.color = options.color || Cesium.Color.fromBytes(0, 255, 255, 255);
  this.speed = options.speed || 1;
}

Object.defineProperties(DnamicImageMaterialProperty.prototype, {
  isConstant: {
    get: function () {
      return (
        Cesium.Property.isConstant(this._image) 
        && Cesium.Property.isConstant(this._repeat) 
        && Cesium.Property.isConstant(this._color) 
        && Cesium.Property.isConstant(this._speed)
      );
    },
  },

  definitionChanged: {
    get: function () {
      return this._definitionChanged;
    },
  },

  image: Cesium.createPropertyDescriptor("image"),
  repeat: Cesium.createPropertyDescriptor("repeat"),
  color: Cesium.createPropertyDescriptor("color"),
  speed: Cesium.createPropertyDescriptor("speed"),
});


DnamicImageMaterialProperty.prototype.getType = function (time) {
  return "DnamicImage";
};

DnamicImageMaterialProperty.prototype.getValue = function (time, result) {
  if (!Cesium.defined(result)) {
    result = {};
  }

  result.image = Cesium.Property.getValueOrUndefined(this._image, time);
  result.repeat = Cesium.Property.getValueOrUndefined(this._repeat, time);
  result.color = Cesium.Property.getValueOrClonedDefault(this._color, time);
  result.speed = Cesium.Property.getValueOrClonedDefault(this._speed, time);

  return result;
};


DnamicImageMaterialProperty.prototype.equals = function (other) {
  const res = this === other || (other instanceof DnamicImageMaterialProperty &&
    Cesium.Property.equals(this._image, other._image) &&
    Cesium.Property.equals(this._repeat, other._repeat) &&am