地图框适合国家/地区

Question

我只想让我的地图适合我的国家。我从 https://www.mapbox.com/mapbox-gl-js/example/fitbounds/ 看到了一些例子，它适合整个肯尼亚。这是一个简单的代码，但我不知道为什么这个函数需要两个纬度和经度。我只是 google 它为什么是 Keyna 纬度和经度？它是 1.2667° S，36.8000° E。为什么这与 google 的结果不同。

function fit() {
    map.fitBounds([[
        32.958984,
        -5.353521
    ], [
        43.50585,
        5.615985
    ]]);
}

如何适合我的特定区域就像这样。

Answer 1

.fitBounds 采用两个 latlng 参数，一个用于地图视图的左上角，一个用于右下角。

如果您只想将肯尼亚放在地图中心，您可以使用：

map.flyTo({center: [Lat, Lng]})

Answer 2

如果我搜索肯尼亚的边界框，我会找到以下内容：

http://isithackday.com/geoplanet-explorer/index.php?woeid=23424863

使用这些坐标，看起来没问题：

map.fitBounds([
    [-4.71712, 33.90884], // Northeast
    [4.62933, 41.899059]  // Southwest
]);

在 Plunker 上使用 Leaflet 的示例：http://plnkr.co/edit/yRuTxjmQxcoqkVyFbE4q?p=preview

Answer 3

我也在寻找这个问题的答案。例如，Leaflet 有一个层的属性来获取其边界（例如，map.fitBounds(layer.getBounds());）。 Mapbox GL 没有这样的东西。至少我不知道。要处理此问题，您可以访问当前所选特征的第一个和最后一个坐标：map.fitBounds([feature.geometry.coordinates[0], feature.geometry.coordinates[feature.geometry.coordinates.length-1]]).

以下是完整的代码片段，以防您想要一个带有缩放按钮的弹出窗口：

map.on('click', function (e) {
    map.featuresAt(e.point, {layer: 'route-lines', radius: 10, includeGeometry: true}, function (err, features) {
        if (err || !features.length)
            return;

        var feature=features[0];

        new mapboxgl.Popup()
            .setLngLat(e.lngLat)
            .setHTML(popupTemplate)
            .addTo(map);

        var buttonZoomFeature = document.getElementById('button-zoom');
        buttonZoomFeature.addEventListener('click', function (e) {
                map.fitBounds([feature.geometry.coordinates[0], feature.geometry.coordinates[feature.geometry.coordinates.length-1]]);
        });

    });
});

var popupTemplate = '<div id="popup-div">\
        <button id="button-zoom" class="button-zoom" type="button">Zoom to</button>\
        </br>\
        </div>';

PS。当图层是多条线（例如道路）时，此方法效果很好。如果您想将边界拟合到一个多边形的国家/地区，您可以尝试将第一个经纬度点作为具有最小纬度的点，将第二个点作为具有最大经度的点。或类似的东西。尝试使用这种方法。我相信它会成功的。

地图框适合国家/地区

mapbox fit bounds to country

javascript

mapbox