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

最新推荐文章于 2023-12-29 14:34:14 发布

原创最新推荐文章于 2023-12-29 14:34:14 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

文章标签：

#三维 #SuperMap #前端

三维GIS 专栏收录该内容

427 篇文章

订阅专栏

本文介绍如何使用Cesium库在JavaScript中创建逼真的雷达扫描动画，通过定制椭球体对象展示扫描半径、范围和高度，并通过CallbackProperty实现动画效果。

作者：桔子
本文同步发布于简书https://www.jianshu.com/p/b400026d4116

最近有同事反馈有模拟雷达扫描效果的需求，需要表达雷达扫描的半径、扫描范围以及扫描过程动画，下面将通过使用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