Cesium进阶学习三、热力图

一、简介
热力图是一种用颜色来表示数据密度或强度的图表。它通过将数据映射到不同的颜色，以展示数据的分布和变化情况。热力图通常用于显示大量数据的空间分布或趋势，帮助用户快速理解数据的模式和关系。

热力图的设计原理是基于人眼对颜色的敏感度，不同颜色的明暗程度可以传达不同的数据密度或强度。一般来说，较亮的颜色（如红色或黄色）表示高密度或高强度的数据，而较暗的颜色（如蓝色或绿色）表示低密度或低强度的数据。

热力图能反映哪些信息：
a、数据密度：热力图可以显示数据的分布密度，通过颜色的明暗程度来表示不同区域或点的数据密集程度。较亮的颜色表示高密度，较暗的颜色表示低密度。
b、数据强度：热力图可以显示数据的强度或权重。通过颜色的明暗程度来表示数据的强弱程度。较亮的颜色表示高强度，较暗的颜色表示低强度。
c、空间分布：热力图可以展示数据在空间上的分布情况。通过在地图或图表上显示颜色的分布，可以清晰地看到数据的空间分布模式和趋势。

二、热力图数据构成

热力图数据一般是具有经纬度信息和属性信息的一系列点集合。 经纬度用于展示空间分布趋势，属性信息用于展示强度。以高德地图 热力图开发示例 的数据为例，（北京部分“公园”数据）

数据格式：

let heatmapData = [{
   
        "lng": 116.191031,
        "lat": 39.988585,
        "count": 10
    }, {
   
        "lng": 116.389275,
        "lat": 39.925818,
        "count": 11
    }, {
   
        "lng": 116.287444,
        "lat": 39.810742,
        "count": 12
    }, {
   
        "lng": 116.481707,
        "lat": 39.940089,
        "count": 13
    },
    ...
]

三、如何绘制热力图

绘制热力图，我们一般使用热力图插件来进行绘制，这里使用heatmap.js这个插件，该插件被很多前端地图库采用，如Leaflet、GMAPS、Openlayers。该插件已经具备强大的热力图绘制功能，绘制热力图已不是难点，难点在于以下两点：
a、坐标转换
b、如何将绘制的结果正确地显示到Cesium上

1、坐标转换
heatmap.js使用的是屏幕坐标，即原点在屏幕左上角，往右为x轴正方向，往下为y轴正方向。我们拿到的热力图数据一般是包含经纬度信息和属性信息的点集合，这里选择高德地图api开发热力图示例中的数据进行测试 高德热力图

let heatmapData = [{
   
    "lng": 116.191031,
    "lat": 39.988585,
    "count": 10
}, {
   
    "lng": 116.389275,
    "lat": 39.925818,
    "count": 11
},
...
];

第一步，我们先获取热力图数据的范围大小

 let xMin = 180, yMin = 90, xMax = 0, yMax = 0;

//获取热力图数据的矩形范围

 heatmapData.forEach(data => {
   
     xMin = Math.min(data.lng, xMin);
     yMin = Math.min(data.lat, yMin);
     xMax = Math.max(data.lng, xMax);
     yMax = Math.max(data.lat, yMax);
 })

有了范围，我们就可以定义绘制热力图画布的大小,以下代码获取了热力图数据矩形范围的长和宽

//热力图数据矩形范围的长和宽

let w = xMax - xMin;
 let h = yMax - yMin;

第二步，定义画布大小，我们根据上面的宽度和高度定义用于绘制热力图画布的像素宽高

//定义用于绘制热力图画布的宽高

 let canvasWidth = w * 500;
 let canvasHeight = h * 500;

第三步、映射经纬度坐标到画布坐标有了热力图数据的经纬度范围和绘制热力图画布的宽高，我们就可以通过映射关系将热力图数据的经纬度坐标转为画布上的像素坐标了

//将经纬度数据坐标转换到画布的坐标系上

 let convertData = [];
 heatmapData.forEach(data => {
   
     let x = (data.lng - xMin) / w * canvasWidth;
     let y = -(data.lat - yMax) / h * canvasHeight;
     convertData.push({
   
         x: x,
         y: y,
         value: data.count
     })
 })

因为经纬度坐标和屏幕坐标的z轴方向是反的，所以在代码中我们将每个经纬度转到范围矩形的左上角，此时y值为负的，我们做个取反操作，这样就能正确表示为屏幕坐标了。

坐标数据转换成功后，我们通过heatmap.js将热力图数据绘制出来，完整代码如下：
//创建热力图对象

let heatmapInstance = h337.create({
   
    container: document.querySelector('#map3dContainer'),
    radius: 25, //给定半径
    maxOpacity: 0.8,
    minOpacity: 0,
});
let heatmapData = [{
   
    "lng": 116.191031,
    "lat": 39.988585,
    "count": 10
},
...
];
let xMin = 180