首页 / OpenLayers / API 文档

HeatmapLayer

先看结论

热力图层。把点要素按密度累积成彩色渐变，用颜色深浅表达聚集程度。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-27 · 引用本文

new ol.layer.Heatmap(options)

构造参数

参数	说明
`source`	点要素数据源，通常是 `ol.source.Vector`，必填
`blur`	模糊半径像素，默认 15
`radius`	单点扩散半径像素，默认 8
`weight`	权重来源，属性名或函数，默认 `'weight'`
`gradient`	渐变色数组，由冷到热
`opacity`	整层透明度
`visible`	是否显示，默认 true
`extent`	渲染范围
`zIndex`	叠放层级

常用方法

方法	返回	说明
`getBlur()` / `setBlur(blur)`	number / void	读写模糊半径
`getRadius()` / `setRadius(radius)`	number / void	读写单点半径
`getGradient()` / `setGradient(g)`	Array<string> / void	读写渐变色带
`getSource()`	VectorSource	取点数据源

var points = [];
for (var i = 0; i < 400; i++) {
  points.push(new ol.Feature({
    geometry: new ol.geom.Point(
      ol.proj.fromLonLat([116.30 + Math.random() * 0.25, 39.85 + Math.random() * 0.15])),
    weight: Math.round(Math.random() * 10)
  }));
}

var heat = new ol.layer.Heatmap({
  source: new ol.source.Vector({ features: points }),
  blur: 18,
  radius: 9,
  weight: function (feature) {
    return feature.get('weight') / 10;
  },
  gradient: ['#1f4bd0', '#21c4c4', '#3fc44a', '#f2d13a', '#d8402f'],
  opacity: 0.85
});

map.addLayer(heat);
heat.setRadius(14);

注意事项

数据源里的几何体应是点，线面要素不会被正确累积，需要先取质心转成点。
weight 返回的数值越大越热；返回 0 或非数值的点不产生颜色，可用于过滤异常记录。
radius 与 blur 的单位是屏幕像素，不随缩放变化，放大后单点覆盖的地理范围会缩小。
gradient 至少给两个颜色，颜色数量变化会引起重算，逐个切换时优先构造新图层而不是反复 set。

引用本文

经纬志（2026）。《HeatmapLayer》。https://www.jingweizhi.com/openlayers/api/heatmap-layer.html（访问日期 2026-11-03）。