当前位置：文江博客话题详情

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

发布于 2025-01-12 14:08:23 字数 523 浏览 0 评论 0 原文

我有一个带有标记和过滤器（复选框）的传单地图，我想在过滤器更改时计算标记的数量。

var counter = 0;

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

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

代码运行良好，但返回 NaN 属性。我想知道是否有办法达到计数器结果，因为我想将其插入到我的传单地图的 div 中？预期结果

非常感谢！

原文

I have a Leaflet map with markers and filters (checkboxes) and I would like to count the number of markers as the filters change.

I added this code which I found here 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);

The code works well but returns a NaN property. I would like to know if there is a way to reach the counter result as I would like to insert it in a div to my Leaflet Map? Expected result

Thanks a lot!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不回头走下去 2025-01-19 14:08:23

第一个问题是，您有 geojson 功能/geojson 组还是只有标记？

如果您有 GeoJSON 组：

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

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

var counter = group.getLayers().length;

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

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

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

将数据显示为 Control

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

The first question is, do you have a geojson feature / geojson group or only markers?

If you have a GeoJSON group:

The simplest way would be to get all child layers of the geojson group, which is the marker count:

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

var counter = group.getLayers().length;

If you have only markers on the map (not in a group):

You can loop through all layers of the map and check if the layer is existing on the map:

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

Displaying the data as Control

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)

You can call after each layer change control.setCount(counter)

Demo: https://plnkr.co/edit/dyQKVQFDm5sBHzUK

回复收藏 0 原文

合约呢 2025-01-19 14:08:23

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

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

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

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

I tried this. It does give me the correct number, but I am still tinkering with how to put it inside the L.control

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

You can see this live on this page: https://elcuentoderoma.com/rome/

Disclaimer: I am affiliated with this site.

回复收藏 0 原文

~没有更多了~