一、扩展材质

/*** 水波纹扩散材质* @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博客