Привет, я пытаюсь найти способ показать страну полностью по коду страны в Mapbox.
Я использую страна-изо-координаты для получения координат по коду страны-iso
Например, userCountry = "FR" (Франция) дает 2,213749, 46,227638 в качестве центральных точек. Это работает, но я также хотел бы, чтобы уровень масштабирования соответствовал границам страны. Франция, например, идеально выглядит при уровне масштабирования 4,3, в то время как для крупных стран, таких как США или Китай, требуется уровень масштабирования ~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]]
},
Как я могу найти рабочий уровень масштабирования, который показывает всю страну, не пытаясь вручную написать список для каждой отдельной страны? Есть ли пакет с коэффициентами для каждой страны, чтобы я мог рассчитать уровни масштабирования, или API mapbox может установить уровень масштабирования по границам страны?
Спасибо за любую помощь!
Я предлагаю использовать границы страны, который позволит вам использовать следующий метод:
import boundingBoxes from 'country-bounding-boxes/bounding-boxes.json';
export default {
// ...
methods: {
zoomToCountry(isoCode) {
this.map.fitBounds(boundingBoxes[isoCode][1]);
}
}
}
Вот довольно простой рабочая демонстрация.
Спасибо за это очень хорошее решение! Получил его для работы, и это действительно элегантно, как он включает в себя полет в выбранную страну.
Сосредоточение внимания на «уровне масштабирования» обычно является неправильным подходом, поскольку это зависит от размера устройства. Правильный уровень масштабирования для просмотра всей Франции в окне браузера настольного компьютера шириной 2000 пикселей будет отличаться от правильного уровня масштабирования для телефона. Используйте ограничивающие рамки, как указано ниже.