0
310
ViewsContar marcadores en una capa en el folleto y agregarlo a un div
Tengo un mapa de folleto con marcadores y filtros (casillas de verificación) y me gustaría contar la cantidad de marcadores a medida que cambian los filtros.
Agregué este código que encontré aquí Obtener el recuento de marcadores en una capa en el folleto :
var counter = 0; function onEachFeature(feature, layer) { counter++; console.log(counter) } L.geoJson(geojsonFeature, { onEachFeature: onEachFeature }).addTo(map); El código funciona bien pero devuelve una propiedad NaN. Me gustaría saber si hay una manera de llegar al resultado del contador, ya que me gustaría insertarlo en un div en mi Leaflet Map.
¡Muchas gracias!
2 answers
Answer question0
La primera pregunta es, ¿tiene una función geojson/grupo geojson o solo marcadores?
Si tiene un grupo GeoJSON:
La forma más sencilla sería obtener todas las capas secundarias del grupo geojson, que es el recuento de marcadores:
var group = L.geoJson(geojsonFeature, { onEachFeature: onEachFeature }).addTo(map); var counter = group.getLayers().length;Si solo tiene marcadores en el mapa (no en un grupo):
Puede recorrer todas las capas del mapa y verificar si la capa existe en el mapa:
var counter = 0; map.eachLayer((layer)=>{ if(layer instanceof L.Marker){ counter++; } });Visualización de los datos como 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) Puede llamar después de cada cambio de capa control.setCount(counter)
Demostración: https://plnkr.co/edit/dyQKVQFDm5sBHzUK
0
Intenté esto. Me da el número correcto, pero todavía estoy pensando en cómo ponerlo dentro del control L.
var lg_cityMarkers = L.layerGroup([romaMarker, fidenaeMarker, antemnaeMarker, caeninaMarker, politoriumMarker]); var totalCities = lg_cityMarkers.getLayers().length; alert(totalCities);Puedes verlo en vivo en esta página: https://elcuentoderoma.com/rome/
Descargo de responsabilidad: estoy afiliado a este sitio.