init

src/Obj/Materail/CircleRippleMaterialProperty.js

@@ -0,0 +1,171 @@
+/*
+ * @Description: 波纹圆效果
+ */
+export default class CircleDiffuseMaterialProperty {
+
+  constructor(options) {
+    if (!CircleDiffuseMaterialProperty.prototype.hasOwnProperty('color')) {
+      Object.defineProperties(CircleDiffuseMaterialProperty.prototype, {
+        color: Cesium.createPropertyDescriptor("color"),
+      });
+    }
+    if (!CircleDiffuseMaterialProperty.prototype.hasOwnProperty('speed')) {
+      Object.defineProperties(CircleDiffuseMaterialProperty.prototype, {
+        speed: Cesium.createPropertyDescriptor("speed"),
+      });
+    }
+    if (!CircleDiffuseMaterialProperty.prototype.hasOwnProperty('transparency')) {
+      Object.defineProperties(CircleDiffuseMaterialProperty.prototype, {
+        transparency: Cesium.createPropertyDescriptor("transparency"),
+      });
+    }
+    if (!CircleDiffuseMaterialProperty.prototype.hasOwnProperty('count')) {
+      Object.defineProperties(CircleDiffuseMaterialProperty.prototype, {
+        count: Cesium.createPropertyDescriptor("count"),
+      });
+    }
+    if (!CircleDiffuseMaterialProperty.prototype.hasOwnProperty('gradient')) {
+      Object.defineProperties(CircleDiffuseMaterialProperty.prototype, {
+        gradient: Cesium.createPropertyDescriptor("gradient"),
+      });
+    }
+    this._definitionChanged = new Cesium.Event();
+    this._speed = undefined;
+    this.id = options.id;
+    this.color = options.color || new Cesium.Color(1.0, 1.0, 1.0, 1.0);
+    this.colors = options.colors || {};
+    this.speed = options.speed;
+    this.transparency = options.transparency;
+    this.count = options.count;
+    this.gradient = options.gradient;
+    let _sourceColor = ``
+    let ratio = []
+    for (const key in this.colors) {
+      if (Object.hasOwnProperty.call(this.colors, key)) {
+        ratio.push(key)
+      }
+    }
+    ratio.sort((a, b) => b - a)
+    for (let i = 0; i < ratio.length; i++) {
+      let color = this.colors[ratio[i]]
+      _sourceColor = _sourceColor + `
+        if(dis < float(${Number(ratio[i]) / 2})) {
+          material.diffuse = vec4(0.0,0.0,0.0,0.0).rgb;
+          material.emission = 1.0 * vec4(${color.red},${color.green},${color.blue},${color.alpha}).rgb;
+        }
+        `
+    }
+    this._source = `
+      uniform vec4 color;
+      uniform float speed;
+      uniform float count;
+      uniform float gradient;
+      uniform float transparency;
+      uniform float frameNumber;
+
+      czm_material czm_getMaterial(czm_materialInput materialInput)
+      {
+        czm_material material = czm_getDefaultMaterial(materialInput);
+        material.diffuse = 1.5 * color.rgb;
+        vec2 st = materialInput.st;
+        float dis = distance(st, vec2(0.5, 0.5));
+        float per = fract(frameNumber * speed / 30000.0);
+        vec3 str = materialInput.str;
+        if(abs(str.z)  > 0.001){
+          discard;
+        }
+        if(dis > 0.5){
+          discard;
+        }else {
+          ${_sourceColor}
+          float perDis = 0.5 / count;
+            float disNum;
+            float bl = 0.0;
+            for(int i = 0; i <= 99; i++){
+              if(float(i) <= count){
+                disNum = perDis * float(i) - dis + per / count;
+                if(disNum > 0.0){
+                  if(disNum < perDis){
+                    bl = 1.0 - disNum / perDis;
+                  }
+                  else if(disNum - perDis < perDis){
+                    bl = 1.0 - abs(1.0 - disNum / perDis);
+                  }
+                  material.alpha = pow(bl,(1.0 + 10.0 * (1.0 - gradient))) * transparency;
+                }
+              }
+            }
+        }
+        return material;
+      }
+    `
+    this._CircleRippleMaterialType = "CircleRippleMaterialType" + this.id;
+    Cesium.Material._materialCache.addMaterial(
+      this._CircleRippleMaterialType,
+      {
+        fabric: {
+          type: this._CircleRippleMaterialType,
+          uniforms: {
+            color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
+            speed: 3.0,
+            transparency: 1,
+            count: 4,
+            gradient: 0.2,
+            frameNumber: Cesium.getTimestamp(),
+          },
+          source: this._source,
+        },
+        translucent: function (material) {
+          return true;
+        },
+      }
+    );
+  }
+
+  get isConstant() {
+    return false;
+  }
+
+  get definitionChanged() {
+    return this._definitionChanged;
+  }
+
+  getType(time) {
+    return this._CircleRippleMaterialType;
+  }
+
+  getValue(time, result) {
+    if (!Cesium.defined(result)) {
+      result = {};
+    }
+    result.color = Cesium.Property.getValueOrDefault(
+      this._color,
+      time,
+      Cesium.Color.RED,
+      result.color
+    );
+    result.speed = Cesium.Property.getValueOrDefault(
+      this._speed,
+      time,
+      10,
+      result.speed
+    );
+    result.transparency = this.transparency;
+    result.count = this.count;
+    result.gradient = this.gradient;
+    result.frameNumber = Cesium.getTimestamp();
+    return result;
+  }
+
+  equals(other) {
+    return (
+      this === other ||
+      (other instanceof CircleRippleMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color) &&
+        Cesium.Property.equals(this._speed, other._speed) &&
+        Cesium.Property.equals(this.count, other.count) &&
+        Cesium.Property.equals(this.transparency, other.transparency) &&
+        Cesium.Property.equals(this.gradient, other.gradient))
+    );
+  }
+}

src/Obj/Materail/CustomColorMaterialSource.js

@@ -0,0 +1,99 @@
+import Tools from "../../Tools";
+
+function CustomColorMaterialSource() {
+  let tools = new Tools()
+  let _that = this
+  if (typeof Cesium !== 'undefined') (function (Cesium) {
+    /**
+     * 自定义材质线Property 适用于entity和primitive材质
+     * @param {object} options
+     * @param source {string} glsl的shader代码
+     */
+    function CustomMaterialSource(options = {}, source) {
+
+      var Color = Cesium.Color,
+        defaultValue = Cesium.defaultValue,
+        defineProperties = Object.defineProperties,
+        Event = Cesium.Event,
+        createPropertyDescriptor = Cesium.createPropertyDescriptor,
+        Property = Cesium.Property,
+        Material = Cesium.Material,
+        MaterialType = options.MaterialType || 'wallType' + parseInt(Math.random() * 1000);
+
+      // 创建自定义动态材质对象
+      function PolygonCustomMaterialProperty(options = {}) {
+
+        options = defaultValue(options, defaultValue.EMPTY_OBJECT);
+        // 定义内置属性
+        this._definitionChanged = new Event();
+        this._color = undefined;
+        this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(4,253,231,0.87)");
+      }
+
+      // 定义材质对象默认属性
+      defineProperties(PolygonCustomMaterialProperty.prototype, {
+        isvarant: {
+          get: function () {
+            return false;
+          }
+        },
+        definitionChanged: {
+          get: function () {
+            return this._definitionChanged;
+          }
+        },
+        color: createPropertyDescriptor('color')
+      });
+      // 材质对象需要有type函数 value函数 equals函数
+      PolygonCustomMaterialProperty.prototype.getType = function (time) {
+        return MaterialType;
+      };
+      PolygonCustomMaterialProperty.prototype.getValue = function (time, result) {
+        if (!Cesium.defined(result)) {
+          result = {};
+        }
+        result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
+        return result;
+      };
+      PolygonCustomMaterialProperty.prototype.equals = function (other) {
+        return this === other || //
+          (other instanceof PolygonCustomMaterialProperty &&
+            Property.equals(this._color, other._color))
+      };
+      // 将定义的材质对象添加到cesium的材质队列中
+      Material._materialCache.addMaterial(MaterialType, {
+        fabric: {
+          type: MaterialType,
+          uniforms: {
+            color: new Cesium.Color(1.0, 1.0, 1.0, 1),
+          },
+          // 动态材质shader
+          source: 'czm_material czm_getMaterial(czm_materialInput materialInput)\n\
+          {\n\
+              czm_material material = czm_getDefaultMaterial(materialInput);\n\
+              material.alpha = color.a;\n\
+        \n\
+              material.diffuse = color.rgb*0.0;\n\
+              material.emission = color.rgb;\n\
+              \
+              return material;\n\
+          }',
+          components: {
+            specular: 1.0,
+            diffuse: "vec3(0.0)"
+          },
+        },
+        // 透明
+        translucent: function (material) {
+          return true;
+        }
+      })
+      return new PolygonCustomMaterialProperty(options);
+    }
+
+    Cesium.CustomColorMaterialSource = CustomMaterialSource;
+  })(Cesium);
+
+}
+
+export { CustomColorMaterialSource }

