Cesium圆形波纹效果

1. 扩展实现类CircleWaveMaterialProperty

import Cesium from "cesium/Cesium";

export class CircleWaveMaterialProperty {

    constructor(options) {

        options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT);

        this._definitionChanged = new Cesium.Event();

        this._color = undefined;

        this._colorSubscription = undefined;

        this.color = options.color;

        this.duration = Cesium.defaultValue(options.duration, 1e3);

        this.count = Cesium.defaultValue(options.count, 2);

        if (this.count <= 0) this.count = 1;

        this.gradient = Cesium.defaultValue(options.gradient, 0.1);

        if (this.gradient < 0) this.gradient = 0;

        else if (this.gradient > 1) this.gradient = 1;

        this._time = performance.now();

    }

}

Cesium.defineProperties(CircleWaveMaterialProperty.prototype, {

    isConstant: {

        get: function() {

            return false;

        }

    },

    definitionChanged: {

        get: function() {

            return this._definitionChanged;

        }

    },

    color: Cesium.createPropertyDescriptor('color')

});

CircleWaveMaterialProperty.prototype.getType = function(time) {

    return Cesium.Material.CircleWaveMaterialType;

}

CircleWaveMaterialProperty.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 = (performance.now() - this._time) / this.duration;

    result.count = this.count;

    result.gradient = 1 + 10 * (1 - this.gradient);

    return result;

}

CircleWaveMaterialProperty.prototype.equals = function(other) {

    return this === other ||

        (other instanceof CircleWaveMaterialProperty &&

            Cesium.Property.equals(this._color, other._color))

}

Cesium.Material.CircleWaveMaterialType = 'CircleWaveMaterial';

Cesium.Material.PolylineTrailSource = `czm_material czm_getMaterial(czm_materialInput materialInput)\n

                                        {\n

                                            czm_material material = czm_getDefaultMaterial(materialInput);\n

                                            material.diffuse = 1.5 * color.rgb;\n

                                            vec2 st = materialInput.st;\n

                                            vec3 str = materialInput.str;\n

                                            float dis = distance(st, vec2(0.5, 0.5));\n

                                            float per = fract(time);\n

                                            if (abs(str.z) > 0.001) {\n

                                                discard;\n

                                            }\n

                                            if (dis > 0.5) { \n

                                                discard; \n

                                            } else { \n

                                                float perDis = 0.5 / count;\n

                                                float disNum; \n                       

                                                float bl = .0; \n                       

                                                for (int i = 0; i <= 999; i++) { \n                           

                                                    if (float(i) <= count) { \n                               

 

                                                      disNum = perDis *

float(i) - dis + per / count; \n                             

                                                        if (disNum > 0.0) { \n                                 

                                                            if (disNum < perDis) { \n                                     

                                                                bl = 1.0 - disNum / perDis;\n

                                                            }\n                                 

 

                                                          else if

(disNum - perDis < perDis) { \n                                       

                                                                    bl = 1.0 - abs(1.0 - disNum / perDis); \n

                                                            } \n                                 

                                                            material.alpha = pow(bl, gradient); \n

                                                        } \n

                                                    } \n

                                                } \n

                                            } \n

                                        return material; \n

                                    } \n`;

Cesium.Material._materialCache.addMaterial(Cesium.Material.CircleWaveMaterialType, {

    fabric: {

        type: Cesium.Material.CircleWaveMaterialType,

        uniforms: {

            color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),

            time: 1,

            count: 1,

            gradient: 0.1

        },

        source: Cesium.Material.PolylineTrailSource

    },

    translucent: function(material) {

        return !0;

    }

});

Cesium.CircleWaveMaterialProperty = CircleWaveMaterialProperty;

2.调用方法

viewer.entities.add({

        name: "",

        position: Cesium.Cartesian3.fromDegrees(117.286419,31.864436, 0 ),

        ellipse: {

          height: 0,

          semiMinorAxis: 500,

          semiMajorAxis: 500,

          material: new Cesium.CircleWaveMaterialProperty({

            duration: 2e3,

            gradient: 0,

            color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),

            count: 3

          })

        }

      });