这其实是一个很简单能实现的效果，百度搜索随便一搜会出现很多博客。

为什么还要再出一个？想在这里把我找到的实现此效果的方法及策略来一个综合对比。

个人觉得自己的实现方式相对来说性能会好一些。代码量相对少很多。

所有给出的代码直接粘贴到cesium官方沙盒示例里面就可以运行。

第一种实现方式：

百度搜索出来的，80%源代码粘贴过来的。大致看了下采用后处理方式渲染，必须开启深度检测。

代码中直接添加了1000个实体，很卡，可视化效果也一般般。

const viewer = new Cesium.Viewer("cesiumContainer");

viewer.scene.globe.depthTestAgainstTerrain = true;

var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(111.0, 40.0, 1500),
    billboard: {
        image: "../images/Cesium_Logo_overlay.png",
        scale: 1,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
    }
});
viewer.flyTo(entity);

for (var i = 0; i < 1000; i++) {
    var cartographicCenter = Cesium.Cartographic.fromDegrees(110 + Math.random() * 1,
        40 + Math.random() * 1,
        0);
    var scanColor = new Cesium.Color(0.0, 1.0, 0.0, 1);
    var lastStage = addCircleScanPostStage(viewer, cartographicCenter, 1000, scanColor, 4000);
}

//扩散效果Shader
function getScanSegmentShader() {
    var scanSegmentShader = "\n\
uniform sampler2D colorTexture;\n\
uniform sampler2D depthTexture;\n\
in vec2 v_textureCoordinates;\n\
uniform vec4 u_scanCenterEC;\n\
uniform vec3 u_scanPlaneNormalEC;\n\
uniform float u_radius;\n\
uniform vec4 u_scanColor;\n\
\n\
vec4 toEye(in vec2 uv,in float depth)\n\
{\n\
vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\n\
vec4 posIncamera = czm_inverseProjection * vec4(xy,depth,1.0);\n\
posIncamera = posIncamera/posIncamera.w;\n\
return posIncamera;\n\
}\n\
\n\
vec3 pointProjectOnPlane(in vec3 planeNormal,in vec3 planeOrigin,in vec3 point)\n\
{\n\
vec3 v01 = point - planeOrigin;\n\
float d = dot(planeNormal,v01);\n\
return (point-planeNormal * d);\n\
}\n\
float getDepth(in vec4 depth)\n\
{\n\
float z_window = czm_unpackDepth(depth);\n\
z_window = czm_reverseLogDepth(z_window);\n\
float n_range = czm_depthRange.near;\n\
float f_range = czm_depthRange.far;\n\
return (2.0 * z_window - n_range - f_range)/(f_range-n_range);\n\
} \n\
void main()\n\
{\n\
out_FragColor = texture(colorTexture,v_textureCoordinates);\n\
float depth = getDepth(texture(depthTexture,v_textureCoordinates));\n\
vec4 viewPos = toEye(v_textureCoordinates,depth);\n\
vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz,u_scanCenterEC.xyz,viewPos.xyz);\n\
float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);\n\
if(dis<u_radius)\n\ {\n\ float f=1.0-abs(u_radius - dis )/ u_radius;\n\ f=pow(f,4.0);\n\
out_FragColor=mix(out_FragColor,u_scanColor,f);\n\ }\n\ } \n\ ";
    return scanSegmentShader;
}

/*
添加扩散效果扫描线
viewer
cartographicCenter 扫描中心
radius 半径 米
scanColor 扫描颜色
duration 持续时间 毫秒
*/
function addCircleScanPostStage(viewer, cartographicCenter, maxRadius, scanColor, duration) {
    var _Cartesian3Center = Cesium.Cartographic.toCartesian(cartographicCenter);
    var _Cartesian4Center = new Cesium.Cartesian4(_Cartesian3Center.x, _Cartesian3Center.y, _Cartesian3Center.z, 1);

    var _CartograhpicCenter1 = new Cesium.Cartographic(cartographicCenter.longitude, cartographicCenter.latitude, cartographicCenter.height + 500);
    var _Cartesian3Center1 = Cesium.Cartographic.toCartesian(_CartograhpicCenter1);
    var _Cartesian4Center1 = new Cesium.Cartesian4(_Cartesian3Center1.x, _Cartesian3Center1.y, _Cartesian3Center1.z, 1);

    var _time = (new Date()).getTime();

    var _scratchCartesian4Center = new Cesium.Cartesian4();
    var _scratchCartesian4Center1 = new Cesium.Cartesian4();
    var _scratchCartesian3Normal = new Cesium.Cartesian3();


    var ScanPostStage = new Cesium.PostProcessStage({
        fragmentShader: getScanSegmentShader(),
        uniforms: {
            u_scanCenterEC: function () {
                var temp = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
                return temp;
            },
            u_scanPlaneNormalEC: function () {
                var temp = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
                var temp1 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);

                _scratchCartesian3Normal.x = temp1.x - temp.x;
                _scratchCartesian3Normal.y = temp1.y - temp.y;
                _scratchCartesian3Normal.z = temp1.z - temp.z;

                Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);

                return _scratchCartesian3Normal;
            },
            u_radius: function () {
                return maxRadius * (((new Date()).getTime() - _time) % duration) / duration;
            },
            u_scanColor: scanColor
        }
    });

    viewer.scene.postProcessStages.add(ScanPostStage);
    return ScanPostStage;
}

 

