获取在传单中单击的所有图层的所有功能

Question

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

例如,我有一个点图层和一个多边形图层.当用户点击某个点时,我想在该点下方显示该点和多边形的属性.如果用户仅单击多边形,则它应仅显示多边形的属性.

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

Answer 1

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

(注意:如果你在一个单独的数组中跟踪自己的功能,它会更容易,更可靠.如果你这样做,你可以跳过步骤3和4.)

// 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);

#map {
  height: 400px;
}

<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>

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