Leaflet中多边形Polygon事件监听失效的可能原因_leaflet 多边形点击事件

1、问题描述

最近项目中，需要使用leaflet库在地图上绘制多边形，并对它进行监听，代码很简单，但是有坑：

  const hexagon = L.polygon(vertices, { color: '#999', fill: false, weight: 1 }).addTo(map)
  hexagon.on('click', () => console.log('111'))
1
2

但是这时候无论怎么点击都没反应。

2.探索解决办法

百思不得其解，就把构建polygon的方法换成默认的。居然可以监听到。

const hexagon = L.polygon(vertices).addTo(map)
1

反思一下应该是我之前觉得默认的样式会自动填充，就自己设置了几个属性，没想到会影响多边形的事件监听。

查资料发现，leaflet的polygon的fill属性对点击事件确实会产生影响，对于未填充的正六边形，点击事件会在其边界上触发，而不会在内部触发。这是因为点击事件通常在图形的可点击区域内进行。填充属性为 false 的正六边形没有可点击的区域，因此点击事件无法在其内部触发。

于是修改代码，因为不加样式会有默认的颜色填充，于是fill用默认的，但是把fill透明度设置为0，效果也是一样：

  const hexagon = L.polygon(vertices, { color: '#999', weight: 1, fillOpacity: 0 }).addTo(map)
  hexagon.on('click', () => console.log('111'))
1
2

3、总结

使用leaflet常见多边形polygon时，如果fill属性设置为false会导致多边形的监听失效。