Как я могу правильно использовать flyTo () с функциями setInterval () или setTimeout () Javascript? - PullRequest
Новая
       10

Как я могу правильно использовать flyTo () с функциями setInterval () или setTimeout () Javascript?

0 голосов
/ 19 сентября 2019

У меня небольшая проблема при объединении функции Leaflet flyTo () с функциями setTimeout () и setInterval ().

Я пытаюсь сделать так, чтобы моя интерактивная карта летала по всей моей стране (Хорватия) с точными координатами и точным увеличением.Проблема в том, что я не могу получить код для зацикливания летающих маршрутов (Загреб - Осиек - Сплит - Риека).

Надеюсь, кто-нибудь может указать мне правильное направление :) Спасибо.

Я пробовал использовать счетчики в цикле while и счетчики в цикле for, но они также не работают.

<script>
       var intervalZg = setInterval(Zagreb, 5000);
        var intervalOs = setInterval(Osijek, 10000);
        var intervalSt = setInterval(Split, 15000);
        var intervalRi = setInterval(Rijeka, 20000);


        function Osijek(){
            mymap.flyTo([45.554614, 18.696247], 13);        
        }

        function Zagreb(){
            mymap.flyTo([45.806367, 15.982061], 13);            
        }

        function Split(){
            mymap.flyTo([43.511787, 16.440155], 13);
        }

        function Rijeka(){
            mymap.flyTo([45.327369, 14.440395], 13);
        }

        function Pula(){
            mymap.flyTo([44.867527, 13.850097], 13);
        }

        function regijaSjever(){
            mymap.flyTo([45.638587, 17.378766], 8.75);
        }

        function regijaJug(){
            mymap.flyTo()
        }

        function regijaZapad(){
            mymap.flyTo()
        }

    </script>

Пока этот код летит, он идет в Загреб, затем в Осиек, затем в Сплит, затем в Риеку, а затем обратно в Загреб, где он останавливается.

Ответы [ 2 ]

1 голос
/ 19 сентября 2019

Подход, использующий только один вызов setInterval, будет выглядеть следующим образом: 

// Set up data - an array with the LatLng and the zoom levels for each call

var flights = [
 { latlng: [45.554614, 18.696247], zoom: 13 },
 { latlng: [45.806367, 15.982061], zoom: 13 },
 { latlng: [43.511787, 16.440155], zoom: 13 },
 { latlng: [45.327369, 14.440395], zoom: 13 },
 { latlng: [44.867527, 13.850097], zoom: 13 },
 { latlng: [45.638587, 17.378766], zoom: 8.75 }
];

var flightNumber = 0;

setInterval(function() {

  // flyTo the n-th flight destination...
  map.flyTo( flights[flightNumber].latlng, flights[flightNumber].zoom );

  // The next iteration should fly to the next flight destionation...
  flightNumber++;

  // ...unless we've passed the last flight destination, in which case go 
  // back to the first one.
  // Remember that JS arrays are zero-indexed, so the first element is zero and
  // the last valid element is the (length - 1)-th, hence ">=" instead of ">".
  if (flightNumber >= flights.length) {
    flightNumber = 0;
  }
}, 5000);

Конечно, существуют варианты этого метода с использованием разных структур данных (например, добавление имени, отсутствие уровня масштабирования).и т. д.) и использование оператора по модулю (%) вместо проверки по длине массива (например, i = i % length).

1 голос
/ 19 сентября 2019

В настоящее время вы летите в Загреб каждые 5 секунд - и в Осиек каждые 10 секунд и т. Д. Итак, при первом полете в Осиек - вы также будете звонить в Загреб.

Возможно, установите следующее местоположение вкаждый ... так 

function Zagreb() {
   mymap.flyTo([45.806367, 15.982061], 13); 
   setTimeout(Osijek, 5000);
}

function Osijek() {
    mymap.flyTo([45.554614, 18.696247], 13);        
    setTimeout(Split, 5000);
}

function Split() {
   mymap.flyTo([43.511787, 16.440155], 13); 
   setTimeout(Rijeka, 5000);
}

function Rijeka() {
    mymap.flyTo([45.327369, 14.440395], 13);
    setTimeout(Zagreb, 5000);
}

Zagreb();
...