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;
}

效果如圖