如何从 GridLayer 制作交互式传单图块

Question

通过扩展 GridLayer，您可以返回自定义 div 元素，以根据坐标为每个图块加载您自己的视觉效果。对于我想做的事情，我想让每个图块具有响应能力，以便当您将鼠标悬停在它上面时它会执行某些操作。但是，将此属性添加到 div 不会执行任何操作，与单击和其他交互性相同。看起来 Leaflet 只是单独渲染它们并返回它们生成的合成图像，从而删除了我的属性。

我必须从地图中提取事件，找到我单击的图块，更改该图块的数据，然后重新加载图层以便显示更改。有没有更快、更干净的方法来做到这一点？

Answer 1

首先，请注意Leaflet 将CSSpointer-events属性设置none为图块容器：

.leaflet-tile-container {
    pointer-events: none;
}

即使您将事件处理程序附加到图块，也不会发生任何事件到达这些事件处理程序。

但是，您可以使用 CSS 和 CSS 规则上的 CSS 类来覆盖该 CSS 属性的值GridLayer，或者通过在每个图块的基础上设置该属性的值（顺便说一句，请阅读有关针对元素后代的指针事件的注释）和pointer-events: none）。

所以我可以做类似的事情

grid.createTile = function (coords) {
  var tile = L.DomUtil.create('div', 'tile-hoverable');

  // Ensure that this tile will respond to pointer events,
  // by setting its CSS 'pointer-events' property programatically
  tile.style.pointerEvents = 'initial';

  // Attach some event handlers to this particular tile
  L.DomEvent.on(tile, 'mouseover', function(){
    tile.style.background = 'red';
  });
  L.DomEvent.on(tile, 'mouseout', function(){
    tile.style.background = 'transparent';
  });

  return tile;
};

您可以在此处查看一个工作示例。