Hola, estoy tratando de encontrar una manera de mostrar un país completamente por código de país en Mapbox.
Estoy usando country-iso-to-coordinates para obtener las coordenadas por código country-iso
Por ejemplo, userCountry = "FR" (Francia) da como resultado 2,213749, 46,227638 como puntos centrales. Esto funciona, pero también me gustaría que el nivel de zoom se ajuste a los límites del país. Francia, por ejemplo, se ve perfecta con un nivel de zoom de 4,3, mientras que países grandes como EE. UU. o China necesitan un nivel de zoom de ~2,2.
data() { return { accessToken: 'xxxxx', mapStyle: 'mapbox://styles/psteger/cl0y1upof001f16sxix3n00oe', center: [10, 51], zoom: 4.3, minZoom: 2.2, maxZoom: 14, markers: [], params: { access_token: 'xxxxx', country: 'de', language: 'en' } } }, mounted() { const coordinates = IsoToLatLong[this.userCountry]; this.center = [coordinates.coordinate[1], coordinates.coordinate[0]] },¿Cómo puedo encontrar un nivel de zoom que funcione y que muestre todo el país sin intentar manualmente y escribir una lista para cada país? ¿Hay un paquete con proporciones de cada país para poder calcular los niveles de zoom o la API de Mapbox puede establecer un nivel de zoom según las fronteras de un país?
¡Gracias por cualquier ayuda!
Sugiero usar cuadros delimitadores de país que le permitirían el siguiente método:
import boundingBoxes from 'country-bounding-boxes/bounding-boxes.json'; export default { // ... methods: { zoomToCountry(isoCode) { this.map.fitBounds(boundingBoxes[isoCode][1]); } } }Aquí hay una demostración de trabajo bastante básica.