javascript - 如何将点击事件绑定(bind)到 Leaflet Canvas GridLayer

Question

我正在尝试将点击事件绑定(bind)到传单插件的 Canvas GridLayer 扩展(使用 Leaflet 1.0，带 Leaflet.MaskCanvas )。

From the Leaflet Documentation about GridLayer ，我希望我可以使用任一方法将点击绑定(bind)到 coverageLayer

// add event listener to determine when layer has been clicked
coverageLayer.on('click', function(e) {
  console.log('clicked the line');
});
// second (alias) method to add event listener
coverageLayer.addEventListener('click', function(e) {
  console.log('clicked the line');
});

但以上似乎都不起作用。

Here's a fiddle我在其中 fork 并调整了 MaskCanvas 插件中的示例代码。

是否有其他方法可以将点击绑定(bind)到 Leaflet 中的 Canvas 层？

编辑:.on() 和 .addEventListener() 是别名。

以前的问题涉及 Leaflet 0.7 和 TileLayer。来自old Leaflet Documentation , TileLayer 似乎没有这些事件。 JSFiddle 代码已更新为使用 Leaflet 1.0。

Answer 1

在 Leaflet 1.0 中，GridLayer s 不处理鼠标/触摸/指针事件(注意它们的 events documentation 确实不列出指针事件，而一些 other layer types do )。

此外，包含图 block 的 DOM 元素(<div class='leaflet-tile-container>)具有 pointer-events: none; CSS 规则。这使得浏览器忽略指针事件(给它一点点更好的性能)。

您需要将事件附加到单元格本身(在自定义 createTile() 时)并覆盖 pointer-events CSS 规则。