每個國家/地區的 Mapbox 縮放級別

Question

嗨，我正在嘗試找到一種方法來在 Mapbox 中完全按國家/地區代碼顯示國家/地區。

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

如何在不手動嘗試為每個國家/地區編寫列表的情況下找到顯示整個國家/地區的工作縮放級別？ 是否有每個國家/地區的比率 package 以便我可以計算縮放級別，或者 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]);
    }
  }
}

這是一個非常基本的工作演示。