526互联

Cesium：entity闪烁（点、面以及billboard）

发布时间 2023-03-27 15:20:14作者: zhh

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