cesium实现动态圆效果之——图片雷达

Cesium实战系列文章总目录：传送门

1.实现效果

2.实现方法

通过entity方式创建圆形，并使用回调函数旋转材质即可实现图片雷达效果。

具体代码如下，包含了旋转材质的函数和设创建图片雷达的函数。有关旋转材质的详细介绍可参考之前的博客：旋转圆效果。

// 图片雷达
let rader = this.viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.9236839, 22.528061),
    name: '图片雷达',
    ellipse: {
        semiMajorAxis: 1000.0,
        semiMinorAxis: 1000.0,
        material: new Cesium.ImageMaterialProperty({
            image: './icons/radar.png',
            color: new Cesium.Color(1.0, 1.0, 0.0, 0.7),
        }),
        // 不设置高度则无法渲染外框线
        height: 20.0,
        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
        outline: true,
        outlineColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
    }
})

rotateMaterial(rader.ellipse, 0, -3);

/**
 * @description: 旋转材质
 * @param {*} instance ：实体
 * @param {*} _stRotation : 初始材质旋转角度
 * @param {*} _amount ：旋转角度变化量
 * @return {*}
 */
function rotateMaterial(instance, _stRotation, _amount) {
    instance.stRotation = new Cesium.CallbackProperty(function() {
        _stRotation += _amount;
        if (_stRotation >= 360 || _stRotation <= -360) {
            _stRotation = 0;
        }
        return Cesium.Math.toRadians(_stRotation);
    }, false)
}