Cesium专栏-热力图

热力图，从地理学角度看，是一种展示某种现象聚集程度的方法。热力图是地理位置可视化的一种表现方式，能够使得比平均发生概率更高的区域能够浮现出来，例如高犯罪区、高交通事故区、高仓库区域。百度搜索“热力图”，能看到大量热力图的实例。

效果图

具体做法

Cesium中也是基于heatmap.js这个最基础的库，然后再此基础上，进行拓展。不过在这个基础上，我们使用的是 Cesium Heatmap Library，也就是专门为Cesium拓展的热力图库，大大方便了我们的工作。

1、引用js库

<script src="./CesiumHeatmap.js"></script>

2、创建地球

var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}'
    })
});

3、指定热力图区域范围

var bounds = {
    west: 147.13833844,
    east: 147.13856899,
    south: -41.43606916,
    north: -41.43582929
};

4、创建heatmap对象

var heatMap = CesiumHeatmap.create(
    viewer, // 指定容器
    bounds, // 指定热力区域范围
    {
        // heatmap.js 自定义热力参数，覆盖原有参数值
    }
);

5、获取热力数据

数据格式：
[    { "x": 110, "y": 20, "value": 76 },    { "x": 111, "y": 30, "value": 80 },    ......]

6、设置热力值区间

var valueMin = 0;
var valueMax = 100;

7、渲染成图

heatMap.setWGS84Data(valueMin, valueMax, data);

附：热力参数介绍

radius // 决定点的半径大小。
maxOpacity // 最大透明度
minOpacity // 最小透明度
blur  // 每个点都是两个圆组成的，分别为内圆和外圆；外圆越大，看起来这个点越模糊，内圆部分比较清晰；外圆的颜色比较固定且与内圆颜色不同，内圆的颜色由value确定；blur决定外圆与内圆的占比大小，值为0-1；值越大，外圆占比越大。
gradient: // 混合色

link==>