Cesium绘制动态线/流动线

着色器部分

 const PolylineTrailLinkType = 'PolylineTrailLink'
    const PolylineTrailLinkSource = /* glsl */`
czm_material czm_getMaterial(czm_materialInput materialInput)
{
  czm_material material = czm_getDefaultMaterial(materialInput);
  vec2 st = materialInput.st;
  vec4 sampledColor = texture2D(image, vec2(fract(st.s - time), st.t));
  material.alpha = sampledColor.a * color.a;
  material.diffuse = (sampledColor.rgb + color.rgb) / 2.0;
  return material;
}
`

    class PolylineTrailLinkMaterialProperty {
      /**
       * 构造方法
       * @param {String} image 图片路径，确保为程序能访问到的正常 URL
       * @param {Color} [color] 颜色，默认白色
       * @param {Number} [duration] 持续时间（毫秒），默认1000
       */
      constructor(image, color = Cesium.Color.WHITE, duration = 1000) {
        // this._definitionChanged = new Event('definitionChanged'); // 添加事件类型参数
        this._definitionChanged = new Cesium.Event()
        this._color = undefined
        this._colorSubscription = undefined
        this.color = color
        this.duration = duration
        this._time = new Date().getTime()
        this.image = image

        Cesium.Material._materialCache.addMaterial(PolylineTrailLinkType, {
          fabric: {
            type: PolylineTrailLinkType,
            uniforms: {
              color: color, // 设为半透明
              image: image,
              time: 0
            },
            source: PolylineTrailLinkSource
          },
          translucent: () => true
        })
      }

      get isConstant() {
        return false
      }

      get definitionChanged() {
        return this._definitionChanged
      }

      getType(_) {
        return PolylineTrailLinkType
      }

      getValue(time, result) {
        if (!Cesium.defined(result)) {
          result = {}
        }
        result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color)
        result.image = this.image
        result.time = (new Date().getTime() - this._time) % this.duration / this.duration
        return result
      }

      equals(other) {
        return this === other ||
          (other instanceof PolylineTrailLinkMaterialProperty && Cesium.Property.equals(this._color, other._color))
      }
    }

着色器部分的 material.alpha 和 material.diffuse 会控制颜色混合，传入图片和传入的颜色（默认白色）进行混合，如果使用后颜色比较怪或是透明度不对劲的话可以尝试去掉color.a参数，或是进行微调

使用方法

//     创建两个实体
    const newYorkEntity = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-74.006, 40.7128),
      point: {
        pixelSize: 10,
        color: Cesium.Color.RED,
      },
      label: {
        text: '纽约',
        show: true,
      },
    });

    // 创建华盛顿实体
    const washingtonEntity = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-77.0369, 38.9072),
      point: {
        pixelSize: 10,
        color: Cesium.Color.BLUE,
      },
      label: {
        text: '华盛顿',
        show: true,
      },
    });

    const polyline = viewer.entities.add({
      polyline: {
        positions: new Cesium.CallbackProperty(() => {
          return [newYorkEntity.position.getValue(), washingtonEntity.position.getValue()];
        }, false),
        width: 5,
        material: new PolylineTrailLinkMaterialProperty('./img/jianbian1.1_副本.png', Cesium.Color.RED, 3000),
      },
    });

上面是写文时用的渐变线，