Cesium圆形波纹效果

实现效果

关键代码

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 = (new Date()).getTime();
    }
}
Object.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 = (((new Date()).getTime() - this._time) % this.duration) / 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.CircleWaveSource = circleWaveSource;


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.CircleWaveSource
    },
    translucent: function(material) {
        return !0;
    }
});

Cesium.CircleWaveMaterialProperty = CircleWaveMaterialProperty;

详情参见 Cesium实战专栏