Я просто хочу приспособить свою карту к моей стране. Я видел пример из https://www.mapbox.com/mapbox-gl -js / example / fitbounds / и подходит для всей Кении. Это простой код, но я не знаю, почему эта функция занимает два лат и лонга. Я просто Google это для того, что кейна лат и долго? это 1.2667 ° S, 36.8000 ° E. Почему это отличается от результата Google.

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

Как вписаться в мою конкретную область, как это.

5
Neo Teo 17 Дек 2015 в 15:36

3 ответа

Лучший ответ

Если я ищу ограничительную рамку Кении, я нахожу следующее:

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

Используя эти координаты, все выглядит хорошо:

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

Пример использования Leaflet на Plunker: http://plnkr.co/edit/yRuTxjmQxcoqkVyFbpreviewq а>

2
iH8 17 Дек 2015 в 12:47

.fitBounds принимает два последних аргумента: один для верхнего левого угла вида карты и один для нижнего правого угла.

Если вы хотите просто центрировать карту в Кении, вы можете использовать:

map.flyTo({center: [Lat, Lng]})
2
phillercode 17 Дек 2015 в 12:47

Я тоже искал ответ на этот вопрос. Например, листовка имеет свойство слоя получать свои границы (например, map.fitBounds(layer.getBounds());). Mapbox GL не имеет ничего подобного. По крайней мере, не то, что я знаю. Чтобы справиться с этим, вы можете получить доступ к первой и последней координате текущей выбранной функции: map.fitBounds([feature.geometry.coordinates[0], feature.geometry.coordinates[feature.geometry.coordinates.length-1]]).

Вот весь фрагмент кода на случай, если вы захотите иметь всплывающее окно с кнопкой Zoom:

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 . Этот подход прекрасно работает, когда слой состоит из нескольких линий (например, дорог). Если вы хотите подогнать границы к стране, которая является многоугольником, вы можете попробовать выбрать первую точку долготы-широты как ту, которая имеет минимальную широту, а в качестве второй точки - ту, которая имеет максимальную долготу. Или что-то типа того. Просто попробуйте поиграть с этим подходом. Я уверен, что это сработает.

1
ievgenii 21 Дек 2015 в 22:07