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

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

cesium动态扩散圆---预警

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

function getCircleWave(viewer) {
    // 注册屏幕点击事件
    ((evt) => {
        var ray = ();
        var cartesian = (ray, );
        var cartographic = (cartesian);
        var lng = (); // 经度值
        var lat = (); // 纬度值
        // 添加动态扩散模型
        circleWave({ viewer, lng, lat});
    }, .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,
    };

    (viewModel);
    const toolbar = ("toolbar-wave");
    (toolbar);
    (viewModel, toolbar);
    
        .getObservable(viewModel, "color1")
        .subscribe(function (newValue) {
            const a = new ({
                color: getColor(newValue, 0.9),
                speed: viewModel.speedSize1,
                count: 4,
                gradient: 0.2
            });
             = a;
            params['color'] = newValue;
        });

    
        .getObservable(viewModel, "widthSize1")
        .subscribe(function (newValue) {
             = parseFloat(newValue);
             = parseFloat(newValue);
        });

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

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

function getColor(colorName, alpha) {
        const color = [()];
        return (color, parseFloat(alpha));
    }

二、源码下载：附带cesium框架，一键运行。

 Cesium实现动态扩散预警-Javascript文档类资源-****文库