Cesium动态圆扩散效果

Cesium动态圆扩散效果

前言

项目中需要显示事件发生点的动态效果，在网上找到的特效在高层建筑模型中会有问题，所以自己花时间弄了一个，效果还不错！

高清图片

关键代码

//材质类
function EllipsoidFadeMaterialProperty(color, duration) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = color;
    this.duration = duration;
    this._time = (new Date()).getTime();
}

Object.defineProperties(EllipsoidFadeMaterialProperty.prototype, {
    isConstant: {
        get: function() {
            return false;
        }
    },
    definitionChanged: {
        get: function() {
            return this._definitionChanged;
        }
    },
    color: Cesium.createPropertyDescriptor('color')
});

EllipsoidFadeMaterialProperty.prototype.getType = function(time) {
    return 'EllipsoidFade';
}

EllipsoidFadeMaterialProperty.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;
    return result;
}

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

Cesium.EllipsoidFadeMaterialProperty = EllipsoidFadeMaterialProperty;
Cesium.Material.EllipsoidFadeType = 'EllipsoidFade';
Cesium.Material.EllipsoidFadeSource =...

Cesium.Material._materialCache.addMaterial(Cesium.Material.EllipsoidFadeType, {
    fabric: {
        type: Cesium.Material.EllipsoidFadeType,
        uniforms: {
            color: new Cesium.Color(1.0, 0.0, 0.0, 1),
            time: 0
        },
        source: Cesium.Material.EllipsoidFadeSource
    },
    translucent: function(material) {
        return true;
    }
});

//使用entity
this.viewer.entities.add({
            name: 'EllipsoidFade',
            position: positions[2],
            ellipse: {
                height: 20,
                semiMinorAxis: 130.0,
                semiMajorAxis: 130.0,
                material: new Cesium.EllipsoidFadeMaterialProperty(Cesium.Color.LIME, 2000)
            }
        });

详情参见 Cesium实战项目