Leaflet JS-在矩形中绘制矩形和过滤圆形标记，并仅使用这些标记更新HTML表格

如何解决Leaflet JS-在矩形中绘制矩形和过滤圆形标记，并仅使用这些标记更新HTML表格

我有一个传单地图，其中包含使用来自AJAX REQUEST的markers数组按经度和纬度绘制的circleMarkers。这一切都很好。我正在尝试围绕地图上已经存在的一组标记绘制一个矩形，这应该可以过滤传单地图上的圆形标记和页面上的HTML表格。

以下是我将圆形标记添加到地图的方式：

var cmarkers = [];
for (var i = 0; i < markers.length; ++i) {

    var marker =  L.circleMarker([markers[i].lat,markers[i].lng],{ radius: 2,color: getColor(markers[i].type) })
        .bindPopup('<a href="' + markers[i].url + '" target="_blank">' + markers[i].number+ '</a>')
        .addTo(map);
    cmarkers.push(marker);
}

以下是我必须在一组标记周围绘制矩形的代码，但是当前它什么都不做，除非当我将鼠标悬停在矩形上时，它会提醒我矩形的长和纬度。矩形会保留在地图上，除了绘制矩形外，不会进行过滤或其他任何操作。

 // Initialise the FeatureGroup to store editable layers
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

var drawPluginoptions = {
    position: 'topright',draw: {
        // disable toolbar item by setting it to false
        polyline: false,circle: false,// Turns off this drawing tool
        polygon: false,rectangle: true,marker: false,},edit: {
        featureGroup: editableLayers,//required!!
        remove: true
    }
};

// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw(drawPluginoptions);
map.addControl(drawControl);

var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

map.on('draw:created',function (e) {
    var type = e.layerType,layer = e.layer;

    if (type === 'rectangle') {
        layer.on('mouSEOver',function () {
            alert(layer.getLatLngs());
        });
    }

    editableLayers.addLayer(layer);
});

我用来创建HTML表的jQuery代码段基于markers数组：

var html = '<table id="tabledt">';
html += '<thead>';
html += '<tr>';
var flag = 0;
$.each(markers[0],function (index,value) {
    html += '<th>' + index + '</th>';
});
html += '</tr>';
html += '</thead>';
html += '<tbody>';
$.each(markers,value) {
    html += '<tr data-id="' + index + '">';
    $.each(value,function (index2,value2) {
        html += '<td>' + value2 + '</td>';
    });
    html += '</tr>';
});
html += '</tbody>';
html += '</table>';
$('#dvTable').html(html);

$('#tabledt th:nth-child(1),#tabledt td:nth-child(1)').remove();

当前，页面加载了地图上的所有标记，并且表格中包含了数据。然后，我想绘制一个矩形并将此过滤器过滤到这些标记并更新html表。如何只检索绘制的矩形中的标记，并在页面的传单地图和html表中对其进行过滤？

解决方法

使用此功能，您可以获取位于矩形边界下方的CircleMarker：

map.on('draw:created',function (event) {
    var layer = event.layer;
    
    if(layer && layer instanceof L.Rectangle){
        getCircleMarkers(layer.getBounds());
    }
    
    editableLayers.addLayer(layer);
});

function getCircleMarkers(bounds){
    var layers = [];
    editableLayers.eachLayer((layer)=>{
    if(layer && layer instanceof L.CircleMarkers && !(layer instanceof L.Circle)){ //only circleMarkers,exclude Circles
        if(bounds.contains(layer.getLatLng())){
        layers.push(layer)
      }
    }
  });
  return layers;
}

在示例中，您必须使用圆圈：https://jsfiddle.net/falkedesign/qpL90vh6/

以下代码可以为我打印矩形列表。只需要弄清楚现在如何在地图上将其过滤掉即可：

     new L.Control.Draw({
            draw: {
                marker: false,polygon: false,polyline: false,rectangle: true,circle: false
            },edit: false
        }).addTo(map);
    
        L.Rectangle.include({
            contains: function (markers) {
                var markersContained = markers.filter(marker => { return this.getBounds().contains(marker.getLatLng()) === true; })
        
                return markersContained;
            }
        });

   map.on(L.Draw.Event.CREATED,function (geometry) {
        // Set an array containing all the markers
        var markers = jsonToArray(layerGroup._layers);
        var result = geometry.layer.contains(markers);
        console.log('result => ',result);
    });