Цикл по координатам в Mapbox

Question

Я довольно новичок в кодировании, поэтому мой код может быть неправильным. Я использую функцию flyTo в Mapbox, чтобы летать из города в город. Я хочу лететь в несколько городов, нажав на кнопку. Я создал массив с координатами, к которым я хочу лететь, но код, похоже, не работает. Может ли кто-нибудь помочь мне там, где я ошибся? Спасибо! Вот страница о том, как использовать эту функцию: https://www.mapbox.com/mapbox-gl-js/example/flyto/.

var arrayofcoords = [[-73.554,45.5088], [-73.9808,40.7648], [-117.1628,32.7174], [7.2661,43.7031], [11.374478, 43.846144], [12.631267, 41.85256], [12.3309, 45.4389], [21.9885, 50.0054]];

document.getElementById('fly').addEventListener('click', function () {

if(i = 0; i < arrayofcoords.length; i++) {
map.flyTo(arrayofcoords[i]);
  });
});

Answer 1

Добро пожаловать в Stackru!

Вот как вы "летаете" от одной координаты до следующей координаты при каждом нажатии кнопки. Обратите внимание, что когда вы достигли последней координаты, при следующем нажатии кнопки вы вернетесь к первой.

mapboxgl.accessToken = '<your access token here>';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-74.50, 40],
    zoom: 9
});

// This variable will track your current coordinate array's index.
var idx = 0;

var arrayOfCoordinates = [
    [-73.554,45.5088],
    [-73.9808,40.7648],
    [-117.1628,32.7174],
    [7.2661,43.7031],
    [11.374478, 43.846144],
    [12.631267, 41.85256],
    [12.3309, 45.4389],
    [21.9885, 50.0054]
];

document.getElementById('fly').addEventListener('click', function () {
    // Back to the first coordinate.
    if (idx >= arrayOfCoordinates.length) {
        idx = 0;
    }

    map.flyTo({
        center: arrayOfCoordinates[idx]
    });

    idx++;
});

Надеюсь, это поможет!