Leaflet事件如何传播到重叠层 [英] Leaflet event how to propagate to overlapping layers

问题描述

假设我有一些重叠的图层，每个图层都有一个点击事件。当我点击地图时，我想知道点击了哪些图层，尽管点击事件在第一层之后停止并且不会传播到其底层。我怎样才能做到这一点？

Let's say I have some overlapping layers and each layer has a click event. When I click on the map, I'd like to know which layers are clicked on, though the click event stops after the first layer and does not propagate to its underlying layers. How can I achieve this?

这是一个示例小提琴及其代码： https://jsfiddle.net/r0r0xLoc/

Here's a sample fiddle and its code: 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>

如果单击每个多边形，则会看到其相关消息。如果单击重叠部分，则只能看到第二个多边形的消息。

If you click on each polygon, you see its related message. If you click on the overlapping part, you only see the message for the second polygon.

推荐答案

您必须直接听取map 点击事件并手动确定哪些图层包含点击的位置。

You have to listen directly to the map "click" event and to "manually" determine which layers contain the clicked position.

您可以使用< a href =https://github.com/mapbox/leaflet-pip =noreferrer> leaflet-pip 插件（以多边形表示），例如用于此确定：

You can use leaflet-pip plugin (point in polygon) for example for this determination:

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

演示： https://jsfiddle.net/ve2huzxw/526/ （听mousemove而不是点击）

这篇关于Leaflet事件如何传播到重叠层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！