Estoy haciendo un mapa de folleto con algunos datos de GeoJSON.
Intento agregar la función de clúster a mi archivo JS. Como agregué algunas funciones de filtro y estilo de acuerdo con las propiedades, no puedo encontrar la forma correcta de codificar la función de clúster.
Aquí está la capa GeoJSON y el verificador de filtros:
const geojsonLayer = L.geoJSON(null,{ filter: (feature) => { const isYearChecked = checkboxStates.years.includes(feature.properties.year) const isEventTypeChecked = checkboxStates.eventTypes.includes(feature.properties.eventType) return isYearChecked && isEventTypeChecked }, //only true if both are truecon la función de estilo:
var year = feature.properties.year; if (year <= -150) { return { color: "black" };Agrego luego la ventana emergente:
layer.bindPopup(popupText, { closeButton: true, offset: L.point(0, -10) }); layer.on('click', function() { layer.openPopup(); }); }, }).addTo(map);Intento agregar este fragmento de código para mostrar el clúster, pero no sé dónde colocarlo en mi código para que funcione ( https://github.com/Leaflet/Leaflet.markercluster ):
var markers = L.markerClusterGroup(); markers.addLayer(L.marker(getRandomLatLng(map))); // ... Add more layers ... map.addLayer(markers);Mi código completo está disponible aquí: https://github.com/jandre3/pince-crochet
Una vez que haya llenado su Grupo de capas Leaflet GeoJSON (generalmente con geojsonLayer.addData(geoJsonObject) , en lugar de agregar ese grupo a su mapa, simplemente agréguelo a su MarkerClusterGroup:
const mcg = L.markerClusterGroup().addTo(map); geojsonLayer.addData(geoJsonObject).addTo(mcg);Si más adelante desea intercambiar el contenido, puede borrarlo de ambos grupos y repetir:
mcg.clearLayers(); geojsonLayer.clearLayers(); geojsonLayer.addData(geoJsonObject).addTo(mcg);Demostración: https://jsfiddle.net/hd68ea7k/