如何从GridLayer制作交互式传单 [英] How to Make interactive Leaflet Tiles from GridLayer

问题描述

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

By extending GridLayer, you can return a custom div element to load your own visual for each tile based on the coordinate. For what I want to do, I want to make each tile responsive so it does something when you hover over it. However, adding this attribute to the div doesn't do anything, same with clicking and other interactivity. It seems like Leaflet just renders them separately and returns the composite image they produce, erasing my attributes.

我必须改为从地图中提取事件，找到我单击的图块，更改该图块的数据，然后重新加载图层以显示更改.有更快，更清洁的方法吗?

I have to instead pull the event from the map, find the tile I clicked, change the data for that tile, and reload the layer so that the changes show. Is there a faster and cleaner way to do this?

推荐答案

首先，请注意

First, be aware that Leaflet sets the CSS pointer-events property to none to the tile containers:

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

即使将事件处理程序附加到磁贴上，也没有事件到达这些事件处理程序.

Even if you attach event handlers to the tiles, no events will reach those event handlers.

但是，您可以使用GridLayer和CSS规则上的CSS类，或通过逐位设置该属性的值来覆盖该CSS属性的值(顺便说一句，请务必阅读关于以pointer-events: none为元素后代的指针事件的说明).

You can, however, override the value of that CSS property using a CSS class on the GridLayer and CSS rules, or by setting the value of that property on a per-tile basis (BTW do read the note about pointer events targeting descendants of an element with pointer-events: none).

所以我可以做类似的事情

So I can do something like

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;
};

您可以在此处看到工作示例.

这篇关于如何从GridLayer制作交互式传单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！