因gif截图问题，动画效果看起来不够流畅。
1.调用方法
<!DOCTYPE html>
<meta charset="UTF-8">
<title>圆形波纹
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<script type="text/javascript" src="./js/include-cesium.js">
<script type="text/javascript" src="./js/extra/overlay/CircleWaveMaterialProperty.js">
<div id="cesiumContainer">
let initCesium =new InitCesium();
let viewer = initCesium.initViewer('cesiumContainer', {
});
let img_arcgis=new Cesium.ArcGisMapServerImageryProvider({
name:"img_arcgis",
url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
});
let layers= viewer.scene.imageryLayers;
layers.addImageryProvider(img_arcgis);
const data = {
id:"111",
lon:117.286419,
lat:31.864436,
height:0,
};
viewer.scene.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(117.286419,31.864436, 500.0),
})
addCircleWave(data);
function addCircleWave(data) {
viewer.entities.add({
id: data.id,
name:"",
position: Cesium.Cartesian3.fromDegrees(
data.lon,
data.lat,
data.height
),
ellipse: {
height:0,
semiMinorAxis:500,
semiMajorAxis:500,
material:new Cesium.CircleWaveMaterialProperty({
duration:2e3,
gradient:0,
color:new Cesium.Color(1.0, 0.0, 0.0, 1.0),
count:3
})
}
});
}
</html>
2.扩展类
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 = performance.now();
}
}
Cesium.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 = (performance.now() -this._time) /this.duration;
result.count =this.count;
result.gradient =1 +10 * (1 -this.gradient);
return result;
}
CircleWaveMaterialProperty.prototype.equals =function(other) {
return this === other ||
(otherinstanceof CircleWaveMaterialProperty &&
Cesium.Property.equals(this._color, other._color))
}
Cesium.Material.CircleWaveMaterialType ='CircleWaveMaterial';
Cesium.Material.PolylineTrailSource =`czm_material czm_getMaterial(czm_materialInput materialInput)\n {\n czm_material material = czm_getDefaultMaterial(materialInput);\n material.diffuse = 1.5 * color.rgb;\n vec2 st = materialInput.st;\n vec3 str = materialInput.str;\n float dis = distance(st, vec2(0.5, 0.5));\n float per = fract(time);\n if (abs(str.z) > 0.001) {\n discard;\n }\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 <= 999; i++) { \n if (float(i) <= count) { \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 } \n return material; \n } \n`;
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.PolylineTrailSource
},
translucent:function(material) {
return !0;
}
});
Cesium.CircleWaveMaterialProperty = CircleWaveMaterialProperty;
