在cesium中实现热力图

    刚开始接触cesium，说实话，对于像我这类的小白来说，要想快速上手，确实有一定的难度，但是站在巨人的肩膀上，往往总会少走很多弯路。

    原理：使用heatmap.js插件，先生成一个热力图，再在地图上创建一个盒子（如矩形），以纹理的形式把热力图填充到矩形中。

    1、首先下载heatmap.js插件，自己随意写了一个热力图的方法，传入热力图所需参数max和data

// 创建热力图
function createHeatMap(max, data) {
    // 创建元素
    var heatDoc = document.createElement("div");
    heatDoc.setAttribute("style", "width:1000px;height:1000px;margin: 0px;display: none;");
    document.body.appendChild(heatDoc);
    // 创建热力图对象
    var heatmap = h337.create({
        container: heatDoc,
        radius: 20,
        maxOpacity: .5,
        minOpacity: 0,
        blur: .75,
        gradient: {
            '0.9':'red',
            '0.8':'orange',
            '0.7':'yellow',
            '0.5':'blue',
            '0.3':'green',
        },
    });
    // 添加数据
    heatmap.setData({
        max: max,
        data: data
    });
    return heatmap;
}

    2、创建一个cesium视图对象

var viewer = new Cesium.Viewer("viewer");

    3、在之前建的cesium视图中，创建一个矩形（也可是椭圆、正方形、多边形等），在矩形内以纹理的形式填充，自己随意封装了一个方法

// 创建正方形 绑定热力图 
function createRectangle(viewer, coordinate, heatMap) {
    viewer.entities.add({
        name: 'Rotating rectangle with rotating texture coordinate',
        show: true,
        rectangle: {
            coordinates: Cesium.Rectangle.fromDegrees(coordinate[0], coordinate[1], coordinate[2], coordinate[3]),
            material: heatMap._renderer.canvas // 核心语句，填充热力图
        }
    });
}

    4、随意生成多个点数据

// 生成len个随机数据
function getData(len) {
    //构建一些随机数据点
    var points = [];
    var max = 0;
    var width = 1000;
    var height = 1000;
    while (len--) {
        var val = Math.floor(Math.random() * 1000);
        max = Math.max(max, val);
        var point = {
            x: Math.floor(Math.random() * width),
            y: Math.floor(Math.random() * height),
            value: val
        };
        points.push(point);
    }
    return {
   max: max, data: points}
}

    5、使用上述方法，则生成热力图

// 第一个热力图
var coordinate1 = [-109.0, 10.0, -80.0, 35.0];
var heatMap1 = createHeatMap(getData(1000).max, getData(1000).data);
creatRectangle(viewer, coordinate1, heatMap1);

// 第二个热力图
var coordinate2 = [-109.0, 30.0, -80.0, 41.0];
var heatMap2 = createHeatMap(getData(3000).max, getData(3000).data);
creatRectangle(viewer, coordinate2, heatMap2);

// 第三个热力图
var coordinate3 = [-109.0, 41.0, -80.0, 50.0];
var heatMap3 = createHeatMap(getData(5000).max, getData(5000).data);
creatRectangle(viewer, coordinate3, heatMap3);

    6、效果如下，因为数据都是随意添加的，所以效果不好，但是可以体现出能在cesium中实现热力图

ps：此文章仅供参考，大神勿喷

参考来源：https://blog.csdn.net/u013929284/article/details/71928173