13. Heatmap 热力图层

13. Heatmap 热力图层

概述

Heatmap 图层根据点要素的密度生成热力图，适合可视化数据分布密度。本节学习：

• Heatmap 图层基本用法
• heatmap-weight / heatmap-intensity / heatmap-radius / heatmap-color
• 密度可视化实战

---

基本用法

map.addLayer({
  id: 'heatmap',
  type: 'heatmap',
  source: 'points',
  paint: {
    'heatmap-radius': 20,
    'heatmap-opacity': 0.8
  }
})

---

Paint 属性

属性	说明	默认值
heatmap-radius	影响半径（像素）	30
heatmap-weight	每个点的权重	1
heatmap-intensity	热力强度	1
heatmap-color	颜色映射	蓝→绿→黄→红
heatmap-opacity	透明度	1

heatmap-color

paint: {
  'heatmap-color': [
    'interpolate', ['linear'], ['heatmap-density'],
    0, 'rgba(0,0,255,0)',
    0.2, 'royalblue',
    0.4, 'cyan',
    0.6, 'lime',
    0.8, 'yellow',
    1, 'red'
  ]
}

heatmap-weight 数据驱动

paint: {
  'heatmap-weight': [
    'interpolate', ['linear'], ['get', 'magnitude'],
    0, 0,
    6, 1
  ]
}

---

本课小结

• Heatmap 图层可视化点要素密度
• heatmap-radius 控制影响范围
• heatmap-color 定义密度到颜色的映射
• 结合 zoom 表达式可实现缩放自适应

---

📌 上一节：12. Circle 圆点图层 📌 下一节：14. Fill-extrusion 3D 建筑图层