javascript - 返回点击的图层传单

Question

我想选择一个通过 leaflet.draw 创建的多边形通过点击。这就是我实现leaflet.draw

的方式

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

// Initialise the draw control and pass it the FeatureGroup of editable   layers
var drawControl = new L.Control.Draw({
  edit: {
    featureGroup: drawnItems
  }
});
map.addControl(drawControl);

// event when polygon is created
map.on('draw:created', function(e) {
  var type = e.layerType,
    layer = e.layer;

  // add created polygon to Itemcollection
  drawnItems.addLayer(layer);

  // add to map
  map.addLayer(layer);
});

然后我想知道我单击的是哪个多边形。我用each.layer来做到这一点

drawnItems.eachLayer(function(layer) {
  layer.on('click', function() {
    console.log(this._leaflet_id);
  });
});

但是，这永远不会返回任何内容。当我用 map

替换 drawnItems 时

map.eachLayer(function(layer) {
  layer.on('click', function() {
    console.log(this._leaflet_id);
  });
});

它确实有效——有点。即使我点击不同的多边形，它总是返回相同的id...问题在哪里？

Answer 1

至于 drawnItems 组上的点击事件监听器未显示任何内容，这可能是因为您在 before 之前循环了 drawnItems.eachLayer实际上充满了您绘制的特征/多边形。

eachLayer 将循环遍历当前子层。它不会对以后添加的图层产生任何影响。

您可以直接将监听器附加到您的drawnItems功能组。在这种情况下，您可以通过 event.layer 访问触发事件的子层，其中 event 是监听器参数:

drawnItems.on("click", function(event) {
    console.log("from drawnItems: " + event.layer._leaflet_id);
});

至于 map 上的监听器，由于相同的原始原因(eachLayer 循环遍历)，它始终显示相同的 id当前子层，即在您的情况下很可能只有drawnItems)，并且您的drawnItems功能组也会发出“点击” 事件。因此，您实际上每次都会看到 drawnItems 的 id。

演示:https://jsfiddle.net/3v7hd2vx/108/