src/Obj/Materail/CustomImageMaterialSource.js

@@ -0,0 +1,104 @@
+import Tools from "../../Tools";
+
+function CustomImageMaterialSource() {
+  let tools = new Tools()
+  let _that = this
+  if (typeof Cesium !== 'undefined') (function (Cesium) {
+    /**
+     * 自定义材质线Property 适用于entity和primitive材质
+     * @param {object} options
+     * @param source {string} glsl的shader代码
+     * @param options.image {string} 图片地址
+     */
+    function CustomMaterialSource(options = {}, source) {
+
+      var Color = Cesium.Color,
+        defaultValue = Cesium.defaultValue,
+        defineProperties = Object.defineProperties,
+        Event = Cesium.Event,
+        createPropertyDescriptor = Cesium.createPropertyDescriptor,
+        Property = Cesium.Property,
+        Material = Cesium.Material,
+        MaterialType = options.MaterialType || 'wallType' + parseInt(Math.random() * 1000);
+
+      // 创建自定义动态材质对象
+      function PolylineCustomMaterialProperty(options = {}) {
+
+        options = defaultValue(options, defaultValue.EMPTY_OBJECT);
+        // 定义内置属性
+        this._definitionChanged = new Event();
+        this._color = undefined;
+        this._colorSubscription = undefined;
+        this._repeat = undefined;
+        this._repeatSubscription = undefined;
+        this.image = options.image;
+        this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(4,253,231,0.87)");
+        this.repeat = options.repeat;
+      }
+
+      // 定义材质对象默认属性
+      defineProperties(PolylineCustomMaterialProperty.prototype, {
+        isvarant: {
+          get: function () {
+            return false;
+          }
+        },
+        definitionChanged: {
+          get: function () {
+            return this._definitionChanged;
+          }
+        },
+        repeat: Cesium.createPropertyDescriptor('repeat'),
+        color: createPropertyDescriptor('color')
+      });
+      // 材质对象需要有type函数 value函数 equals函数
+      PolylineCustomMaterialProperty.prototype.getType = function (time) {
+        return MaterialType;
+      };
+      PolylineCustomMaterialProperty.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.image;
+        result.repeat = Cesium.Property.getValueOrDefault(this.repeat);
+        return result;
+      };
+      PolylineCustomMaterialProperty.prototype.equals = function (other) {
+        return this === other || //
+          (other instanceof PolylineCustomMaterialProperty &&
+            Property.equals(this._color, other._color)) &&
+          Property.equals(this.repeat, other._repeat)
+      };
+      // 将定义的材质对象添加到cesium的材质队列中
+      Material._materialCache.addMaterial(MaterialType, {
+        fabric: {
+          type: MaterialType,
+          uniforms: {
+            color: new Cesium.Color(1.0, 1.0, 1.0, 1),
+            image: options.image || tools.getSourceRootPath() + "/img/material/arrow.png",
+            repeat: new Cesium.Cartesian2(100.0, 100.0),
+          },
+          // 动态材质shader
+          source: 'czm_material czm_getMaterial(czm_materialInput materialInput)\n\
+          {\n\
+              czm_material material = czm_getDefaultMaterial(materialInput);\n\
+              vec2 st = repeat * materialInput.st;\n\
+              vec4 colorImage = texture(image, st);\n\
+        \n\
+              material.diffuse = colorImage.rgb * 0.0;\n\
+              material.emission = colorImage.rgb * 0.3;\n\
+              \
+              return material;\n\
+          }',
+        },
+      })
+      return new PolylineCustomMaterialProperty(options);
+    }
+
+    Cesium.CustomImageMaterialSource = CustomMaterialSource;
+  })(Cesium);
+
+}
+
+export { CustomImageMaterialSource }

src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js

@@ -0,0 +1,159 @@
+/*
+ * @Description: 流动线
+ */
+function FlowDashedLine() {
+  class FlowDashedLineFlowMaterialProperty {
+    constructor(options) {
+      this._definitionChanged = new Cesium.Event();
+      this._color = undefined;
+      this._speed = undefined;
+      this._uType = undefined;
+      this._space = undefined;
+      this._dashSize = undefined;
+      this._scale = undefined;
+      this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
+      this.speed = options.speed != undefined ? options.speed : 1.0;//速度
+      this.space = options.space || 0.0;//速度
+      this.dashSize = options.dashSize || 0.03;//速度
+      this.uType = options.uType === undefined ? 1 : options.uType;//类型：0：普通流动线 1：虚化虚线
+      this.lineBackAlpha = options.lineBackAlpha || 0.05;
+      this.scale = options.scale || 1.0;
+    }
+
+    get isConstant() {
+      return false;
+    }
+
+    get definitionChanged() {
+      return this._definitionChanged;
+    }
+
+    getType(time) {
+      return Cesium.Material.FlowDashedLineMaterialType;
+    }
+
+    getValue(time, result) {
+      if (!Cesium.defined(result)) {
+        result = {};
+      }
+
+      result.color = Cesium.Property.getValueOrDefault(
+        this._color,
+        time,
+        Cesium.Color.RED,
+        result.color
+      );
+      result.speed = Cesium.Property.getValueOrDefault(
+        this._speed,
+        time,
+        10,
+        result.speed
+      );
+      result.space = Cesium.Property.getValueOrDefault(
+        this._space,
+        time,
+        10,
+        result.space
+      );
+      result.dashSize = Cesium.Property.getValueOrDefault(
+        this._dashSize,
+        time,
+        10,
+        result.dashSize
+      );
+      result.uType = Cesium.Property.getValueOrDefault(
+        this._uType,
+        time,
+        1,
+        result.uType
+      );
+      result.scale = Cesium.Property.getValueOrDefault(
+        this._scale,
+        time,
+        1.0,
+        result.scale
+      );
+      result.lineBackAlpha = this.lineBackAlpha;
+      result.frameNumber = Cesium.getTimestamp();
+      return result;
+    }
+
+    equals(other) {
+      return (
+        this === other ||
+        (other instanceof FlowDashedLineFlowMaterialProperty &&
+          Cesium.Property.equals(this._color, other._color) &&
+          Cesium.Property.equals(this._speed, other.speed) &&
+          Cesium.Property.equals(this._uType, other.uType) &&
+          Cesium.Property.equals(this._lineBackAlpha, other.lineBackAlpha) &&
+          Cesium.Property.equals(this._scale, other.scale))
+      );
+    }
+  }
+
+  Object.defineProperties(FlowDashedLineFlowMaterialProperty.prototype, {
+    color: Cesium.createPropertyDescriptor("color"),
+    speed: Cesium.createPropertyDescriptor("speed"),
+    space: Cesium.createPropertyDescriptor("space"),
+    dashSize: Cesium.createPropertyDescriptor("dashSize"),
+    uType: Cesium.createPropertyDescriptor("uType"),
+    transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
+    scale: Cesium.createPropertyDescriptor("scale"),
+  });
+
+  Cesium.FlowDashedLineFlowMaterialProperty = FlowDashedLineFlowMaterialProperty;
+  Cesium.Material.FlowDashedLineFlowMaterialProperty = "FlowDashedLineFlowMaterialProperty";
+  Cesium.Material.FlowDashedLineMaterialType = "FlowDashedLineMaterialType";
+  Cesium.Material.FlowDashedLineMaterialSource = `
+      uniform vec4 color;
+      uniform float speed;
+      // uniform int uType;
+      uniform float lineBackAlpha;
+
+      czm_material czm_getMaterial(czm_materialInput materialInput)
+        {
+            czm_material material = czm_getDefaultMaterial(materialInput);
+            vec2 st = materialInput.st;
+
+            float dashSize = 0.1;
+            float gapSize = space;
+            // speed现在表示完成一次完整动画循环的秒数
+            float progress = speed==0.0 ? 0.0 : fract(frameNumber / 1000.0 / speed * scale);
+            float pattern = fract(st.x / dashSize * (1.0 + gapSize) + progress / dashSize * (1.0 + gapSize));
+            float dash1 = step(0.0, pattern) - step(1.0/(1.0 + gapSize), pattern);
+            float dash2 = smoothstep(0.0, 0.2, pattern) -
+                smoothstep(1.0/(1.0 + gapSize),
+                        1.0/(1.0 + gapSize) + 0.2,
+                        pattern);
+            float dash = (float(uType) != 1.0)?dash1:dash2;
+            material.alpha = dash;
+            material.diffuse = color.rgb;
+            return material;
+        }
+       `;
+
+  Cesium.Material._materialCache.addMaterial(
+    Cesium.Material.FlowDashedLineMaterialType,
+    {
+      fabric: {
+        type: Cesium.Material.FlowDashedLineMaterialType,
+        uniforms: {
+          color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
+          speed: 1,
+          space: 0.0,
+          scale: 1.0,
+          dashSize: 0.03,
+          frameNumber: Cesium.getTimestamp(),
+          uType: 1,
+          lineBackAlpha: 0.05,
+        },
+        source: Cesium.Material.FlowDashedLineMaterialSource,
+      },
+      translucent: function (material) {
+        return true;
+      },
+    }
+  );
+}
+
+export { FlowDashedLine }

src/Obj/Materail/FlowLineMaterialProperty.js

@@ -0,0 +1,113 @@
+/*
+ * @Description: 流动线
+ */
+function FlowLine() {
+  class FlowLineMaterialProperty {
+    constructor(options) {
+      this._definitionChanged = new Cesium.Event();
+      this._color = undefined;
+      this._duration = undefined;
+      this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
+      this.duration = options.duration || 10.0;
+      this.lineBackAlpha = options.lineBackAlpha || 0.05;
+    }
+
+    get isConstant() {
+      return false;
+    }
+
+    get definitionChanged() {
+      return this._definitionChanged;
+    }
+
+    getType(time) {
+      return Cesium.Material.FlowLineMaterialType;
+    }
+
+    getValue(time, result) {
+      if (!Cesium.defined(result)) {
+        result = {};
+      }
+
+      result.color = Cesium.Property.getValueOrDefault(
+        this._color,
+        time,
+        Cesium.Color.RED,
+        result.color
+      );
+      result.duration = Cesium.Property.getValueOrDefault(
+        this._duration,
+        time,
+        10,
+        result.duration
+      );
+      result.lineBackAlpha = this.lineBackAlpha;
+      result.frameNumber = Cesium.getTimestamp();
+      return result;
+    }
+
+    equals(other) {
+      return (
+        this === other ||
+        (other instanceof FlowLineMaterialProperty &&
+          Cesium.Property.equals(this._color, other._color) &&
+          Cesium.Property.equals(this._duration, other.duration) &&
+          Cesium.Property.equals(this.lineBackAlpha, other.lineBackAlpha))
+      );
+    }
+  }
+
+  Object.defineProperties(FlowLineMaterialProperty.prototype, {
+    color: Cesium.createPropertyDescriptor("color"),
+    duration: Cesium.createPropertyDescriptor("duration"),
+    transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
+  });
+
+  Cesium.FlowLineMaterialProperty = FlowLineMaterialProperty;
+  Cesium.Material.FlowLineMaterialProperty = "FlowLineMaterialProperty";
+  Cesium.Material.FlowLineMaterialType = "FlowLineMaterialType";
+  Cesium.Material.FlowLineMaterialSource = `
+      uniform vec4 color;
+      uniform float duration;
+      uniform float lineBackAlpha;
+
+      czm_material czm_getMaterial(czm_materialInput materialInput)
+        {
+            //生成默认的基础材质
+            czm_material material = czm_getDefaultMaterial(materialInput);
+            //获取st（uv）
+            vec2 st = materialInput.st;
+            //获取当前帧数，10秒内变化0-1
+            float time = fract(czm_frameNumber / (60.0*duration));
+            //长度1/10
+            time = time * (1.0 + 0.1);
+            //平滑过渡函数
+            float alpha = smoothstep(time-0.1,time,st.s) * step(-time,-st.s);
+            //光带轨迹（不会完全透明）
+            alpha += lineBackAlpha;
+            material.alpha = alpha;
+            material.diffuse = color.rgb;
+            return material;
+        }
+       `;
+
+  Cesium.Material._materialCache.addMaterial(
+    Cesium.Material.FlowLineMaterialType,
+    {
+      fabric: {
+        type: Cesium.Material.FlowLineMaterialType,
+        uniforms: {
+          color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
+          duration: 10.0,
+          lineBackAlpha: 0.05,
+        },
+        source: Cesium.Material.FlowLineMaterialSource,
+      },
+      translucent: function (material) {
+        return true;
+      },
+    }
+  );
+}
+
+export { FlowLine }

src/Obj/Materail/FlowPictureMaterialProperty.js

@@ -0,0 +1,103 @@
+/**
+ * @Description: 流动纹理/图片材质
+ */
+export default class FlowPictureMaterialProperty {
+  constructor(options) {
+    if(!FlowPictureMaterialProperty.prototype.hasOwnProperty('color')) {
+      Object.defineProperties(FlowPictureMaterialProperty.prototype, {
+        repeat: Cesium.createPropertyDescriptor('repeat'),
+        color: Cesium.createPropertyDescriptor('color')
+      })
+    }
+    
+    // Cesium.FlowPictureMaterialProperty = FlowPictureMaterialProperty;
+    Cesium.Material.FlowPictureMaterialProperty = 'FlowPictureMaterialProperty';
+    Cesium.Material.FlowPictureMaterialType = 'FlowPictureMaterialType';
+    Cesium.Material.FlowPictureMaterialSource =
+      `
+        czm_material czm_getMaterial(czm_materialInput materialInput)
+        {
+          czm_material material = czm_getDefaultMaterial(materialInput);
+          vec2 st = repeat*materialInput.st;
+          vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));
+          material.alpha = colorImage.a * color.a;
+          material.diffuse = (colorImage.rgb+color.rgb)/2.0;
+          // material.alpha = colorImage.a;
+          // material.diffuse = (colorImage.rgb+color.rgb)/1.0;
+          return material;
+        }
+      `
+
+
+    Cesium.Material._materialCache.addMaterial(Cesium.Material.FlowPictureMaterialType, {
+      fabric: {
+        type: Cesium.Material.FlowPictureMaterialType,
+        uniforms: {
+          color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
+          time: 0,
+          image: '',
+          repeat: new Cesium.Cartesian2(100.0, 100.0),
+        },
+        source: Cesium.Material.FlowPictureMaterialSource
+      },
+      translucent: function (material) {
+        return true;
+      }
+    })
+
+    this._definitionChanged = new Cesium.Event();
+    this._color = undefined;
+    this._colorSubscription = undefined;
+    this._repeat = undefined;
+    this._repeatSubscription = undefined;
+    this.image = options.image;
+    this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(4,253,231,0.87)");
+    this.repeat = options.repeat;
+    this.duration = options.duration;
+    this._time = (new Date()).getTime();
+  };
+
+  get isConstant() {
+    return false;
+  }
+
+  get definitionChanged() {
+    return this._definitionChanged;
+  }
+
+  getType(time) {
+    return Cesium.Material.FlowPictureMaterialType;
+  }
+
+  getValue(time, result) {
+    if (!Cesium.defined(result)) {
+      result = {};
+    }
+    result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
+    result.color = Cesium.Property.getValueOrDefault(this._color, time, Cesium.Color.WHITE, result.color);
+    // result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
+    result.image = this.image;
+    result.repeat = Cesium.Property.getValueOrDefault(this.repeat);
+    return result
+  }
+
+  equals(other) {
+    return (this === other ||
+      (other instanceof FlowPictureMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color)) &&
+        Cesium.Property.equals(this.repeat, other._repeat)
+    )
+  }
+}
+
+
+
+
+// ? 如何使用
+// import FlowPictureMaterialProperty from '@/utils/Material/FlowPictureMaterialProperty.js'
+
+// material: new FlowPictureMaterialProperty({
+//   color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
+//   image: '/src/assets/images/cat.png',
+//   duration: 3000,
+// })

