返回单击的层传单

Question

I want to select a created polygon, created through leaflet.draw by click. This is how I implement 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);
});

I then want to know, onto which polygon I click. I do this with each.layer

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

However, that never returns anything. When I replace drawnItems with map

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

It works – sort of. It always returns the same id though, even if I click on different polygons... Where is the hickup?

Answer 1

As for your click event listener on drawnItems group not displaying anything, this is probably because you loop through drawnItems.eachLayer before it is actually filled with your drawn features / polygons.

eachLayer will loop through the current child layers. It will not have any effect on layers that may be added later on.

You could rather directly attach your listener to your drawnItems Feature Group. In that case, you can access the child layer that triggered the event trough event.layer where event is the listener argument:

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

As for your listener on map , it displays always the same id due to the same original reason ( eachLayer loops through current child layers, ie only drawnItems very probably in your case), and the fact that your drawnItems Feature Group also emits a "click" event. Therefore, you are actually seeing the id of your drawnItems each time.

Demo: https://jsfiddle.net/3v7hd2vx/108/