【Cesium】实现动态扩散圆圈---预警效果

该文章介绍了如何使用CesiumJavaScript库创建动态扩散预警效果，包括点击屏幕生成扩散圆圈、调整扩散范围、速度、颜色和波纹数量等功能。核心代码展示了事件监听、CircleRippleMaterialProperty的使用，以及动态绑定视图模型来改变扩散参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cesium预警效果---动态扩散圆圈。用户可动态调整扩散范围、扩散速度、波纹数量以及扩散效果的颜色。如下视频所示。

cesium动态扩散圆---预警

一、核心代码：只包含js代码，不包含html部分。

function getCircleWave(viewer) {
    // 注册屏幕点击事件
    viewer.screenSpaceEventHandler.setInputAction((evt) => {
        var ray = viewer.camera.getPickRay(evt.position);
        var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        var lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度值
        var lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度值
        // 添加动态扩散模型
        circleWave({ viewer, lng, lat});
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

//可动态调整扩散范围、扩散速度以及扩散效果的颜色。用户也可自行增加调整透明度、波纹数量等功能
function circleWave({ viewer, lng, lat} = {}) {
    let entity;
    const viewModel = {
        color1: "Red",
        colors: ["White", "Red", "Green", "Blue", "Yellow", "Gray", "YELLOWGREEN", "VIOLET", "TEAL", "PINK", "MIDNIGHTBLUE", "LIME", "BLACK"],
        widthSize1: 500.0,
        speedSize1: 5.0,
    };

    Cesium.knockout.track(viewModel);
    const toolbar = document.getElementById("toolbar-wave");
    Cesium.knockout.cleanNode(toolbar);
    Cesium.knockout.applyBindings(viewModel, toolbar);
    Cesium.knockout
        .getObservable(viewModel, "color1")
        .subscribe(function (newValue) {
            const a = new Cesium.CircleRippleMaterialProperty({
                color: getColor(newValue, 0.9),
                speed: viewModel.speedSize1,
                count: 4,
                gradient: 0.2
            });
            entity.ellipse.material = a;
            params['color'] = newValue;
        });

    Cesium.knockout
        .getObservable(viewModel, "widthSize1")
        .subscribe(function (newValue) {
            entity.ellipse.semiMinorAxis = parseFloat(newValue);
            entity.ellipse.semiMajorAxis = parseFloat(newValue);
        });

    Cesium.knockout
        .getObservable(viewModel, "speedSize1")
        .subscribe(function (newValue) {
            const a = new Cesium.CircleRippleMaterialProperty({
                color: getColor(viewModel.color1, viewModel.alpha1),//扩散效果颜色
                speed: parseFloat(newValue), //扩散速度
                count: 4,  //扩散波纹数量
                gradient: 0.2
            });
            entity.ellipse.material = a;
        });

  
    entity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(lng, lat),
        name: "波纹圆",
        ellipse: {
            semiMinorAxis: viewModel.widthSize1,
            semiMajorAxis: viewModel.widthSize1,
            material: new Cesium.CircleRippleMaterialProperty({
                color: getColor(viewModel.color1, 0.9),
                speed: viewModel.speedSize1,
                count: 4,
                gradient: 0.2
            })
        }
    })
}

function getColor(colorName, alpha) {
        const color = Cesium.Color[colorName.toUpperCase()];
        return Cesium.Color.fromAlpha(color, parseFloat(alpha));
    }