cesium添加环形扩散圆，动态扩散

1 首先实现添加一个圆的逻辑

let entity= viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(103.0, 40.0),
  name: 'Red ellipse on surface with outline',
  ellipse: {
    semiMinorAxis: 250000.0,
    semiMajorAxis: 400000.0,
    material: Cesium.Color.RED.withAlpha(0.5),
    outlineColor: Cesium.Color.RED
  }

});

2 实现添加一个动态扩散圆的逻辑

查看API可以发现semiMinorAxis，semiMajorAxis都可以指定Property值，Property的各项使用说明可参见该篇文章

https://www.jianshu.com/p/f0b47997224c

因此，想得到一个动态扩散的圆逻辑就很简单了，只需要将semiMinorAxis，semiMajorAxis设置为动态改变的回调函数即可

var r1=data.minR  //指定扩散圆的最小半径，maxR为扩散圆的最大半径

function changeR1() { //这是callback，参数不能内传
    r1=r1+data.deviationR;//deviationR为每次圆增加的大小
    if(r1>=data.maxR){
        r1=data.minR;
    }

    return r1;
}

let entity={
    id:data.id,
    name:"",
    position:Cesium.Cartesian3.fromDegrees(data.lon,data.lat,data.height),
    ellipse : {
        semiMinorAxis :new Cesium.CallbackProperty(changeR1,false),
        semiMajorAxis :new Cesium.CallbackProperty(changeR1,false),
        height:data.height,
        material: Cesium.Color.RED.withAlpha(0.3),
    }
}

cesium添加环形扩散圆，动态扩散

3 上述实现的扩散圆比较丑，这是因为各处颜色均相同，导致视觉效果较差，因此引入一个各处颜色不一的圆形图片作为圆形的材质。（实际上纯canvas也可以实现这种效果，有机会再研究吧）

https://blog.****.net/A873054267/article/details/102570812-------canvas实现动态扩散

viewer.entities.add({
    id:data.id,
    name:"",
    position:Cesium.Cartesian3.fromDegrees(data.lon,data.lat,data.height),
    ellipse : {
        semiMinorAxis :new Cesium.CallbackProperty(changeR1,false),
        semiMajorAxis :new Cesium.CallbackProperty(changeR1,false),
        height:data.height,
        material:new Cesium.ImageMaterialProperty({
            image:data.imageUrl,
            repeat:new Cesium.Cartesian2(1.0, 1.0),
            transparent:true,
            color:new Cesium.CallbackProperty(function () {
                var alp=1-r1/data.maxR;
                return Cesium.Color.WHITE.withAlpha(alp)  //entity的颜色透明 并不影响材质，并且 entity也会透明哦
            },false)
        })
    }
});

使用的图片

cesium添加环形扩散圆，动态扩散

4 要实现两个，只需要延时执行第二个添加扩散圆的逻辑即可。

setTimeout(function () {
    viewer.entities.add({
        name:"",
        position:Cesium.Cartesian3.fromDegrees(data.lon,data.lat,data.height),
        ellipse : {
            semiMinorAxis :new Cesium.CallbackProperty(changeR2,false),
            semiMajorAxis :new Cesium.CallbackProperty(changeR2,false),
            height:data.height,
            material:new Cesium.ImageMaterialProperty({
                image:data.imageUrl,
                repeat:new Cesium.Cartesian2(1.0, 1.0),
                transparent:true,
                color:new Cesium.CallbackProperty(function () {
                    var alp=1;
                    alp=1-r2/data.maxR;
                    return Cesium.Color.WHITE.withAlpha(alp)
                },false)
            })
        }
    });
},data.eachInterval)

5所有代码

function addCircleRipple(viewer,data){
    var r1=data.minR,r2=data.minR;

    function changeR1() { //这是callback，参数不能内传
        r1=r1+data.deviationR;
        if(r1>=data.maxR){
            r1=data.minR;
        }

        return r1;
    }
    function changeR2() {
        r2=r2+data.deviationR;
        if(r2>=data.maxR){
            r2=data.minR;
        }
        return r2;
    }
    viewer.entities.add({
        id:data.id,
        name:"",
        position:Cesium.Cartesian3.fromDegrees(data.lon,data.lat,data.height),
        ellipse : {
            semiMinorAxis :new Cesium.CallbackProperty(changeR1,false),
            semiMajorAxis :new Cesium.CallbackProperty(changeR1,false),
            height:data.height,
            material:new Cesium.ImageMaterialProperty({
                image:data.imageUrl,
                repeat:new Cesium.Cartesian2(1.0, 1.0),
                transparent:true,
                color:new Cesium.CallbackProperty(function () {
                    var alp=1-r1/data.maxR;
                    return Cesium.Color.WHITE.withAlpha(alp)  //entity的颜色透明 并不影响材质，并且 entity也会透明哦
                },false)
            })
        }
    });
    setTimeout(function () {
        viewer.entities.add({
            name:"",
            position:Cesium.Cartesian3.fromDegrees(data.lon,data.lat,data.height),
            ellipse : {
                semiMinorAxis :new Cesium.CallbackProperty(changeR2,false),
                semiMajorAxis :new Cesium.CallbackProperty(changeR2,false),
                height:data.height,
                material:new Cesium.ImageMaterialProperty({
                    image:data.imageUrl,
                    repeat:new Cesium.Cartesian2(1.0, 1.0),
                    transparent:true,
                    color:new Cesium.CallbackProperty(function () {
                        var alp=1;
                        alp=1-r2/data.maxR;
                        return Cesium.Color.WHITE.withAlpha(alp)
                    },false)
                })
            }
        });
    },data.eachInterval)
}

var lon=117.286419;
var lat=31.864436;
addCircleRipple(viewer,{ //默认只绘制两个圆圈叠加 如遇绘制多个，请自行源码内添加。
    id:"111",
    lon:lon,
    lat:lat,
    height:500,
    maxR:3000,
    minR:0,//最好为0
    deviationR:10,//差值 差值也大 速度越快
    eachInterval:2000,//两个圈的时间间隔
    imageUrl:"./redCircle2.png"
});

//如果添加中心线的话：
viewer.entities.add({
    name:"",
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            lon,lat,0,
            lon,lat, 5000,]
        ),
        width: 4,
        material : new Cesium.PolylineGlowMaterialProperty({ //发光线
            glowPower : 0.1,
            color : Cesium.Color.RED
        })
    }
});
viewer.zoomTo(viewer.entities);

cesium添加环形扩散圆，动态扩散

相关推荐