javascript - How to capture a click on a specific leaflet layer - Stack Overflow

admin管理员组

文章数量:1327849

I think the question says it all. I am using leaflet. I am loading three layers onto the map.

However I can't find a way to know on which layer I clicked after clicking on the map. Basically because there is no event handler set on layers, only onto the map.

I also tried to add the layers into a feature group and add an on click event to this feature group. However clicking on the map does not result in any event / response.

This is what I did in the featureGroup:

addWaterNameLayers: function() {

    var knownWaters = L.tileLayer.wms(getGeoServer('wms', geoEnviroment), {
        layers: this.wmsLayers.known.name,
        format: 'image/png',
        opacity: 0,
        styles: 'cursor: pointer',
        transparent: true,
        attribution: ""
    });//.addTo(this.mapInfo);

    var unknownWaters = L.tileLayer.wms(getGeoServer('wms', geoEnviroment), {
        layers: this.wmsLayers.unknown.name,
        format: 'image/png',
        opacity: 0.3,
        styles: '',
        transparent: true,
        attribution: ""
    });

    L.FeatureGroup(knownWaters, unknownWaters).on('click', function(event) {
       console.log('click');
       this.handleClick(event);
    },this);

    //this part will work on mapclick, so on featuregroup it should work?
    //when clicking on the map
    /*
    this.mapInfo.on('click', function(event) {
        this.handleClick(event);
    }, this);
    */

},

in the code above you can see the click event on te map as well... that one works. on the featuregroup it doesn't.

Also when I change the code for the featureGroup to these it will not work either:

    var featGr = L.FeatureGroup(knownWaters, unknownWaters).on('click', function(event) {
       this.handleClick(event);
    },this);


    var featGr = L.FeatureGroup(knownWaters, unknownWaters);
    featGr.on('click', function(event) {
       this.handleClick(event);
    },this);

adding the featureGroup to the layer will also do nothing...

I think the question says it all. I am using leaflet. I am loading three layers onto the map.

However I can't find a way to know on which layer I clicked after clicking on the map. Basically because there is no event handler set on layers, only onto the map.

I also tried to add the layers into a feature group and add an on click event to this feature group. However clicking on the map does not result in any event / response.

This is what I did in the featureGroup:

addWaterNameLayers: function() {

    var knownWaters = L.tileLayer.wms(getGeoServer('wms', geoEnviroment), {
        layers: this.wmsLayers.known.name,
        format: 'image/png',
        opacity: 0,
        styles: 'cursor: pointer',
        transparent: true,
        attribution: ""
    });//.addTo(this.mapInfo);

    var unknownWaters = L.tileLayer.wms(getGeoServer('wms', geoEnviroment), {
        layers: this.wmsLayers.unknown.name,
        format: 'image/png',
        opacity: 0.3,
        styles: '',
        transparent: true,
        attribution: ""
    });

    L.FeatureGroup(knownWaters, unknownWaters).on('click', function(event) {
       console.log('click');
       this.handleClick(event);
    },this);

    //this part will work on mapclick, so on featuregroup it should work?
    //when clicking on the map
    /*
    this.mapInfo.on('click', function(event) {
        this.handleClick(event);
    }, this);
    */

},

in the code above you can see the click event on te map as well... that one works. on the featuregroup it doesn't.

Also when I change the code for the featureGroup to these it will not work either:

    var featGr = L.FeatureGroup(knownWaters, unknownWaters).on('click', function(event) {
       this.handleClick(event);
    },this);


    var featGr = L.FeatureGroup(knownWaters, unknownWaters);
    featGr.on('click', function(event) {
       this.handleClick(event);
    },this);

adding the featureGroup to the layer will also do nothing...

• javascript
• leaflet

Share Improve this question Follow edited May 13, 2020 at 22:24 yolenoyer 9,46533 gold badges3535 silver badges6666 bronze badges asked Nov 27, 2014 at 10:42 BonifatiusKBonifatiusK 2,33155 gold badges2929 silver badges4444 bronze badges 2

• Did you find any solution to this? I have same problem... – efirat Commented Dec 22, 2019 at 18:33
• with WMS layers you need to iterate, but it has been a while back so can't remember. – BonifatiusK Commented Jan 16, 2020 at 15:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Put your layers in L.FeatureGroup. L.FeatureGroup is an extension of L.LayerGroup which adds events. It also supports the clickevent so that's exactly what your are looking for. Check the documentation: http://leafletjs./reference.html#featuregroup

event.layer is layer data

event.originalEvent.path[0]

is element you clicked

 L.FeatureGroup(knownWaters, unknownWaters).on('click', function(event: LeafletMouseEvent) {
   console.log('click');console.log(event.layer) //event.layer is the layer clicked
   this.handleClick(event);
},this);

The Code attaches a Click event handler on the FeatureGroup Layer which contains the "knownWaters" and "unknownWaters" layers. Clicking on the map( featuregroup) will pass a leafletMouseEvent which contains the layer within the layergroup that was clicked

本文标签： javascriptHow to capture a click on a specific leaflet layerStack Overflow