leaflet-heat 热力图遮挡地图事件问题

目录

问题

分析

解决

问题

在使用leaflet 绘制热力图时，遇到这样一个问题：热力图添加后，底图和其他地图元素上的单击、悬浮等事件就不生效了；

分析

在浏览器中查看页面元素发现，热力图和底图分开在绘制在两个canvas中，热力图要显示在上层，因此遮挡了底图和其他地图元素的事件；

解决

这实际上可以理解为原生html的问题，就是：当两个元素重叠后，如何使下层元素的事件响应；

解决方法：给热力图所在canvas添加css属性：

.leaflet-heatmap-layer {

  pointer-events: none;

}

这样鼠标就能够穿透热力图所在的canvas元素；

参考：html 中元素如何实现点击穿透和阻止点击穿透？_大筒木·辉夜的博客-CSDN博客_html 点击事件透传