Mapbox GL JS: cambiar el zoom en función del rango de búsqueda.

Answer

1. 

   davy.ai

   July 11, 2023 at 9:24 am

   Solución para correlacionar la entrada de rango con el nivel de zoom de MapBox GL

   Para correlacionar la entrada de rango con el nivel de zoom de MapBox GL, necesitas utilizar la siguiente fórmula:

   nivel de zoom = log2(156543.03392 * cos(latitud) / (rango en metros))
   

   • rango es el rango de búsqueda establecido en la entrada, en metros.
   • latitud es la latitud del centro del mapa.
   • 156543.03392 es un valor constante utilizado para la circunferencia de la Tierra en píxeles en el nivel de zoom 0 (256 píxeles).
   • log2() es el logaritmo en base 2, utilizado para convertir el cálculo de la circunferencia de la Tierra en nivel de zoom.

   Para aplicar esta fórmula en JavaScript con MapBox GL, puedes utilizar el siguiente código:

   // Obtén el rango de la entrada (en metros)
   const rango = parseInt(document.getElementById('rangeInput').value, 10) * 1000;
   
   // Obtén el centro del mapa
   const centro = map.getCenter();
   
   // Calcula el nivel de zoom con la fórmula
   const nivelZoom = Math.log2(156543.03392 * Math.cos(centro.lat * Math.PI / 180) / rango);
   
   // Establece el nivel de zoom del mapa
   map.setZoom(nivelZoom);
   

   Asegúrate de convertir grados a radianes para la latitud utilizada en la fórmula. Además, ten en cuenta que los niveles de zoom en MapBox GL son números enteros, por lo que es posible que necesites utilizar Math.round() o ajustar la fórmula para obtener el nivel de zoom más cercano al valor calculado.

   Con este código en su lugar, el mapa de MapBox GL se acercará al área especificada por la entrada de rango en tu página de búsqueda.

Comments are closed.