如何扩展 Leaflet Icon Class 以将 data-open 属性添加到标记 HTML？

Question

我试图通过点击 Leaflet 中 GeoJSON 图层上的标记来触发某些功能。我试图实现的最终功能是一个弹出窗口，或从 individual 功能的 JSON 属性填充的滚动类型模式。本质上，我正在尝试使用基于标记点击的动态功能内容来实现此 Tutsplus Tutorial 中的功能。

我想我已经弄清楚了我需要的大部分内容，但我正在努力解决如何向 individual 标记添加数据属性，特别是 data-open。基于我之前的一个问题，我意识到仅仅更新 DOM 元素的 CSS 是不够的，我的应用程序应该根据数据属性实施更改以完全获得我想要的功能。

来自我知道这应该通过扩展 Leaflet 提供的 L.Icon class 来完成，但答案对于我目前的 JS 技能来说有点太简洁了。对于这实际上是先前提出的问题的“ELI5”，我深表歉意，但我不确定 options 和 slug 在哪里起作用。我认为它们是由问题暗示的，而不是我引用并设置在标记本身上的答案。

这是我的标记上点击处理程序的简化版本，它抓取并缩放到位置，获取特征信息，并将该信息填充到 div。缩放功能有效，提取和放置要素信息也是如此，但我正在努力解决如何连接功能以触发模式并将 div 与要素信息放在地图上的问题。

function zoomToFeature(e) {
  var latLngs = [e.target.getLatLng()];
  var markerBounds = L.latLngBounds(latLngs);
  var street = e.target.feature.properties.str_addr;
  document.getElementById('street').textContent = street;
  mymap.fitBounds(markerBounds);
  //where the modal trigger should be
  document.getElementById('infoBox').classList.add('is-visible');
}

以下是从链接教程中获取的事件侦听器，目前未触发，但我让它们在独立实现中工作：

const openEls = document.querySelectorAll("[data-open]");
const closeEls = document.querySelectorAll("[data-close]");
const isVisible = "is-visible";
//this is the event I want to trigger on marker click
for (const el of openEls) {
  el.addEventListener("click", function() {
    const modalId = this.dataset.open;
    console.log(this);
    document.getElementById(modalId).classList.add(isVisible);
  });
}
for (const el of closeEls) {
  el.addEventListener("click", function() {
 this.parentElement.parentElement.parentElement.classList.remove(isVisible);
  });
}
document.addEventListener("click", e => {
  if (e.target == document.querySelector(".modal.is-visible")) {
    document.querySelector(".modal.is-visible").classList.remove(isVisible);
  }
});

所以，我想知道的是，当我的标记被点击时，触发模式出现在地图上。所以，我认为我缺少将标记点击事件与触发模式的事件联系起来。我认为缺少的是将 data 属性添加到标记，或者以某种方式链接没有数据属性的事件。由于没有直接的方法向标记添加属性，我尝试在我的圆形标记上添加 slug 选项：

var circleMarkerOptions = {
    radius: 2,
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8,
    slug: 'open',
}

如果我正确阅读了之前提出的问题的答案，那么以这种方式扩展图标 Class 应该添加一个 data-open 属性。

L.Icon.DataMarkup = L.Icon.extend({

    _setIconStyles: function(img, name) {
        L.Icon.prototype._setIconStyles.call(this, img, name);

        if (options.slug) {
            img.dataset.slug = options.slug;
        }
    }

});

我的 code is here 的精简版（感谢@ghybs）。我的完整实现从 PostGIS table 中提取标记。在 Plunker 中很难看到，但是这段代码将我的 class 添加到我的模式中，但不会触发该功能。如果 class 手动更新为 modal.is-visible，它确实会触发可见性，但呈现 modal is-visbile 的当前实现不会，我认为这是因为 CSS 被解释在页面加载时（？）而不是通过开发工具响应更新，而串联的 css class 完全匹配（？）。当我确实通过开发工具触发模态时，关闭模态侦听器似乎不起作用，所以我也遗漏了那块拼图。

Answer 1

所以，这是设置数据属性的 work-around，但我意识到我 shoe-horning 是一个不需要它的解决方案。假设有人最终遇到了同样的心理障碍。模式关闭按钮上的适当侦听器和传递给现有标记点击侦听器的另一个函数产生所需的功能。

const closeM = document.querySelector(".close-modal");
closeM.addEventListener("click", closeMe);
var modal = document.getElementById('infoBox');

和

function modalAction(){
    modal.style.display = 'block';
}
function closeMe(){
    modal.style.display = 'none';
}

如何扩展 Leaflet Icon Class 以将 data-open 属性添加到标记 HTML？

How to extend Leaflet Icon Class to add data-open attribute to marker HTML?

javascript

custom-data-attribute

dom-events

leaflet