第二种方式：和第三种方式一样，扩展材质属性，唯一的区别在shder不一样，替换第三种方式的shader就可以看到效果。和第三种方式相比区别在不能支持多个波同时扩散。

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(time);
    if(dis > per * 0.5){
       //material.alpha = 0.0;
       discard;
    }else {
         material.alpha = color.a  * dis / per / 2.0;
    }
    return material;
}

　　

　　

第三种方式：这种方式在网上应该有类似的实现方案，就是扩展一个MaterialProperty，其中着色器代码自己加工修改过，能够自己自定义扩散圆数量，算法逻辑就不详细介绍，有需要的直接粘贴过去使用即可。循环最大值是写死的10，默认最大只支持9个圆扩散。这种方式加载1000个性能是没有影响的，就相当于加载了普通的1000个圆形实例。

const viewer = new Cesium.Viewer("cesiumContainer");
let Color = Cesium.Color;
let defaultValue = Cesium.defaultValue;
let defined = Cesium.defined;
let Event = Cesium.Event;
let createPropertyDescriptor = Cesium.createPropertyDescriptor;
let Property = Cesium.Property;
let Material = Cesium.Material;

var defaultColor = Color.WHITE;

function ElliposidWaveMaterialProperty(options) {
    options = defaultValue(options, defaultValue.EMPTY_OBJECT);

    this._definitionChanged = new Event();
    this._color = undefined;
    this._colorSubscription = undefined;

    this.color = options.color;
    this.count = options.count || 1;
    this.duration = Cesium.defaultValue(options.duration, 1e3);
    this.gradient = Cesium.defaultValue(options.gradient, 0.1);
    this._time = performance.now();

}

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

ElliposidWaveMaterialProperty.prototype.getType = function (time) {
    return Material.EllipsoidWaveType;
};

ElliposidWaveMaterialProperty.prototype.getValue = function (time, result) {
    if (!defined(result)) {
        result = {};
    }
    result.color = Property.getValueOrClonedDefault(this._color, time, defaultColor, result.color);

    if (this._time === undefined) {
        this._time = time.secondsOfDay;
    }
    result.time = (performance.now() - this._time) / this.duration;
    result.count = this.count;
    result.gradient = 1 + 10 * (1 - this.gradient);
    return result;
};

ElliposidWaveMaterialProperty.prototype.equals = function (other) {
    return this === other || //
        (other instanceof ElliposidWaveMaterialProperty &&
            Property.equals(this._color, other._color));
};

Material.EllipsoidWaveType = "EllipsoidWave";
const ElliposidWaveMaterial = "czm_material czm_getMaterial(czm_materialInput materialInput) { \n\
    czm_material material = czm_getDefaultMaterial(materialInput); \n\
    material.diffuse = 1.5 * color.rgb; \n\
    vec2 st = materialInput.st; \n\
    float dis = distance(st, vec2(0.5, 0.5)); \n\
    float per = fract(time); \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 < 10; i++) {\n\
            if(float(i) > count) {\n\
                break;\n\
            }   \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\
    return material;  \n\
}";

Material._materialCache.addMaterial(Material.EllipsoidWaveType, {
    fabric: {
        type: Material.EllipsoidWaveType,
        uniforms: {
            color: new Color(1, 0, 0, 1.0),
            time: 1,
            count: 1,
            duration: 1000,
            gradient: 0.1
        },
        source: ElliposidWaveMaterial
    },
    translucent: function () {
        return true;
    }
});

for (var i = 0; i < 1000; i++) {
    let greenCircle = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(110 + Math.random() * 1,
        40 + Math.random() * 1,
        10),
        name: "Green circle at height with outline",
        ellipse: {
            semiMinorAxis:1000.0,
            semiMajorAxis: 1000.0,
            height: 10.0,
            material: new ElliposidWaveMaterialProperty({
                color: Color.GREEN,
                count: 3,
                duration: 3000,
                gradient: 0.2,
            })
        },
    });
}

viewer.zoomTo(viewer.entities);