Dibuja un círculo de tamaño constante para todos los niveles de zoom leaflet.js

Solución:

Para círculos, solo usa circleMarker en lugar de circle: http://leafletjs.com/reference.html#circlemarker

Creo que querrás hacer algo como esto:

var map = L.map('map').setView([51.505, -0.09], 13);

var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

var myZoom = {
  start:  map.getZoom(),
  end: map.getZoom()
};

map.on('zoomstart', function(e) {
   myZoom.start = map.getZoom();
});

map.on('zoomend', function(e) {
    myZoom.end = map.getZoom();
    var diff = myZoom.start - myZoom.end;
    if (diff > 0) {
        circle.setRadius(circle.getRadius() * 2);
    } else if (diff < 0) {
        circle.setRadius(circle.getRadius() / 2);
    }
});

Lo que he hecho es simplemente inicializar un mapa y un círculo y crear detectores de eventos para el zoomstart y zoomend eventos. Hay una myZoom objeto que registra los niveles de zoom para que pueda averiguar si el zoom final está dentro o fuera por simple resta. En el zoomEnd oyente, verifica eso y cambia el radio del círculo en función de si la diferencia es mayor o menor que 0. Por supuesto, no hacemos nada cuando es 0. Aquí es donde te dejo para que seas más sofisticado con tus resultados. Pero creo que esto demuestra cómo hacerlo.

Pruebe esto si no puede usar marcadores circulares por alguna razón:

// Determine the number of meters per pixel based on map zoom and latitude
const zoom = map.getZoom()
const lat = map.getCenter().lat
const metersPerPixel = 156543.03392 * Math.cos(lat * Math.PI / 180) / Math.pow(2, zoom)

// Multiply that by a factor based on how large the circle should appear on the screen
const radius = metersPerPixel * desiredRadiusInPixels

// Create the circle
const circle = L.circle(this.map.getCenter(), {radius: radius}))

Encontré la fórmula de “metros por píxel” en esta respuesta: https://gis.stackexchange.com/a/127949/106283

---

---

Utiliza Nuestro Buscador