热力图
原理:在客户端直接渲染的栅格图,热点图的渲染需要三大要素:
- 热点数据,热点数据需要点数据,每一个热点数据需要有地理位置以及权重值 (能够明显的表现某位置某事件发生频率或事物分布密度等,如可以为温度的高低、人口密集度等等)
- 热点衰减渐变填充色集合, 用于渲染每一个热点从中心向外衰减时的渐变色
- 热点半径,也就是衰减半径。每一个热点需要从中心点外四周根据半径计算衰减度, 对在热点衰减区内的每一个像素计算需要渲染的颜色值,然后进行客户端渲染
应用场景:由于热点图的衰减是像素级别的,视觉效果方面极佳,但不能与具体数据进行一一对应,只能表示权重之间的差别,所以可以用于一些对精度要求不高而需要重点突出权重渐变的行业,如可以制作气象温度对比动态效果图、地震区域的震点强弱图等。
//创建热力图
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);