Question

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

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

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

Answer 1

我也在寻找这个问题的答案。例如，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适合国家/地区

1 个答案: