代码迁移

src/Obj/Materail/CircleRippleMaterialProperty.js

@@ -0,0 +1,170 @@
+/*
+ * @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 = 1.5 * 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/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/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/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/WallMaterialProperty.js

@@ -0,0 +1,281 @@
+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 = (colorImage.rgb+color.rgb)/2.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)
+      };
+      // 将定义的材质对象添加到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.4;
+              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,14 @@
+import { StreamWall1, StreamWall2 } from './WallMaterialProperty'
+import { RadarScan } from './RadarScanMaterialProperty'
+import { CustomColorMaterialSource } from './CustomColorMaterialSource'
+import { CustomImageMaterialSource } from './CustomImageMaterialSource'
+
+function init_material() {
+  StreamWall1()
+  StreamWall2()
+  RadarScan()
+  CustomColorMaterialSource()
+  CustomImageMaterialSource()
+}
+
+export { init_material }