Cesium:entity闪烁(点、面以及billboard)
entity的闪烁主要是通过回调函数CallbackProperty,控制样式改变或是否显示
1. 点的闪烁
function f2(){ var x=1; var flog=true; viewer.entities.add({ name:"圆点point闪烁", position:Cesium.Cartesian3.fromDegrees(116.20+0.03,39.53+0.03,0), point : { show : true, // default color :new Cesium.CallbackProperty(function () { if(flog){ x=x-0.05; if(x<=0){ flog=false; } }else{ x=x+0.05; if(x>=1){ flog=true; } } return Cesium.Color.RED.withAlpha(x); },false), pixelSize : 10, // default: 1 outlineWidth :0 } }); }
2. 面的闪烁
function f1() { var x = 1; var flog = true; viewer.entities.add({ name: "圆形区域闪烁", position: Cesium.Cartesian3.fromDegrees(116.20, 39.53, 0), ellipse: { semiMinorAxis: 2000.0, semiMajorAxis: 2000.0, height: 0, material: new Cesium.ColorMaterialProperty(new Cesium.CallbackProperty(function () { if (flog) { x = x - 0.05; if (x <= 0) { flog = false; } } else { x = x + 0.05; if (x >= 1) { flog = true; } } console.log(x) return Cesium.Color.RED.withAlpha(x); }, false)) } }); }
3. billboard图片的闪烁
function f1() { var x = 1; var flog = true; viewer.entities.add({ name: 'singleWarning', position: Cesium.Cartesian3.fromDegrees(116.20, 39.53), billboard: { image: '预警定位.png', name: 'singleWarning', show: new Cesium.CallbackProperty(function () { if (flog) { x = x - 0.05; if (x <= 0) { flog = false; } } else { x = x + 0.05; if (x >= 1) { flog = true; } } return x >= 0.5; },false), width: 100, height: 100, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 6.8e10) }, }) }
实现原理
-
动态圆
semiMinorAxis
和semiMajorAxis
指定一个CallbackProperty
对象,并返回半径大小。由于要做的是要给圆,长短轴相同,可以抽出一个共同的方法getRadius()
。 在CallbackProperty
的回调函数中,不断的调整半径的大小,这个就和我们平时常用的requestAnimationFrame
一样了。 -
颜色渐变
使用ColorMaterialProperty
,根据半径的大小,调整透明度。半径越大,透明度越高。var r = 0, up = true const pos = Cesium.Cartesian3.fromDegrees([120.191, 30.255, 100]) const maxRadius = 50 const minRadius = 10 const step = 1 function getRadius() { return new Cesium.CallbackProperty(function (time, result) { if (up) { r += step } else { r -= step } if (r >= maxRadius) { up = false } if (r <= minRadius) { up = true } return r }, false) } viewer.entities.add({ position: pos, ellipse: { semiMinorAxis: getRadius(), semiMajorAxis: getRadius(), material: new Cesium.ColorMaterialProperty( new Cesium.CallbackProperty(function (time, result) { return new Cesium.Color(1, 0, 0, 1 - r / maxRadius) }) ), height: this.target[2], outline: false } })
var viewer = new Cesium.Viewer('cesiumContainer', { imageryProvider: new Cesium.SingleTileImageryProvider({ url: '../img/worldimage.jpg' }), homeButton: false, baseLayerPicker: false, navigationHelpButton: false, animation: false, timeline: false, fullscreenButton: false, vrButton: false }); function computeCircle(radius) { var positions = []; for (var i = 0; i < 360; i++) { var radians = Cesium.Math.toRadians(i); positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians))); } return positions; } var startTime = Cesium.JulianDate.now(); var redTube = viewer.entities.add({ name : 'Red tube with rounded corners', polylineVolume : { positions : Cesium.Cartesian3.fromDegreesArray([-85.0, 32.0, -85.0, 36.0, -89.0, 36.0]), shape : computeCircle(6000.0), material : new Cesium.ColorMaterialProperty(new Cesium.CallbackProperty(function() { return Cesium.Color.fromRandom({ minimumRed : 0.75, minimumGreen : 0.75, minimumBlue : 0.75, alpha : 1.0 }); }, false)) } }); viewer.zoomTo(viewer.entities);