cesium 添加动态波纹效果 圆形扩散效果 波纹材质

一、扩展材质

/**
         * 水波纹扩散材质
         * @param {*} options
         * @param {String} options.color 颜色
         * @param {Number} options.duration 持续时间 毫秒
         * @param {Number} options.count 波浪数量
         * @param {Number} options.gradient 渐变曲率
         */
        function CircleWaveMaterialProperty(options) {
            this._definitionChanged = new Cesium.Event();
            this.color = Cesium.defaultValue(options.color && new Cesium.Color.fromCssColorString(options.color), Cesium.Color.RED);
            this.duration = Cesium.defaultValue(options.duration, 1000);
            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 > 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'),
            gradient: Cesium.createPropertyDescriptor('gradient'),
            duration: Cesium.createPropertyDescriptor('duration'),
            count: Cesium.createPropertyDescriptor('count'),
        });
        CircleWaveMaterialProperty.prototype.getType = function () {
            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) {
            const reData =
                this === other ||
                (other instanceof CircleWaveMaterialProperty
                    && Cesium.Property.equals(this.color, other.color)
                    && Cesium.Property.equals(this.duration, other.duration)
                    && Cesium.Property.equals(this.count, other.count)
                    && Cesium.Property.equals(this.gradient, other.gradient));
            return reData;
        };
        Cesium.CircleWaveMaterialProperty = CircleWaveMaterialProperty;
        Cesium.Material.CircleWaveMaterialType = 'CircleWaveMaterial';
        Cesium.Material.CircleWaveSource = `
                      czm_material czm_getMaterial(czm_materialInput materialInput) {
                        czm_material material = czm_getDefaultMaterial(materialInput);
                        material.diffuse = 1.5 * color.rgb;
                        vec2 st = materialInput.st;
                        vec3 str = materialInput.str;
                        float dis = distance(st, vec2(0.5, 0.5));
                        float per = fract(time);
                        if (abs(str.z) > 0.001) {
                          discard;
                        }
                        if (dis > 0.5) {
                          discard;
                        } else {
                          float perDis = 0.5 / count;
                          float disNum;
                          float bl = .0;
                          for (int i = 0; i <= 9; 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, gradient);
                              }
                            }
                          }
                        }
                        return material;
                      }
                      `;
        Cesium.Material._materialCache.addMaterial(Cesium.Material.CircleWaveMaterialType, {
            fabric: {
                type: Cesium.Material.CircleWaveMaterialType,
                uniforms: {
                    color: new Cesium.Color(181, 241, 254, 1),
                    time: 1,
                    count: 1,
                    gradient: 0.1,
                },
                source: Cesium.Material.CircleWaveSource,
            },
            translucent: function () {
                return true;
            },
        });

二、调用：添加entity 

viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
                    ellipse: {
                        semiMinorAxis: 10,
                        semiMajorAxis: 10,
                        height: height,
                        material: new Cesium.CircleWaveMaterialProperty({
                            color: '#FFCB33',
                            duration: 1000,
                            gradient: 0,
                            count: 3,
                        }),
                    },
                })

电子围栏效果参考：cesium 动态墙效果 电子围栏效果-CSDN博客