在小册子

Question

我正在使用传单。是否有人建议使用能够返回用户点击的所有图层的所有功能的功能？

例如，我有一个点图层和一个多边形图层。当用户点击某个点时，我想在该点下方显示该点和多边形的属性。如果用户只点击多边形，那么它应该只显示多边​​形的属性。

提前感谢您提供的任何帮助。

Answer 1

1. 从传递给click处理程序
的事件中点击的捕获点
2. 为点（L.latLngBounds）
创建边界框
3. 遍历map._layers
中的每个可见图层
4. 查找要素图层：如果图层是要素图层，则它具有_layers属性;每个功能一层
5. 遍历每个要素图层中的每个要素，并为每个要素获取或创建边界框
6. 测试功能边界框与步骤1中创建的单击边界框的交集，并添加到数组
7. 向用户显示数组内容，以显示点击后面的所有功能。

（注意：如果你在一个单独的数组中跟踪自己的功能，它会更容易，更可靠。如果这样做，你可以跳过第3步和第4步。）

＆＃13;
＆＃13;
// Create the map
var map = L.map('map').setView([39.5, -0.5], 5);

// Set up the OSM layer
var baseLayer1 = L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    name: "Base layer 1"
  }).addTo(map);

function clickHandler(e) {
  var clickBounds = L.latLngBounds(e.latlng, e.latlng);

  var intersectingFeatures = [];
  for (var l in map._layers) {
    var overlay = map._layers[l];
    if (overlay._layers) {
      for (var f in overlay._layers) {
        var feature = overlay._layers[f];
        var bounds;
        if (feature.getBounds) bounds = feature.getBounds();
        else if (feature._latlng) {
          bounds = L.latLngBounds(feature._latlng, feature._latlng);
        }
        if (bounds && clickBounds.intersects(bounds)) {
          intersectingFeatures.push(feature);
        }
      }
    }
  }
  // if at least one feature found, show it
  if (intersectingFeatures.length) {
    var html = "Found features: " + intersectingFeatures.length + "<br/>" + intersectingFeatures.map(function(o) {
      return o.properties.type
    }).join('<br/>');

    map.openPopup(html, e.latlng, {
      offset: L.point(0, -24)
    });
  }
}

map.on("click", clickHandler);

// add some markers
function createMarker(lat, lng) {
  var marker = L.marker([lat, lng]);
  marker.on("click", clickHandler);
  marker.properties = {
    type: "point"
  }; // add some dummy properties; usually would be geojson
  return marker;
}
var markers = [createMarker(36.9, -2.45), createMarker(36.9, -2.659), createMarker(36.83711, -2.464459)];

// create group to hold markers, it will be added as an overlay
var overlay = L.featureGroup(markers).addTo(map);

// show features
map.fitBounds(overlay.getBounds(), {
  maxZoom: 11
});

// create another layer for shapes or whatever
var circle = L.circle([36.9, -2.45], 2250, {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5
});
circle.on('click', clickHandler);
circle.properties = {
  type: "circle"
};
var overlay2 = L.featureGroup([circle]).addTo(map);
＆＃13;
#map {
  height: 400px;
}
＆＃13;
<script src="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.js"></script>
<link href="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.css" rel="stylesheet" />
<div id="map"></div>
＆＃13;
＆＃13;
＆＃13;

JS小提琴，如果你想，你知道，小提琴：http://jsfiddle.net/xn8opdjq/

Answer 2

除了@nothingisnecessary回复之外，请参阅传单的pip（多边形点）