计算传单中图层中的标记并将其添加到 div

Question

我有一张带有标记和过滤器（复选框）的传单地图，我想随着过滤器的变化计算标记的数量。

我添加了我在这里找到的代码 Getting the count of markers in a layer in leaflet :

var counter = 0;

function onEachFeature(feature, layer) {
counter++;
console.log(counter)
}

L.geoJson(geojsonFeature, {
onEachFeature: onEachFeature
}).addTo(map);

代码运行良好，但 returns NaN 属性。我想知道是否有办法达到计数器结果，因为我想将它插入到我的 Leaflet 地图的 div 中？

非常感谢！

Answer 1

我试过了。它确实给了我正确的数字，但我仍在修改如何将它放入 L.control

var lg_cityMarkers = L.layerGroup([romaMarker, fidenaeMarker, antemnaeMarker, caeninaMarker, politoriumMarker]);
var totalCities = lg_cityMarkers.getLayers().length;
alert(totalCities);

您可以在此页面上实时查看：https://elcuentoderoma.com/rome/

免责声明：我隶属于该网站。

Answer 2

第一个问题是，你有 geojson 特征/geojson 组还是只有标记？

如果您有 GeoJSON 组：

最简单的方法是获取 geojson 组的所有子图层，即标记数：

var group = L.geoJson(geojsonFeature, {
   onEachFeature: onEachFeature
}).addTo(map);

var counter = group.getLayers().length;

如果地图上只有标记（不在一组中）：

您可以循环遍历地图的所有图层并检查地图上是否存在该图层：

var counter = 0;
map.eachLayer((layer)=>{
   if(layer instanceof L.Marker){
     counter++;
   }
});

将数据显示为控件

L.MarkerCounterControl = L.Control.extend({
    options: {
        position: 'topright'
        //control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
    },

    onAdd: function (map) {
        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control fitall');
        this.button = L.DomUtil.create('a', '', container);
                this.button.style.width = 'auto';
                this.button.style.padding = '2px 5px';
        this.button.innerHTML = '0 Markers';
        L.DomEvent.disableClickPropagation(this.button);

        return container;
    },
        setCount(count) {
            this.button.innerHTML = count+' Markers';
        }
});

var control = new L.MarkerCounterControl().addTo(map)
control.setCount(10)

每次换层后都可以调用control.setCount(counter)

演示：https://plnkr.co/edit/dyQKVQFDm5sBHzUK

计算传单中图层中的标记并将其添加到 div

Counting markers in a layer in leaflet and add it to a div

javascript

count

nan

markers

leaflet

如果您有 GeoJSON 组：

如果地图上只有标记（不在一组中）：

将数据显示为控件