Cesium淹没分析（带热力图效果）

Cesium淹没分析（带热力图效果）

效果图

1.构建的rectangle Entity，实现淹没效果

let entity = viewer.entities.add({
            rectangle: {
                coordinates: Cesium.Rectangle.fromCartesianArray(Cesium.Cartesian3.fromDegreesArray(coordinates)),//coordinates是水淹范围经纬度坐标数组 格式[经度，纬度，经度，纬度，......]
                material: new Cesium.ImageMaterialProperty({
                    image: heatMap._renderer.canvas,//热力图画布
                    transparent: true
                }),

                extrudedHeight: new Cesium.CallbackProperty(() => extrudedHeight, false)//extrudedHeight水淹高度
            }
        })

2.加入热力图画布

//热力图数值 部分例子
 [{
        "x": 0,
        "y": 100,
        "value": 176.95826437216726
    },
    {
        "x": 0,
        "y": 98,
        "value": 230.1923940189951
    },
    {
        "x": 0,
        "y": 96,
        "value": 426.53616538853737
    },
    {
        "x": 0,
        "y": 94,
        "value": 497.42594307709976
    },
    {
        "x": 0,
        "y": 92,
        "value": 408.30661293631476
    },
    {
        "x": 0,
        "y": 90,
        "value": 181.39132069060315
    },
    {
        "x": 0,
        "y": 88,
        "value": 176
    },
    {
        "x": 0,
        "y": 86,
        "value": 176
    },
    {
        "x": 0,
        "y": 84,
        "value": 176
    }]

 //热力图构建
        var heatDoc = document.createElement("div");
        heatDoc.setAttribute("style", "width:100px;height:100px;margin: 0px;display: none;");
        document.body.appendChild(heatDoc);
        // 创建热力图对象
        var heatmap = h337.create({
            container: heatDoc,
            radius: 2,//渲染半径
            maxOpacity: .9,//色块最大透明度
            minOpacity: .7,//色块最小透明度
            blur: .55,
            gradient: {
                '0.9': 'red',
                '0.7': 'orange',
                '0.5': 'yellow',
                '0.3': 'blue',
            },//色阶
        });
        // 添加数据
        heatmap.setData({
            max: max,
            data: data
        });

        return heatmap;

heatmap.js、CesiumHeatmap.js
地址：https://download.csdn.net/download/weixin_44339199/84194949
完整代码：https://download.csdn.net/download/weixin_44339199/84656234