src/Obj/Materail/LineTextureMaterialProperty.js

@@ -0,0 +1,123 @@
+/*
+ * @Description: 流动线
+ */
+function LineTexture() {
+  class LineTextureMaterialProperty {
+    constructor(options) {
+      this._definitionChanged = new Cesium.Event();
+      this._image = undefined;
+      this._color = undefined;
+      this._speed = undefined;
+      this._repeat = undefined;
+      this.image = options.image || "";
+      this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
+      this.speed = options.speed != undefined ? options.speed : 1.0;
+      this.repeat = options.repeat || new Cesium.Cartesian2(1.0, 1.0);
+    }
+
+    get isConstant() {
+      return false;
+    }
+
+    get definitionChanged() {
+      return this._definitionChanged;
+    }
+
+    getType(time) {
+      return Cesium.Material.LineTextureMaterialType;
+    }
+
+    getValue(time, result) {
+      if (!Cesium.defined(result)) {
+        result = {};
+      }
+      result.image = Cesium.Property.getValueOrDefault(
+        this._image,
+        time,
+        "",
+        result.image
+      );
+      result.color = Cesium.Property.getValueOrDefault(
+        this._color,
+        time,
+        Cesium.Color.RED,
+        result.color
+      );
+      result.speed = Cesium.Property.getValueOrDefault(
+        this._speed,
+        time,
+        1.0,
+        result.speed
+      );
+      result.repeat = Cesium.Property.getValueOrDefault(
+        this._repeat,
+        time,
+        new Cesium.Cartesian2(1.0, 1.0),
+        result.repeat
+      );
+      result.frameNumber = Cesium.getTimestamp();
+      return result;
+    }
+
+    equals(other) {
+      return (
+        this === other ||
+        (other instanceof LineTextureMaterialProperty &&
+          Cesium.Property.equals(this._image, other._image) &&
+          Cesium.Property.equals(this._color, other._color) &&
+          Cesium.Property.equals(this._imageW, other._imageW) &&
+          Cesium.Property.equals(this._speed, other._speed))
+      );
+    }
+  }
+
+  Object.defineProperties(LineTextureMaterialProperty.prototype, {
+    image: Cesium.createPropertyDescriptor("image"),
+    color: Cesium.createPropertyDescriptor("color"),
+    speed: Cesium.createPropertyDescriptor("speed"),
+    repeat: Cesium.createPropertyDescriptor("repeat"),
+  });
+
+  Cesium.LineTextureMaterialProperty = LineTextureMaterialProperty;
+  Cesium.Material.LineTextureMaterialProperty = "LineTextureMaterialProperty";
+  Cesium.Material.LineTextureMaterialType = "LineTextureMaterialType";
+  Cesium.Material.LineTextureMaterialSource = `
+        uniform vec4 color;
+        uniform sampler2D image;
+        uniform float speed;
+        // uniform float repeat;
+        czm_material czm_getMaterial(czm_materialInput materialInput)
+        {
+          czm_material material = czm_getDefaultMaterial(materialInput);
+          vec2 st = materialInput.st;
+          st.s *= repeat.x; // 关键：通过repeat控制纹理密度
+          // vec4 colorImage = texture2D(image, vec2(fract(st.s + speed*czm_frameNumber* 0.01), st.t));
+          vec4 colorImage = speed==0.0?texture2D(image, vec2(fract(st.s), st.t)):texture2D(image, vec2(fract(st.s + frameNumber / 1000.0 / speed * repeat.x / repeat.y ), st.t));
+          material.alpha = colorImage.a * color.a;
+          material.diffuse = color.rgb;
+          return material;
+        }
+       `;
+  Cesium.Material._materialCache.addMaterial(
+    Cesium.Material.LineTextureMaterialType,
+    {
+      fabric: {
+        type: Cesium.Material.LineTextureMaterialType,
+        uniforms: {
+          color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
+          image: '',
+          repeat: new Cesium.Cartesian2(1.0, 1.0),
+          speed: 1.0,
+          frameNumber: Cesium.getTimestamp(),
+          uTime: 1
+        },
+        source: Cesium.Material.LineTextureMaterialSource,
+      },
+      translucent: function (material) {
+        return true;
+      },
+    }
+  );
+}
+
+export { LineTexture }

src/Obj/Materail/MaterialProperty.js

@@ -0,0 +1,34 @@
+class MaterialProperty {
+  constructor(options = {}) {
+    this._definitionChanged = new Cesium.Event();
+    this._color = undefined;
+    this._colorSubscription = undefined;
+    this._speed = undefined;
+    this._speedSubscription = undefined;
+    this.color = options.color || Cesium.Color.fromBytes(0, 255, 255, 255);
+    this.speed = options.speed || 1;
+  }
+ 
+  get isConstant() {
+    return false;
+  }
+ 
+  get definitionChanged() {
+    return this._definitionChanged;
+  }
+ 
+  getType(time) {
+    return null;
+  }
+ 
+  getValue(time, result) {
+    result = Cesium.defaultValue(result, {});
+    return result;
+  }
+ 
+  equals(other) {
+    return this === other;
+  }
+}
+ 
+export default MaterialProperty;

src/Obj/Materail/PolylineFlowMaterialProperty.js

@@ -0,0 +1,131 @@
+/*
+ * @Description: 流动线
+ */
+function PolylineFlow() {
+  class PolylineFlowMaterialProperty {
+    constructor(options) {
+      this._definitionChanged = new Cesium.Event();
+      this._color = undefined;
+      this._speed = undefined;
+      this._rotate = undefined;
+      this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
+      this.speed = options.speed != undefined ? options.speed : 1.0;//速度
+      this.lineBackAlpha = options.lineBackAlpha || 0.05;
+      this.rotate = options.rotate;
+    }
+
+    get isConstant() {
+      return false;
+    }
+
+    get definitionChanged() {
+      return this._definitionChanged;
+    }
+
+    getType(time) {
+      return Cesium.Material.PolylineFlowMaterialType;
+    }
+
+    getValue(time, result) {
+      if (!Cesium.defined(result)) {
+        result = {};
+      }
+
+      result.color = Cesium.Property.getValueOrDefault(
+        this._color,
+        time,
+        Cesium.Color.RED,
+        result.color
+      );
+      result.speed = Cesium.Property.getValueOrDefault(
+        this._speed,
+        time,
+        10,
+        result.speed
+      );
+      result.rotate = Cesium.Property.getValueOrDefault(
+        this._rotate,
+        time,
+        true,
+        result.rotate
+      );
+      result.lineBackAlpha = this.lineBackAlpha;
+      result.frameTime = Cesium.getTimestamp();
+      // result.frameNumber = Cesium.getTimestamp();
+      return result;
+    }
+
+    equals(other) {
+      return (
+        this === other ||
+        (other instanceof PolylineFlowMaterialProperty &&
+          Cesium.Property.equals(this._color, other._color) &&
+          Cesium.Property.equals(this._speed, other.speed) &&
+          Cesium.Property.equals(this.lineBackAlpha, other.lineBackAlpha))
+      );
+    }
+  }
+
+  Object.defineProperties(PolylineFlowMaterialProperty.prototype, {
+    color: Cesium.createPropertyDescriptor("color"),
+    speed: Cesium.createPropertyDescriptor("speed"),
+    rotate: Cesium.createPropertyDescriptor("rotate"),
+    transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
+  });
+
+  Cesium.PolylineFlowMaterialProperty = PolylineFlowMaterialProperty;
+  Cesium.Material.PolylineFlowMaterialProperty = "PolylineFlowMaterialProperty";
+  Cesium.Material.PolylineFlowMaterialType = "PolylineFlowMaterialType";
+  Cesium.Material.PolylineFlowMaterialSource = `
+      uniform vec4 color;
+      uniform float speed;
+      uniform float lineBackAlpha;
+
+      czm_material czm_getMaterial(czm_materialInput materialInput)
+        {
+            //生成默认的基础材质
+            czm_material material = czm_getDefaultMaterial(materialInput);
+            //获取st（uv）
+            vec2 st = materialInput.st;
+            //获取当前帧数，10秒内变化0-1
+            // float time = fract(czm_frameNumber * speed / 60.0);
+            // float time = fract(abs(speed) * czm_frameNumber * 0.01);
+            float time = fract(frameTime / 1000.0  / abs(speed));
+            //长度1/10
+            // time = time * (1.0 + 0.1);
+            float staticAlpha = rotate?smoothstep(0.0,1.0, 1.0-st.s) * step(-1.0,-(1.0-st.s)):smoothstep(0.0,1.0, st.s) * step(-1.0,-st.s);
+
+            //平滑过渡函数
+            float alpha1 = smoothstep(time-0.1,time,1.0-st.s) * step(-time,- (1.0-st.s));
+            float alpha2 = smoothstep(time-0.1,time,st.s) * step(-time,- st.s);
+            float alpha =(speed== 0.0)? staticAlpha:(speed < 0.0)?alpha2:alpha1;
+            //光带轨迹（不会完全透明）
+            alpha += lineBackAlpha;
+            material.alpha = alpha;
+            material.diffuse = color.rgb;
+            return material;
+        }
+       `;
+
+  Cesium.Material._materialCache.addMaterial(
+    Cesium.Material.PolylineFlowMaterialType,
+    {
+      fabric: {
+        type: Cesium.Material.PolylineFlowMaterialType,
+        uniforms: {
+          color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
+          speed: 0.1,
+          rotate: true,
+          frameTime: Cesium.getTimestamp(),
+          lineBackAlpha: 0.05,
+        },
+        source: Cesium.Material.PolylineFlowMaterialSource,
+      },
+      translucent: function (material) {
+        return true;
+      },
+    }
+  );
+}
+
+export { PolylineFlow }

src/Obj/Materail/PolylineFlowMultMaterialProperty.js

@@ -0,0 +1,167 @@
+/*
+ * @Description: 流动线
+ */
+function PolylineFlowMult() {
+  class PolylineFlowMultMaterialProperty {
+    constructor(options) {
+      this._definitionChanged = new Cesium.Event();
+      this._color = undefined;
+      this._speed = undefined;
+      this._rotate = undefined;
+      this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
+      this.speed = options.speed != undefined ? options.speed : 1.0;//速度
+      this.lineBackAlpha = options.lineBackAlpha || 0.05;
+      this.rotate = options.rotate;
+    }
+
+    get isConstant() {
+      return false;
+    }
+
+    get definitionChanged() {
+      return this._definitionChanged;
+    }
+
+    getType(time) {
+      return Cesium.Material.PolylineFlowMultMaterialType;
+    }
+
+    getValue(time, result) {
+      if (!Cesium.defined(result)) {
+        result = {};
+      }
+
+      result.color = Cesium.Property.getValueOrDefault(
+        this._color,
+        time,
+        Cesium.Color.RED,
+        result.color
+      );
+      result.speed = Cesium.Property.getValueOrDefault(
+        this._speed,
+        time,
+        10,
+        result.speed
+      );
+      result.rotate = Cesium.Property.getValueOrDefault(
+        this._rotate,
+        time,
+        true,
+        result.rotate
+      );
+      result.lineBackAlpha = this.lineBackAlpha;
+      result.frameTime = Cesium.getTimestamp();
+      return result;
+    }
+
+    equals(other) {
+      return (
+        this === other ||
+        (other instanceof PolylineFlowMultMaterialProperty &&
+          Cesium.Property.equals(this._color, other._color) &&
+          Cesium.Property.equals(this._speed, other.speed) &&
+          Cesium.Property.equals(this._rotate, other.rotate) &&
+          Cesium.Property.equals(this.lineBackAlpha, other.lineBackAlpha))
+      );
+    }
+  }
+
+  Object.defineProperties(PolylineFlowMultMaterialProperty.prototype, {
+    color: Cesium.createPropertyDescriptor("color"),
+    speed: Cesium.createPropertyDescriptor("speed"),
+    rotate: Cesium.createPropertyDescriptor("rotate"),
+    transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
+  });
+
+  Cesium.PolylineFlowMultMaterialProperty = PolylineFlowMultMaterialProperty;
+  Cesium.Material.PolylineFlowMultMaterialProperty = "PolylineFlowMultMaterialProperty";
+  Cesium.Material.PolylineFlowMultMaterialType = "PolylineFlowMultMaterialType";
+  Cesium.Material.PolylineFlowMaterialSource = `
+      uniform vec4 color;
+      uniform float speed;
+      uniform float lineBackAlpha;
+
+      czm_material czm_getMaterial(czm_materialInput materialInput)
+        {
+            czm_material material = czm_getDefaultMaterial(materialInput);
+            vec2 st = materialInput.st;
+
+            // 基础时间轴（控制主光带）
+            float baseTime = fract(czm_frameNumber * speed / 60.0) * 1.1;
+
+            // 高频时间轴（控制高光点）
+            // float highlightTime = fract(czm_frameNumber * speed * 3.0 / 60.0);
+            // float highlightTime = fract(abs(speed) * czm_frameNumber * 0.01);
+            float highlightTime = fract(frameTime / 1000.0  / abs(speed));
+            float highlightSpacing = 0.3; // 高光点间隔
+
+            // 主光带透明度计算
+            float mainAlpha = smoothstep(baseTime-0.1, baseTime, st.s) * step(-baseTime, -st.s);
+
+            // 多高光点计算（3个周期性光斑）
+            float highlight11 = smoothstep(highlightTime-0.05, highlightTime, st.s) *
+                              step(-highlightTime, -st.s) *
+                              (1.0 - smoothstep(0.0, highlightSpacing, abs(st.s - highlightTime)));
+
+            float highlight21 = smoothstep(highlightTime+highlightSpacing-0.05,
+                                        highlightTime+highlightSpacing, st.s) *
+                              step(-(highlightTime+highlightSpacing), -st.s) *
+                              (1.0 - smoothstep(0.0, highlightSpacing, abs(st.s - (highlightTime+highlightSpacing))));
+
+            float highlight31 = smoothstep(highlightTime+2.0*highlightSpacing-0.05,
+                                        highlightTime+2.0*highlightSpacing, st.s) *
+                              step(-(highlightTime+2.0*highlightSpacing), -st.s) *
+                              (1.0 - smoothstep(0.0, highlightSpacing, abs(st.s - (highlightTime+2.0*highlightSpacing))));
+
+
+            float highlight12 = smoothstep(highlightTime-0.05, highlightTime, 1.0 - st.s) *
+                              step(-highlightTime, -(1.0-st.s)) *
+                              (1.0 - smoothstep(0.0, highlightSpacing, abs(1.0 - st.s - highlightTime)));
+
+            float highlight22 = smoothstep(highlightTime+highlightSpacing-0.05,
+                               highlightTime+highlightSpacing, 1.0 - st.s) *
+                              step(-(highlightTime+highlightSpacing),-(1.0 - st.s)) *
+                              (1.0 - smoothstep(0.0, highlightSpacing, abs(1.0-st.s - (highlightTime+highlightSpacing))));
+
+            float highlight32 = smoothstep(highlightTime+2.0*highlightSpacing-0.05,
+                              highlightTime+2.0*highlightSpacing, 1.0 - st.s) *
+                              step(-(highlightTime+2.0*highlightSpacing), -(1.0-st.s)) *
+                              (1.0 - smoothstep(0.0, highlightSpacing, abs(1.0 - st.s - (highlightTime+2.0*highlightSpacing))));
+
+
+            float highlight1 = !rotate?highlight11:highlight12;
+            float highlight2 = !rotate?highlight21:highlight22;
+            float highlight3 = !rotate?highlight31:highlight32;
+            // 合并效果
+            // material.alpha = mainAlpha * 0.7 +
+            //                 (highlight1 + highlight2 + highlight3) * 0.5 +
+            //                 lineBackAlpha;
+            material.alpha = (highlight1 + highlight2 + highlight3) * 0.5 +
+                            lineBackAlpha;
+            material.diffuse = color.rgb; // 高光区变亮
+            return material;
+        }
+       `;
+
+  Cesium.Material._materialCache.addMaterial(
+    Cesium.Material.PolylineFlowMultMaterialType,
+    {
+      fabric: {
+        type: Cesium.Material.PolylineFlowMultMaterialType,
+        uniforms: {
+          color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
+          speed: 0.1,
+          rotate: true,
+          frameTime: Cesium.getTimestamp(),
+          lineBackAlpha: 0.05,
+        },
+        source: Cesium.Material.PolylineFlowMaterialSource,
+      },
+      translucent: function (material) {
+        return true;
+      },
+    }
+  );
+}
+
+export { PolylineFlowMult }

