传单，折线数组上的动画标记（JS）答案

【问题标题】：Leaflet, animatedmarker over polyline array (JS)传单，折线数组上的动画标记（JS）
【发布时间】：2021-07-26 22:19:25
【问题描述】：

希望你们中的一些人能帮助我。

使用 Gmaps 编码的折线数组，我设法创建了一张地图，将折线显示为旅行或旅程。现在我的意图是使用movingmarker.js从数组的开头开始，到最后一个GPS位置结束。

但是，在我创建 L.Polyline 之后，数组已按持续时间而不是索引进行排序。

$.each(response.currentTravel.legs, function(index) { 

        var polyline = L.Polyline.fromEncoded(response.currentTravel.legs[index].polyline);
        polyline.addTo(map);
        
        var latlng = polyline.getLatLngs();
        var duur = response.currentTravel.legs[index].duration
        var idline = parseInt(index)
                                            
        setTimeout(function() {             

        const arr = [idline,latlng,duur];

        for (const [idline, element] of arr.entries()) {
            console.log(`${idline}. ${element}`);
        };
                  
            animatedMarker = L.animatedMarker(latlng, {
                                    interval: duur*10, // milliseconds
                                    });
                    map.addLayer(animatedMarker);
                    
                }, duur*100);
            
            });
        });
                                                
};

当我 console.log 将折线数组从 setTimeout 函数中记录下来时，索引仍然与 Google 返回的一样，但是当我在 for..of 和 setTimeout 函数中执行相同操作时，它会按持续时间返回顺序数组的一部分，而不是索引。数据如下：

currentTravel:
legs: Array(17)
0: {duration: 63, polyline: "_|r{H}myZ}@wFAQCM?O?G?E@E@CDE@AVUjAo@lAq@b@YNU"}
1: {duration: 107, polyline: "qvr{Hm}yZlBpFtB~FlBfFhA|C@Bh@vAbBrEFTd@pARh@Rl@@@@BLXJRLNHBHDf@HRB`@DdA\XXXXHPP\Rl@n@dB@FL\Lb@Lb@"}
2: {duration: 49, polyline: "kuq{H_cxZLZDTNYJQJQt@qAt@iAZq@BAVc@b@y@@AZm@DKDGHM^q@@AVYRQ@?JIPG@?NCLAN?RDD?@@D@^P"}
3: {duration: 194, polyline: "sdq{HgrxZHP@DBDDFDHDHBLD\I^Id@I`@?@ADELENEJADGJEHE…@^[TIFi@Zw@^aAZiDdAYJaAX}HbC_AXcIdC]JeFzAu@Vm@TQJ"}
4: {duration: 166, polyline: "eyu{H}`zZy@\u@\MDEDUL[Ri@Zg@ZSNc@Z]Xg@b@i@d@e@d@]^…OAOCk@Gk@Ii@M_AUe@Mk@Sq@W_@Qi@Um@[a@SoAu@y@e@eBaA"}
5: {duration: 79, etc.

预期的行为应该是（经过一些调整）动画标记从第一条折线的开头开始，然后迭代下一行，这样我就可以在标记到达每条折线上的最后一个 GPS 位置时销毁标记并从下一条开始直到旅程结束。

希望你能帮忙。

【问题讨论】：

标签： javascript animation leaflet

【解决方案1】：

我想通了。我从 $.each 迭代中取出了movingMarker 函数，并将其直接放在Ajax 调用之后。现在我可以使用 .flat() 将嵌套的腿数组用作自己的数组并循环遍历一个腿数组，而不是处理每个给定的腿数组。

        $.ajax(settings2).done(function (response) {
        
        var rep;
        rep = clicked_id;

        //first fetch the leg array from the Ajax call
        var legs = new Array(response.currentTravel.legs)
        var arr = legs.flat()
        //console.log(arr)

        //function promise to wait for given ms to start
        const waitFor = (ms) => new Promise(r => setTimeout(r, ms))
        const asyncForEach = async (array, callback) => {
         for (let index = 0; index < array.length; index++) {
            await callback(array[index], index, array)
          }
        }
        
        //iterate through each leg using key/value pairs for leg, waitFor & speed values
        const start = async () => {
          await asyncForEach(arr, async (num) => {
            await waitFor(num.waitFor*10)
            var leg = L.Polyline.fromEncoded(num.polyline)
            var myMovingMarker = L.Marker.movingMarker(leg.getLatLngs(), num.duration*10).addTo(map);
            myMovingMarker.start();
            setTimeout(function() {
                myMovingMarker.remove();
            }, num.duration*10);
          })
          //log done when all legs are finished
          console.log('Done')
        }
        //start the await/sync 
        start()

    // this will show all legs as one big route                                 
    $.each(response.currentTravel.legs, function(index) { 

    var polyline = L.Polyline.fromEncoded(response.currentTravel.legs[index].polyline);
    polyline.addTo(map);        
    
});
});

根据腿的持续时间使用 await/sync 并在结果中添加 waitfor 我已成功将折线数组中的所有折线绘制为一条路线，然后在路线的开头开始移动标记，在某个给定点跟随路线上的特定速度，同时在另一个移动标记开始时删除标记。

希望有人能在需要时找到这篇文章。再见！

【讨论】：