cesium热力图（cesiumheatmap.js）

无意中看到有个大神写了一个cesiumheatmap.js，顾名思义，就是在cesium框架中实现热力图

原理是创建矩形，用heatmap.js生成一个canvas，再将canvas贴到矩形中

这位大神将热力图的canvas大小通过传入的矩形座标生成，将传入的数据也通过3D地图座标处理成浏览器正常盒子的x,y座标

可通过下载cesiumheatmap.js，引入到页面，再行使用

1、准备一个3D地图视图，并初始化一个矩形座标json

var viewer = new Cesium.Viewer("viewer");
// 矩形座标
var bounds = {
    west: -109.0, south: 30.0, east: -80.0, north: 50.0
};

2、初始化cesiumheatmap对象，传入相应的参数

// 初始化CesiumHeatmap
var heatMap = CesiumHeatmap.create(
    viewer, // 视图层
    bounds, // 矩形座标
    { // heatmap相应参数
        backgroundColor: "rgba(0,0,0,0)",
        radius: 50,
        maxOpacity: .5,
        minOpacity: 0,
        blur: .75
    }
);

3、加载heatmap数据，生成热力图

数据格式，此处为自己动态生成300个数据

[{x: -97.6433525165054, y: 45.61443064377248, value: 11.409122369106317}]

// add data to heatmap
heatMap.setWGS84Data(0, 100, getData(300));
viewer.zoomTo(viewer.entities);

4、贴上所有代码

var viewer = new Cesium.Viewer("viewer");
// 矩形座标
var bounds = {
    west: -109.0, south: 30.0, east: -80.0, north: 50.0
};

// 初始化CesiumHeatmap
var heatMap = CesiumHeatmap.create(
    viewer, // 视图层
    bounds, // 矩形座标
    { // heatmap相应参数
        backgroundColor: "rgba(0,0,0,0)",
        radius: 50,
        maxOpacity: .5,
        minOpacity: 0,
        blur: .75
    }
);

// 添加数据 最小值，最大值，数据集
heatMap.setWGS84Data(0, 100, getData(300));
viewer.zoomTo(viewer.entities);

// 动态数据 [{x: -97.6433525165054, y: 45.61443064377248, value: 11.409122369106317}]
function getData(length) {
    var data = [];
    for (var i = 0; i < length; i++) {
        var x = Math.random() * (-109 + 80) - 80;
        var y = Math.random() * (50 - 30) + 30;
        var value = Math.random() * 100;
        data.push({x: x, y: y, value: value});
    }
    return data;
}

效果如图