リーフレットのイベントオーバーラップするレイヤーに伝播する方法

Question

レイヤーが重なっていて、各レイヤーにクリックイベントがあるとします。地図をクリックすると、どのレイヤーがクリックされたかを知りたいのですが、クリックイベントは最初のレイヤーの後で停止し、その基礎レイヤーには伝播しません。どうすればこれを達成できますか？ https://jsfiddle.net/r0r0xLoc/

<div id="mapid" style="width: 600px; height: 400px;"></div> 

<script> 
    var mymap = L.map('mapid').setView([51.505, -0.09], 13); 

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { 
    maxZoom: 18, 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
     '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
     'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
    id: 'mapbox.streets' 
    }).addTo(mymap); 

    L.polygon([ 
    [51.509, -0.08], 
    [51.503, -0.06], 
    [51.51, -0.047] 
    ]).addTo(mymap).on('click', function() { 
    console.log('clicked on 1st polygon') 
    }); 

    L.polygon([ 
    [51.609, -0.1], 
    [51.503, -0.06], 
    [51.51, -0.047] 
    ]).addTo(mymap).on('click', function() { 
    console.log('clicked on 2nd polygon') 
    }); 

</script> 

あなたは、各ポリゴンをクリックすると、あなたはそれに関連するメッセージを参照してください。

ここではサンプルのフィドルとそのコードです。重複部分をクリックすると、2番目のポリゴンのメッセージのみが表示されます。

Answer 1

マップ"click"イベントを直接聞いて、クリックした位置がどのレイヤーに含まれるかを「手動で」判断する必要があります。

あなたはこの決意のために、例えば leaflet-pipプラグイン（多角形内のポイント）を使用することができ

：

map.on("click", function (event) { 
    var clickedLayers = leafletPip.pointInLayer(event.latlng, geoJSONlayerGroup); 
    // Do something with clickedLayers 
}); 

デモ：https://jsfiddle.net/ve2huzxw/526/は（"mousemove"代わりの"click"を聞く）