0
167
ViewsMarcadores de folletos que se agregan al reducir el zoom del mapa
Soy nuevo en Leaflet y estoy tratando de mostrar un mapa con marcadores.
El problema que tengo es que los marcadores desaparecen cuando alejo el zoom y se reemplazan con un número: 
Usé CircleMarkers para poder establecer el color de cada marcador, y para que los marcadores mantuvieran su tamaño sin importar el nivel de zoom. Agrego los marcadores usando markercluster porque quiero poder eliminarlos fácilmente.
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script> function addMarkers(data){ // setup a marker group markerList = L.markerClusterGroup(); for (var i = 0; i < data.length; i++){ var circleColor = getcolor(data[i].roundScore); var circle = L.circleMarker([data[i].solutionLat, data[i].solutionLng], { color: circleColor, fillColor: circleColor, fillOpacity: 0.5, radius: 5 }); circle.bindPopup("Score : " + data[i].roundScore + "\n Address :" + data[i].address); markerList.addLayer(circle); } window.mapMark.addLayer(markerList);}
function deleteMarkers(){ if(markerList) { markerList.clearLayers(); }}
No tengo idea de cómo cambiar este comportamiento, y si está vinculado a los marcadores en sí o al mosaico que uso, que es openstreetmap:
const attribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'; const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; const tiles = L.tileLayer(tileUrl, { attribution }); tiles.addTo(mapMark);}
Cualquier ayuda o sugerencia sería muy apreciada. Muchísimas gracias :)
1 answers
Answer question0
La desaparición de sus Circle Markers y el reemplazo por números es el efecto esperado de Leaflet.markercluster. si también hubiera incluido los archivos CSS del complemento, estos números aparecerían en burbujas verdes/amarillas/naranjas.
Para evitar esta agrupación, pero aún poder eliminar todos sus marcadores a la vez, simplemente use un grupo de capas básico en lugar de un MarkerClusterGroup:
https://leafletjs.com/reference-1.7.1.html#layergroup
Se utiliza para agrupar varias capas y manejarlas como una sola.
markerList = L.layerGroup(); // you can also clear layers of a basic Layer Group markerList.clearLayers();