src/Obj/Materail/PolylineImageTrailMaterialProperty.js

@@ -0,0 +1,111 @@
+/**
+ * @description 测试
+ */
+import MaterialProperty from "./MaterialProperty";
+ 
+
+ 
+class PolylineImageTrailMaterialProperty extends MaterialProperty {
+  constructor(options = {}) {
+    super(options);
+    /**
+ * 定义Cesium材质对象
+ */
+Cesium.Material.PolylineImageTrailType = "PolylineImageTrail";
+Cesium.Material._materialCache.addMaterial(
+  Cesium.Material.PolylineImageTrailType,
+  {
+    fabric: {
+      type: Cesium.Material.PolylineImageTrailType,
+      uniforms: {
+        color: new Cesium.Color(1.0, 0.0, 0.0, 0.1),
+        image: Cesium.Material.DefaultImageId,
+        speed: 1,
+        repeat: new Cesium.Cartesian2(1, 1),
+        rotate: 0
+      },
+      source: `uniform sampler2D image; 
+      uniform float speed;
+      uniform vec4 color;
+      uniform vec2 repeat;
+      
+      czm_material czm_getMaterial(czm_materialInput materialInput){
+        czm_material material=czm_getDefaultMaterial(materialInput);
+        mat2 rotationMatrix = mat2(cos(radians(-rotate)), sin(radians(-rotate)), -sin(radians(-rotate)), cos(radians(-rotate)));
+        vec2 st=repeat*materialInput.st*rotationMatrix;
+        float time=fract(czm_frameNumber);
+        vec4 colorImage=texture2D(image,vec2(fract(st.s-time),st.t));
+        material.alpha=colorImage.a;
+          material.diffuse=colorImage.rgb;
+        return material;
+      }`,
+    },
+    isTranslucent: function () {
+      return true;
+    },
+  }
+);
+// Object.defineProperties(PolylineImageTrailMaterialProperty.prototype, {
+//   color: Cesium.createPropertyDescriptor("color"),
+//   speed: Cesium.createPropertyDescriptor("speed"),
+//   image: Cesium.createPropertyDescriptor("image"),
+//   repeat: Cesium.createPropertyDescriptor("repeat"),
+// });
+    this._image = undefined;
+    this._imageSubscription = undefined;
+    this._repeat = undefined;
+    this._repeatSubscription = undefined;
+    this.image = options.image;
+    this.repeat = new Cesium.Cartesian2(
+      options.repeat?.x || 1,
+      options.repeat?.y || 1
+    );
+    this.rotate = options.rotate
+    let i=1
+    // setInterval(() => {
+    //   this.repeat = new Cesium.Cartesian2(
+    //     i++,
+    //     options.repeat?.y || 1
+    //   );
+    //   console.log(this.repeat)
+    // }, 1000);
+    // setInterval(() => {
+    //   this.rotate ++
+    // }, 100);
+  }
+ 
+  getType() {
+    return Cesium.Material.PolylineImageTrailType;
+  }
+ 
+  getValue(time, result) {
+    if (!result) {
+      result = {};
+    }
+    
+    
+    result.color = this.color;
+    result.image = this.image;
+    result.repeat = this.repeat;
+    result.speed = this.speed;
+    result.rotate = this.rotate
+    // console.log(result.repeat)
+    return result;
+  }
+ 
+  equals(other) {
+    return (
+      this === other ||
+      (other instanceof PolylineImageTrailMaterialProperty &&
+        Cesium.Property.equals(this.color, other._color) &&
+        Cesium.Property.equals(this.image, other._image) &&
+        Cesium.Property.equals(this.repeat, other._repeat) &&
+        Cesium.Property.equals(this.speed, other._speed) &&
+        Cesium.Property.equals(this.rotate, other._rotate))
+    );
+  }
+}
+ 
+
+ 
+export default PolylineImageTrailMaterialProperty;

src/Obj/Materail/RadarScanMaterialProperty.js

@@ -0,0 +1,122 @@
+/*
+ * @Description: 雷达扫描效果
+ */
+function RadarScan() {
+  class RadarScanMaterialProperty {
+    constructor(options) {
+      this._definitionChanged = new Cesium.Event();
+      this._color = undefined;
+      this._speed = undefined;
+      this.color = options.color;
+      this.speed = options.speed;
+      this.transparency = options.transparency;
+    }
+
+    get isConstant() {
+      return false;
+    }
+
+    get definitionChanged() {
+      return this._definitionChanged;
+    }
+
+    getType(time) {
+      return Cesium.Material.RadarScanMaterialType;
+    }
+
+    getValue(time, result) {
+      if (!Cesium.defined(result)) {
+        result = {};
+      }
+
+      result.color = Cesium.Property.getValueOrDefault(
+        this._color,
+        time,
+        Cesium.Color.RED,
+        result.color
+      );
+      result.speed = Cesium.Property.getValueOrDefault(
+        this._speed,
+        time,
+        10,
+        result.speed
+      );
+      result.transparency = this.transparency;
+      result.frameNumber = Cesium.getTimestamp();
+      return result;
+    }
+
+    equals(other) {
+      return (
+        this === other ||
+        (other instanceof RadarScanMaterialProperty &&
+          Cesium.Property.equals(this._color, other._color) &&
+          Cesium.Property.equals(this._speed, other._speed) &&
+          Cesium.Property.equals(this.transparency, other.transparency))
+      );
+    }
+  }
+
+  Object.defineProperties(RadarScanMaterialProperty.prototype, {
+    color: Cesium.createPropertyDescriptor("color"),
+    speed: Cesium.createPropertyDescriptor("speed"),
+    transparency: Cesium.createPropertyDescriptor("transparency"),
+  });
+
+  Cesium.RadarScanMaterialProperty = RadarScanMaterialProperty;
+  Cesium.Material.RadarScanMaterialProperty = "RadarScanMaterialProperty";
+  Cesium.Material.RadarScanMaterialType = "RadarScanMaterialType";
+  Cesium.Material.RadarScanMaterialSource = `
+      uniform vec4 color;
+      uniform float speed;
+      uniform float transparency;
+      uniform float frameNumber;
+  
+      #define PI 3.14159265359
+  
+      czm_material czm_getMaterial(czm_materialInput materialInput){
+      czm_material material = czm_getDefaultMaterial(materialInput);
+      vec2 st = materialInput.st;
+      vec2 scrPt = st * 2.0 - 1.0;
+      float time = frameNumber * speed / 30000.0 ;
+      vec3 col = vec3(0.0);
+      mat2 rot;
+      float theta = -time * 1.0 * PI - 2.2;
+      float cosTheta, sinTheta;
+      cosTheta = cos(theta);
+      sinTheta = sin(theta);
+      rot[0][0] = cosTheta;
+      rot[0][1] = -sinTheta;
+      rot[1][0] = sinTheta;
+      rot[1][1] = cosTheta;
+      vec2 scrPtRot = rot * scrPt;
+      float angle = 1.0 - (atan(scrPtRot.y, scrPtRot.x) / 6.2831 + 0.5);
+      float falloff = length(scrPtRot);
+      material.alpha = pow(length(col + vec3(.5)),5.0) * transparency * 0.6;
+      material.diffuse =  (0.5 +  pow(angle, 2.0) * falloff ) *   color.rgb    ;
+      return material;
+      }
+  
+       `;
+
+  Cesium.Material._materialCache.addMaterial(
+    Cesium.Material.RadarScanMaterialType,
+    {
+      fabric: {
+        type: Cesium.Material.RadarScanMaterialType,
+        uniforms: {
+          color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
+          speed: 10.0,
+          transparency: 1,
+          frameNumber: Cesium.getTimestamp(),
+        },
+        source: Cesium.Material.RadarScanMaterialSource,
+      },
+      translucent: function (material) {
+        return true;
+      },
+    }
+  );
+}
+
+export { RadarScan }

