如何将点击事件绑定到Leaflet画布GridLayer？

Question

我正在尝试绑定一个点击事件到一个叶片插件的扩展画布GridLayer上（使用Leaflet 1.0，其中包含Leaflet.MaskCanvas）。

根据Leaflet文档关于GridLayer的说明，我期望可以使用以下任一方式将点击绑定到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');
});

但是以上两种方法似乎都不起作用。

这里是一个 JSFiddle 示例，我已经 fork 并调整了 MaskCanvas 插件的示例代码。

还有其他方法可以将 click 事件绑定到 Leaflet 中的画布层吗？

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

之前的问题涉及 Leaflet 0.7 和 TileLayer。从 旧版 Leaflet 文档 中可以看出，TileLayer 没有这些事件。JSFiddle 代码已更新为使用 Leaflet 1.0。

- user2441511

---

我有同样的问题，你找到解决方案了吗？我正在使用leaflet 1.0.2。 - diwatu

@Gisway 我通过捕获所有点击事件并将其与包含画布层上绘制的所有 L.LatLng 值的数组进行比较来解决了这个问题。如果点击位置在某个公差范围内与 L.LatLng 值匹配，则认为它已经点击了该元素。虽然不太美观，但它能够正常工作。如果您找到更好的方法，请告诉我！ - user2441511

Answer 1

在Leaflet 1.0中，GridLayer不处理鼠标/触摸/指针事件（请注意，它们的事件文档不列出指针事件，���一些其他图层类型则有）。

此外，包含图块的DOM元素（一个<div class='leaflet-tile-container>）具有一个pointer-events: none; CSS规则。这使得浏览器忽略指针事件（从而提高了一点性能）。

你需要将事件附加到单元格本身（当在自定义的createTile()内部时），并覆盖pointer-events CSS规则。

- IvanSanchez

---

谢谢，这非常有帮助。那么我的想法是在createTile（）函数内实现：要么是this.addEventListener('click', function(e) { console.log('clicked the tile'); });，要么是tile.addEventListener('click', function(e) { console.log('clicked tile'); });其中tile是画布。但是这两种方法似乎都没用。（我还将CSS更改为.leaflet-tile-container { cursor: pointer; pointer-events: auto; }）。光标现在是一个指针，但是点击仍然没有注册。我正在使用Google Chrome。还有其他建议吗？ - user2441511