如何绑定一个点击事件到一个传单画布的GridLayer

How to bind a click event to a Leaflet canvas GridLayer

本文关键字：一个 单画布 GridLayer 事件 何绑定 绑定      更新时间：2023-09-26

我正在尝试将单击事件绑定到画布GridLayer的传单插件扩展(使用传单1.0，使用leaflet . maskcanvas)。

从关于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');
});

，但以上两个似乎都不起作用。

这里是我从MaskCanvas插件中分叉并调整的示例代码。

是否有一些其他的方法来绑定点击到画布层在传单?

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

先前的问题涉及到传单0.7和TileLayer。从旧的传单文档来看，TileLayer似乎没有这些事件。JSFiddle代码已更新为使用传单1.0

在传单1.0中，GridLayer s不处理鼠标/触摸/指针事件(注意他们的事件文档不列出指针事件，而其他一些层类型做)。

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

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

相关文章：