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)
        },
    })
}

 

　　

实现原理

1. 动态圆
   semiMinorAxis和semiMajorAxis指定一个CallbackProperty对象，并返回半径大小。由于要做的是要给圆，长短轴相同，可以抽出一个共同的方法getRadius()。 在CallbackProperty的回调函数中，不断的调整半径的大小，这个就和我们平时常用的requestAnimationFrame一样了。

2. 颜色渐变
   使用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);