传单事件:如何传播到重叠层

2022-01-12 00:00:00 leaflet javascript

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

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.

推荐答案

您必须直接监听地图 "click" 事件并手动"确定哪些图层包含点击位置.

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

您可以使用 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" 而不是 "click")

Demo: https://jsfiddle.net/ve2huzxw/526/ (listening to "mousemove" instead of "click")

相关文章