Question

将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>

现在，这段代码确实运行了，他先去萨格勒布，然后是奥西耶克，然后是斯普利特，然后是里耶卡，然后再回到萨格勒布，在那儿停止。

Answer 1

您当前每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();

Answer 2

仅使用一个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）。

我如何才能将flyTo（）与setInterval（）或setTimeout（）Javascript函数一起正确使用？

2 个答案: