cesium 波纹特效

创建波纹特效

function createRipple(center) {
    const ripple = viewer.entities.add({
        position: center,
        ellipse: {
            semiMinorAxis: 100000.0, // 波纹半径
            semiMajorAxis: 100000.0,
            material: new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString('rgba(0, 0, 255, 0.5)')), // 波纹颜色
            outline: true,
            outlineColor: Cesium.Color.fromCssColorString('rgba(0, 0, 255, 0.8)'),
            height: 0,
            depthFailMaterial: new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString('rgba(0, 0, 255, 0.2)'))
        }
    });

    // 动画效果
    let scale = 1.0;
    const rippleAnimation = setInterval(() => {
        scale += 0.01;
        ripple.ellipse.semiMinorAxis = 100000.0 * scale;
        ripple.ellipse.semiMajorAxis = 100000.0 * scale;

        if (scale > 2.0) {
            clearInterval(rippleAnimation);
            viewer.entities.remove(ripple); // 移除波纹
        }
    }, 50);
}

// 创建波纹
const center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
createRipple(center);

  

设置相机视角

viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 1000), // 设置相机位置
    duration: 2 // 飞行时间
});

  

posted @ 2021-08-30 16:26  虹猫淘气  阅读(198)  评论(0)    收藏  举报