每个国家/地区的 Mapbox 缩放级别

Question

您好，我正在尝试找到一种在 Mapbox 中完全按国家/地区代码显示国家/地区的方法。

我正在使用 country-iso-to-coordinates 通过国家 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]]
},

如何在不手动尝试为每个国家/地区编写列表的情况下找到显示整个国家/地区的工作缩放级别？是否有包含每个国家/地区比率的包，以便我可以计算缩放级别，或者 mapbox 的 API 可以根据国家/地区的边界设置缩放级别？

感谢您的帮助！

Answer 1

我建议使用 country-bounding-boxes，这样您就可以使用以下方法：

import boundingBoxes from 'country-bounding-boxes/bounding-boxes.json';

export default {
  // ...
  methods: {
    zoomToCountry(isoCode) {
      this.map.fitBounds(boundingBoxes[isoCode][1]);
    }
  }
}

这是一个非常基本的 working demo。

每个国家/地区的 Mapbox 缩放级别

Mapbox zoom level per country

javascript

mapbox

vue.js

mapbox-gl

vuejs2