SuperMap iClient3D for WebGL扩展开发教程——雷达扫描效果

最近有同事反馈有模拟雷达扫描效果的需求，需要表达雷达扫描的半径、扫描范围以及扫描过程动画，下面将通过使用Cesium原生的椭球体对象来实现。

1、模拟扫描波瓣

雷达扫描的形状类似一个带有厚度的扇形，这里刚好可以用球体对象来实现，通过指定球体半径来模拟扫描半径，通过设置椭球的clock属性来模拟扫描的宽度范围，通过设置Cone属性来表达扫描的高度范围。

椭球体.png

ellipsoid: {
    radii: new Cesium.Cartesian3(50000.0, 50000.0, 50000.0),
    innerRadii: new Cesium.Cartesian3(0.1, 0.1, 0.1),
    minimumClock: Cesium.Math.toRadians(0.0),
    maximumClock: Cesium.Math.toRadians(20.0),
    minimumCone: Cesium.Math.toRadians(45.0),
    maximumCone: Cesium.Math.toRadians(90.0),
    material: Cesium.Color.DARKCYAN.withAlpha(0.3),
    outline: false
}

2、扫描动画

下面利用Cesium的CallbackProperty来制作动画，这里就不再赘述，如果有不理解的地方，可以翻看往期教程。

let start = 0
let aa = viewer.entities.add({
    name: 'Wedge',
    position: Cesium.Cartesian3.fromDegrees(-102.0, 35.0, 0.0),
    orientation: new Cesium.CallbackProperty(function() {
        start += 1
        let roll = Cesium.Math.toRadians(start)
        Cesium.Math.zeroToTwoPi(roll)
        return Cesium.Transforms.headingPitchRollQuaternion(
            Cesium.Cartesian3.fromDegrees(-102.0, 35.0, 0.0),
            new Cesium.HeadingPitchRoll(roll, 0, 0.0)
        )
    }, false),
    ellipsoid: {
        radii: new Cesium.Cartesian3(50000.0, 50000.0, 50000.0),
        innerRadii: new Cesium.Cartesian3(0.1, 0.1, 0.1),
        minimumClock: Cesium.Math.toRadians(0.0),
        maximumClock: Cesium.Math.toRadians(20.0),
        minimumCone: Cesium.Math.toRadians(45.0),
        maximumCone: Cesium.Math.toRadians(90.0),
        material: Cesium.Color.DARKCYAN.withAlpha(0.3),
        outline: false
    },
});

雷达扫描.gif

为了更好的使用，也对其进行了封装，封装之后的代码如下

class radarellipsoid {
    constructor(position, color,radii,clockangle,startCone,endCone) {
        let start = 0
        this.entity =new Cesium.Entity({
            position: position,
            orientation: new Cesium.CallbackProperty(function () {
                start += 1
                let roll = Cesium.Math.toRadians(start)
                Cesium.Math.zeroToTwoPi(roll)
                return Cesium.Transforms.headingPitchRollQuaternion(
                    position,
                    new Cesium.HeadingPitchRoll(roll, Cesium.Math.toRadians(10),Cesium.Math.toRadians(6))
                )
            }, false),
            ellipsoid: {
                radii: new Cesium.Cartesian3(radii, radii, radii),
                innerRadii: new Cesium.Cartesian3(0.1, 0.1, 0.1),
                minimumClock: Cesium.Math.toRadians(0.0),
                maximumClock: Cesium.Math.toRadians(clockangle),
                minimumCone: Cesium.Math.toRadians(startCone),
                maximumCone: Cesium.Math.toRadians(endCone),
                material: color,
                outline: true
            },
        });
    }
}
export default radarellipsoid