src/Obj/Materail/RoadTextureMaterialProperty.js

@@ -0,0 +1,113 @@
+/*
+ * @Description: 流动线
+ */
+function RoadTexture() {
+  class RoadTextureMaterialProperty {
+    constructor(options) {
+      this._definitionChanged = new Cesium.Event();
+      this._image = undefined;
+      this._repeat = undefined;
+      this._stRotation = undefined;
+      this._repeatLength = undefined;
+      this.image = options.image || "";
+      this.repeat = options.repeat || 1.0;
+      this.stRotation = options.stRotation || 0.0;
+      // this.rotations = options.rotations || new Array(100).fill(0.0);
+    }
+
+    get isConstant() {
+      return false;
+    }
+
+    get definitionChanged() {
+      return this._definitionChanged;
+    }
+
+    getType(time) {
+      return Cesium.Material.RoadTextureMaterialType;
+    }
+
+    getValue(time, result) {
+      if (!Cesium.defined(result)) {
+        result = {};
+      }
+      result.image = Cesium.Property.getValueOrDefault(
+        this._image,
+        time,
+        "",
+        result.image
+      );
+      result.repeat = Cesium.Property.getValueOrDefault(
+        this._repeat,
+        time,
+        1.0,
+        result.repeat
+      );
+      result.stRotation = Cesium.Property.getValueOrDefault(
+        this._stRotation,
+        time,
+        0.0,
+        result.stRotation
+      );
+      console.log(result, 'result')
+      return result;
+    }
+
+    equals(other) {
+      return (
+        this === other ||
+        (other instanceof RoadTextureMaterialProperty &&
+          Cesium.Property.equals(this._image, other._image) &&
+          Cesium.Property.equals(this._repeat, other._repeat) &&
+          // Cesium.Property.equals(this._rotations, other._rotations) &&
+          Cesium.Property.equals(this._stRotation, other._stRotation)
+        )
+      );
+    }
+  }
+
+  Object.defineProperties(RoadTextureMaterialProperty.prototype, {
+    image: Cesium.createPropertyDescriptor("image"),
+    repeat: Cesium.createPropertyDescriptor("repeat"),
+    repeatLength: Cesium.createPropertyDescriptor("stRotation"),
+  });
+
+  Cesium.RoadTextureMaterialProperty = RoadTextureMaterialProperty;
+  Cesium.Material.RoadTextureMaterialProperty = "RoadTextureMaterialProperty";
+  Cesium.Material.RoadTextureMaterialType = "RoadTextureMaterialType";
+  Cesium.Material.RoadTextureMaterialSource = `
+        uniform sampler2D image;
+        uniform float repeat;
+        czm_material czm_getMaterial(czm_materialInput materialInput)
+        {
+          czm_material material = czm_getDefaultMaterial(materialInput);
+          vec2 st = materialInput.st;
+          st.s *= repeat;
+          mat2 rot = mat2(cos(stRotation), -sin(stRotation), sin(stRotation), cos(stRotation));
+          vec2 newSt = rot * (st - 0.5) + 0.5;
+
+          vec4 colorImage = texture2D(image, newSt);
+          material.diffuse = colorImage.rgb;
+          return material;
+        }
+       `;
+  Cesium.Material._materialCache.addMaterial(
+    Cesium.Material.RoadTextureMaterialType,
+    {
+      fabric: {
+        type: Cesium.Material.RoadTextureMaterialType,
+        uniforms: {
+          image: '',
+          repeat: 1.0,
+          stRotation: 0.0,
+        },
+        source: Cesium.Material.RoadTextureMaterialSource,
+      },
+      translucent: function (material) {
+        return true;
+      },
+    }
+  );
+}
+
+export { RoadTexture }

src/Obj/Materail/WallMaterialProperty.js

