Tal vez sea una pregunta tonta, pero de todos modos,
En la página de búsqueda de mi aplicación, tengo una entrada de rango que determina el rango de búsqueda (mín. 5 km, máx. 50 km). Según el valor establecido, me gustaría cambiar el zoom actual en el mapa MapBox GL para que muestre solo el área que se ha establecido en esta entrada (si el rango de búsqueda es de unos 10 km, debería ver solo un sector del mapa con un radio de 10 km.). Soy un poco débil en matemáticas, lo que me impide encontrar esta correlación.
Gracias por adelantado.
Por lo tanto, desea que el área del mapa abarque un círculo de un tamaño especificado en kilómetros.
Una forma simple (pero un poco hinchada) de hacer esto sería usar Turf .
const rangeCircle) = turf.circle(map.getCenter().toArray(), radius, { units: 'kilometers' }); map.fitBounds(turf.bbox(rangeCircle)) De esa manera, no necesita calcular explícitamente el nivel de zoom: fitBounds() de Mapbox lo resolverá por usted.
Finalmente descubrí cómo hacerlo usando Turf.js. Aquí está mi solución:
function fitToRadius(radius) { const { lng, lat } = mapbox.getCenter(); const center = [lng, lat]; const rangeCircle = turf.circle( center, radius, { units: "kilometers"} ); const [coordinates] = rangeCircle.geometry.coordinates; const bounds = new mapboxgl.LngLatBounds( coordinates[0], coordinates[0] ); /* Extend the 'LngLatBounds' to include every coordinate in the bounds result. */ coordinates.forEach((coord) => bounds.extend(coord)); mapbox.fitBounds(bounds); }Gracias a Steve Bennett por su pista sobre Turf.js.