HTML5中实现热力图需Leaflet+heatmap.js组合，关键在坐标系对齐与性能优化：用HeatmapOverlay桥接、确保容器宽高及relative定位、设置合理radius、数据格式合规，并通过节流、采样、聚类应对大数据量，特别注意iOS Safari的canvas兼容性问题。
HTML5中用Leaflet + heatmap.js实现热力图
直接用原生HTML5调用地图做热力图不现实——HTML5本身没有地图或热力图能力，必须依赖第三方地图库和可视化库。最轻量、兼容性好、适配移动端的组合是 Leaflet（地图） + heatmap.js（热力图渲染），两者都支持纯前端运行，无需后端服务。
关键点：热力图数据不能直接叠加在Leaflet瓦片图上，必须用 HeatmapOverlay 这类桥接层，否则坐标系错位、缩放失步。
常见错误现象：heatmap appears in top-left corner、points don’t move when zooming，基本都是坐标未转换或容器绑定错误。
- 确保地图容器有明确宽高（不能靠内容撑开），且
position: relative - 初始化
HeatmapOverlay时传入的radius值建议设为20～40，太大易糊成一片，太小看不出聚集效应 - 数据格式必须是
{max: number, data: [{lat: number, lng: number, value: number}...]}，value非必需，但加了能体现强度差异 - Leaflet 的 CRS 默认是
EPSG3857，heatmap.js默认按像素坐标画图，所以必须用HeatmapOverlay或类似封装来自动做经纬度→像素映射
避免 heatmap.js 与 Leaflet 坐标不同步
这是最常卡住人的地方：直接把 heatmap.js 的 HeatmapOverlay 实例挂到 document.body，它根本不知道地图当前缩放级别和中心点，画出来的点永远固定在初始视口位置。
立即学习“前端免费学习笔记（深入）”；