@@ -0,0 +1,289 @@
+import Tools from "../../Tools";
+
+function StreamWall1() {
+  //动态墙材质
+  function PolylineTrailLinkMaterialProperty(options = {}) {
+    this._definitionChanged = new Cesium.Event();
+    this._color = undefined;
+    this._colorSubscription = undefined;
+    this.color = options.color;
+    this.duration = options.duration;
+    this.fltr = options.fltr;
+    this.image = options.image;
+    this._time = (new Date()).getTime();
+  }
+
+  Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
+    isConstant: {
+      get: function () {
+        return false;
+      }
+    },
+    definitionChanged: {
+      get: function () {
+        return this._definitionChanged;
+      }
+    },
+    repeat: Cesium.createPropertyDescriptor('repeat'),
+    color: Cesium.createPropertyDescriptor('color')
+  });
+  PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
+    return 'PolylineTrailLink';
+  };
+  PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
+    if (!Cesium.defined(result)) {
+      result = {};
+    }
+    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.BROWN, result.color);
+    if (this.image) {
+      result.image = this.image;
+    } else {
+      result.image = Cesium.Material.PolylineTrailLinkImage
+    }
+
+    if (this.duration) {
+      result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
+    }
+    if (this.fltr === false) {
+      result.fltr = this.fltr;
+    }
+    else {
+      result.fltr = true;
+    }
+    return result;
+  };
+  PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
+    return this === other ||
+      (other instanceof PolylineTrailLinkMaterialProperty
+        && Cesium.Property.equals(this._color, other._color))
+  };
+  Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
+  Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
+  Cesium.Material.PolylineTrailLinkImage = create_gradient();
+  Cesium.Material.PolylineTrailLinkSource =
+    "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
+      {\n\
+      czm_material material =czm_getDefaultMaterial(materialInput);\n\
+      vec2 st = materialInput.st;\n\
+      vec4 colorImage = texture(image,vec2(fract(st.t - time), st.t));\n\
+      vec4 fragColor;\n\
+      fragColor.rgb = color.rgb / 1.0;\n\
+      fragColor = czm_gammaCorrect(fragColor);\n\
+      material.alpha = colorImage.a * color.a;\n\
+      material.diffuse = color.rgb/20.0;\n\
+      material.emission = fragColor.rgb;\n\
+      return material;\n\
+      }";
+  Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
+    fabric: {
+      type: Cesium.Material.PolylineTrailLinkType,
+      uniforms: {
+        // color: new Cesium.Color(1.0, 1.0, 1.0, 1),
+        color: new Cesium.Color(1.0, 1.0, 1.0, 1),
+        image: Cesium.Material.PolylineTrailLinkImage,
+        time: 0
+      },
+      source: Cesium.Material.PolylineTrailLinkSource
+    },
+    translucent: function (material) {
+      return true;
+    }
+  });
+
+}
+
+
+function StreamWall2() {
+  let tools = new Tools()
+  let _that = this
+  if (typeof Cesium !== 'undefined') (function (Cesium) {
+    /**
+     * 自定义材质线Property 适用于entity和primitive材质
+     * @param {object} options
+     * @param source {string} glsl的shader代码
+     * @param options.image {string} 图片地址
+     */
+    function CustomMaterialSource(options = {}, source) {
+
+      var Color = Cesium.Color,
+        defaultValue = Cesium.defaultValue,
+        defineProperties = Object.defineProperties,
+        Event = Cesium.Event,
+        createPropertyDescriptor = Cesium.createPropertyDescriptor,
+        Property = Cesium.Property,
+        Material = Cesium.Material,
+        MaterialType = options.MaterialType || 'wallType' + parseInt(Math.random() * 1000);
+
+      let uniforms = {
+        color: new Cesium.Color(1.0, 1.0, 1.0, 1),
+        image: options.image || tools.getSourceRootPath() + "/img/material/arrow.png",
+        time: options.time || 0,
+        repeat: new Cesium.Cartesian2(100.0, 100.0),
+        fltr: options.fltr || options.fltr === false ? options.fltr : true,
+        is2D: options.is2D ? true : false,
+        isTranslucent: options.isTranslucent || options.isTranslucent === false ? options.isTranslucent : true,
+      }
+
+      this.code = ``
+      if (options.repeats) {
+        let repeats = Cesium.Property.getValueOrDefault(options.repeats);
+        for (let i = 0; i < repeats.length; i++) {
+          if (i !== 0) {
+            this.code += `else `
+          }
+          uniforms['repeat' + (i + 1)] = new Cesium.Cartesian2(repeats[i][1] * (repeats.length + ((repeats.length - 1) * 3)), repeats[i][2])
+          this.code += `if(materialInput.st.s < ${repeats[i][0]}) {
+            repeat0 = repeat${i + 1};
+          }`
+        }
+      }
+
+
+
+      // 创建自定义动态材质对象
+      function PolylineCustomMaterialProperty(options = {}) {
+
+        options = defaultValue(options, defaultValue.EMPTY_OBJECT);
+        // 定义内置属性
+        this._definitionChanged = new Event();
+        this._color = undefined;
+        this._colorSubscription = undefined;
+        this._repeat = undefined;
+        this._repeats = undefined;
+        this._repeatSubscription = undefined;
+        this.image = options.image;
+        this.is2D = options.is2D ? true : false;
+        this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(4,253,231,0.87)");
+        this.repeat = options.repeat;
+        this.repeats = options.repeats;
+        this.duration = (options.duration || options.duration === 0) ? options.duration : 1000
+        this.fltr = options.fltr || options.fltr === false ? options.fltr : true
+        this._time = new Date().getTime();
+
+      }
+
+      // 定义材质对象默认属性
+      defineProperties(PolylineCustomMaterialProperty.prototype, {
+        isvarant: {
+          get: function () {
+            return false;
+          }
+        },
+        definitionChanged: {
+          get: function () {
+            return this._definitionChanged;
+          }
+        },
+        repeat: Cesium.createPropertyDescriptor('repeat'),
+        color: createPropertyDescriptor('color')
+      });
+      // 材质对象需要有type函数 value函数 equals函数
+      PolylineCustomMaterialProperty.prototype.getType = function (time) {
+        return MaterialType;
+      };
+      PolylineCustomMaterialProperty.prototype.getValue = function (time, result) {
+        if (!Cesium.defined(result)) {
+          result = {};
+        }
+        result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
+        result.time = this.duration ? (Cesium.getTimestamp() % this.duration) / this.duration : 0;
+        result.image = this.image;
+        result.is2D = this.is2D ? true : false;
+        if (this.repeat) {
+          result.repeat = Cesium.Property.getValueOrDefault(this.repeat);
+        }
+        if (this.repeats) {
+          let repeats = Cesium.Property.getValueOrDefault(this.repeats);
+          for (let i = 0; i < repeats.length; i++) {
+            result['repeat' + (i + 1)] = new Cesium.Cartesian2(repeats[i][1] * (repeats.length + ((repeats.length - 1) * 3)), repeats[i][2])
+          }
+        }
+
+        return result;
+      };
+      PolylineCustomMaterialProperty.prototype.equals = function (other) {
+        return this === other || //
+          (other instanceof PolylineCustomMaterialProperty &&
+            Property.equals(this._color, other._color)) &&
+          Property.equals(this.repeat, other._repeat) &&
+          Property.equals(this.repeats, other._repeats)
+      };
+      // let code2 = 'material.diffuse = color.rgb*1.0;'
+      // if (uniforms.is2D) {
+      //   code2 = `
+      //     material.diffuse = color.rgb*0.0;
+      //     material.emission = color.rgb * 1.0;
+      //   `
+      // }
+      // console.log(code2, uniforms.is2D)
+      // 将定义的材质对象添加到cesium的材质队列中
+      Material._materialCache.addMaterial(MaterialType, {
+        fabric: {
+          type: MaterialType,
+          uniforms: uniforms,
+          // 动态材质shader
+          source: `czm_material czm_getMaterial(czm_materialInput materialInput)
+          {
+              czm_material material = czm_getDefaultMaterial(materialInput);
+               // vec2 repeat1 = materialInput.st.s < 0.5 ? vec2(100.0, 1.0) : vec2(200.0, 1.0);
+               vec2 repeat0 = repeat;
+              `+ this.code + `;
+              vec2 st = repeat0 * materialInput.st;
+              float f = -1.0;
+              if(fltr==true) { f = 1.0; } 
+              vec4 colorImage = texture(image, vec2(fract(st.s - (time * f)), st.t));
+              if(isTranslucent) {
+                material.alpha = colorImage.a * color.a;
+              }
+              else {
+                material.alpha = 1.0;
+              }
+              material.diffuse = colorImage.rgb * color.rgb*0.0;
+              material.emission = colorImage.rgb * color.rgb * 1.0;
+              return material;
+          }`,
+          components: {
+            specular: 10.0,
+            diffuse: "vec3(1.0)"
+          },
+        },
+        // 透明
+        translucent: function (material) {
+          return material.uniforms.isTranslucent
+        }
+      })
+      return new PolylineCustomMaterialProperty(options);
+    }
+
+    Cesium.CustomMaterialSource = CustomMaterialSource;
+  })(Cesium);
+
+}
+
+function create_gradient(color = "#fa2020") {
+  let width = 512
+  let height = 32
+  let canvas = new fabric.Canvas('canvas', {
+    width,
+    height
+  });
+  let rect1 = new fabric.Rect({
+    width,
+    height,
+  });
+  // 线性渐变
+  let gradient = new fabric.Gradient({
+    type: 'linear', // linear or radial
+    gradientUnits: 'pixels', // pixels or pencentage 像素 或者 百分比
+    coords: { x1: 0, y1: 0, x2: width, y2: 0 }, // 至少2个坐标对（x1，y1和x2，y2）将定义渐变在对象上的扩展方式
+    colorStops: [ // 定义渐变颜色的数组
+      { offset: 0.01, color: "rgba(246,241,241,0)" },
+      { offset: 1, color }
+    ]
+  })
+  rect1.set('fill', gradient)
+  canvas.add(rect1)
+  return canvas.toDataURL()
+}
+
+export { StreamWall1, StreamWall2, create_gradient }

src/Obj/Materail/index.js

@@ -0,0 +1,26 @@
+import { StreamWall1, StreamWall2 } from './WallMaterialProperty'
+import { RadarScan } from './RadarScanMaterialProperty'
+import { CustomColorMaterialSource } from './CustomColorMaterialSource'
+import { CustomImageMaterialSource } from './CustomImageMaterialSource'
+import { FlowLine } from './FlowLineMaterialProperty'
+import { PolylineFlow } from './PolylineFlowMaterialProperty'
+import { PolylineFlowMult } from './PolylineFlowMultMaterialProperty'
+import { FlowDashedLine } from './FlowDashedLineFlowMaterialProperty'
+import { LineTexture } from './LineTextureMaterialProperty'
+import { RoadTexture } from './RoadTextureMaterialProperty'
+
+function init_material() {
+  StreamWall1()
+  StreamWall2()
+  RadarScan()
+  CustomColorMaterialSource()
+  CustomImageMaterialSource()
+  FlowLine()
+  PolylineFlow()
+  PolylineFlowMult()
+  FlowDashedLine()
+  LineTexture()
+  RoadTexture()
+}
+
+export { init_material }