Как сделать интерактивные листовки из GridLayer

Question

Расширяя GridLayer, вы можете вернуть пользовательский элемент div, чтобы загрузить свой собственный визуал для каждой плитки на основе координаты. Для того, что я хочу сделать, я хочу сделать каждую плитку отзывчивой, чтобы она что-то делала, когда вы наводите курсор на нее. Однако добавление этого атрибута в div ничего не делает, так же как и щелчок и другая интерактивность. Кажется, что Leaflet просто визуализирует их отдельно и возвращает составное изображение, которое они производят, стирая мои атрибуты.

Вместо этого мне нужно вытащить событие с карты, найти плитку, на которую я нажал, изменить данные для этой плитки и перезагрузить слой, чтобы отобразились изменения. Есть ли более быстрый и чистый способ сделать это?

Answer 1

Во-первых, имейте в виду, что Leaflet устанавливает свойство CSS pointer-events на none для контейнеров плитки:

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

Даже если вы прикрепите обработчики событий к плиткам, никакие события не достигнут этих обработчиков.

Однако вы можете переопределить значение этого свойства CSS с помощью класса CSS в правилах GridLayer и CSS или путем установки значения этого свойства для каждой плитки (BTW действительно читает примечание о событиях указателя, нацеленных на потомков элемента с 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;
};

Вы можете увидеть рабочий пример здесь .