热力图

原理:在客户端直接渲染的栅格图,热点图的渲染需要三大要素:

  • 热点数据,热点数据需要点数据,每一个热点数据需要有地理位置以及权重值 (能够明显的表现某位置某事件发生频率或事物分布密度等,如可以为温度的高低、人口密集度等等)
  • 热点衰减渐变填充色集合, 用于渲染每一个热点从中心向外衰减时的渐变色
  • 热点半径,也就是衰减半径。每一个热点需要从中心点外四周根据半径计算衰减度, 对在热点衰减区内的每一个像素计算需要渲染的颜色值,然后进行客户端渲染

应用场景:由于热点图的衰减是像素级别的,视觉效果方面极佳,但不能与具体数据进行一一对应,只能表示权重之间的差别,所以可以用于一些对精度要求不高而需要重点突出权重渐变的行业,如可以制作气象温度对比动态效果图、地震区域的震点强弱图等。

//创建热力图
var xmax = 130, xmin = 80, ymax = 50, ymin = 20;
for (var i = 0; i < 100; i++) {
heatPoints[i] = new ol.Feature(new ol.geom.Point([Math.floor(Math.random() * (xmax - xmin + 1) + xmin), Math.floor(Math.random() * (ymax - ymin + 1) + ymin)]));
}
var heatMap = new ol.layer.Heatmap({
    source: new ol.source.Vector({
    //热力点数组
    features: heatPoints,
    wrapX: false
    }),
    //模糊大小
    blur: blur,
    //半径大小
    radius: radius
});
map.addLayer(heatMap);

查看完整示例代码

results matching ""

    No results matching ""