Cesium实现雷达扫描效果

Cesium实现雷达扫描效果

效果：

html：

<div id="cesiumContainer"></div>
<canvas id="canvas-a" class="canvas" width="300" height="300"></canvas>

js：

viewer.entities.add({
    name: 'Rotating rectangle with rotating texture coordinate',
    rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(-75.0, 30.0, -70.0, 35.0),
        material: new Cesium.ImageMaterialProperty({
            image: drawCanvas(),
            transparent: true
        }),
        rotation: new Cesium.CallbackProperty(getRotationValue, false),
        stRotation: new Cesium.CallbackProperty(getRotationValue, false)
    }
});

let rotation = Cesium.Math.toRadians(90);

functiongetRotationValue() {
    rotation -= 0.02;
    return rotation;
}

function drawCanvas() {
    let canvas = document.getElementById("canvas-a");
    let context = canvas.getContext('2d');
	let grd = context.createLinearGradient(175, 100, canvas.width, 150);
	grd.addColorStop(0, "rgba(0,255,0,0)");
	grd.addColorStop(1, "rgba(0,255,0,1)");
	context.fillStyle = grd;
	context.beginPath();
	context.moveTo(150, 150);
	context.arc(150, 150, 140, -90 / 180 * Math.PI, 0 / 180 * Math.PI);
	context.fill();

    return canvas;
}