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，它根本不知道地图当前缩放级别和中心点，画出来的点永远固定在初始视口位置。
立即学习“前端免费学习笔记（深入）”；
正确做法是让热力图图层成为 Leaflet 的一个自定义图层，重写 onAdd 和 onRemove 方法，在每次地图移动/缩放时主动调用 heatmap.setData() 并触发重绘。
- 不要手动操作
heatmap._renderer.canvas，改用heatmap.setData({data: [...], max: ...}) - 监听
map.on('moveend', updateHeatmap)，并在updateHeatmap中重新计算当前可视区域内的点（可选优化，大数据量时有必要） - 若用
leaflet.heat插件（基于 heatmap.js 封装），直接用L.heatLayer(data, options)即可，它已内置坐标同步逻辑
性能瓶颈出现在哪儿？怎么压测
热力图卡顿通常不是算法问题，而是 DOM 层面的 canvas 频繁重绘或数据没做采样。1000 个点基本无压力，1 万点开始明显掉帧，5 万点以上必须处理。
- 用
leaflet.heat时，开启blur: 35比默认40更锐利，同时减少模糊计算开销 - 前端聚合推荐用
supercluster：先对原始点聚类，再把每个簇的中心+权重作为热力图输入点，数量可降到 1/10 甚至更低 - 避免在
move事件里实时 setData；改用throttle或requestAnimationFrame节流，比如每 16ms 最多更新一次 - 检查浏览器开发者工具的 Rendering 面板，确认是否因
canvas尺寸过大（如全屏地图下 canvas 宽高超 4096px）触发 GPU 降级
移动端 Safari 下热力图不显示？
iOS Safari 对 canvas 的 getImageData 和某些合成模式有限制，尤其在启用了「低电量模式」时，heatmap.js 的默认 gradient 渲染可能失效，表现为全黑或空白。
- 强制指定
gradient为字符串而非对象：{0.25: 'rgb(0,0,255)', 0.55: 'rgb(0,255,0)', 1.0: 'rgb(255,0,0)'} - 禁用硬件加速：给热力图 canvas 的父容器加
style="transform: translateZ(0)"反而容易出问题，建议移除所有 transform 相关样式 - 测试时关闭 iOS 的「降低透明度」辅助功能，该设置会干扰 canvas alpha 合成
- 真机调试用
safari://debug开启 Web Inspector，捕获canvas.getContext('2d')是否返回 null
热力图看着简单，实际要稳稳跑在各种设备上，核心就两点：坐标系对齐不能靠猜，性能边界得实测——特别是 Safari 的 canvas 行为，文档里不会写，但线上一碰就崩。
