Cesium圆形波纹效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Cesium圆形波纹效果相关的知识，希望对你有一定的参考价值。
参考技术A 因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;
android 5.0 默认水波纹背景属性,可设置不论什么View
actionBarItemBackground 5.0以上超出边界圆形水波纹
selectableItemBackground 5.0以上边界内圆形水波纹
这两个属性在5.0下面是默认的灰色效果,个人认为也非常唯美
使用方法
android:background="?android:attr/actionBarItemBackground"
android:background="?android:attr/selectableItemBackground"
以上是关于Cesium圆形波纹效果的主要内容，如果未能解决你的问题，请参考以下文章