1、问题描述
最近项目中,需要使用leaflet库在地图上绘制多边形,并对它进行监听,代码很简单,但是有坑:
const hexagon = L.polygon(vertices, { color: '#999', fill: false, weight: 1 }).addTo(map)
hexagon.on('click', () => console.log('111'))
但是这时候无论怎么点击都没反应。
2.探索解决办法
百思不得其解,就把构建polygon的方法换成默认的。居然可以监听到。
const hexagon = L.polygon(vertices).addTo(map)
反思一下应该是我之前觉得默认的样式会自动填充,就自己设置了几个属性,没想到会影响多边形的事件监听。
查资料发现,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'))
3、总结
使用leaflet常见多边形polygon时,如果fill属性设置为false会导致多边形的监听失效。