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);