动画所有蛇的动画一次而不是一个-传单js

Question

目前我正在使用传单JS和一个名为" snakeanimm "的插件，可以找到在这里在使用蛇动画之前，我所有的地图标记都是一起加载的，并一次从标记的起始位置到特定位置绘制一个弧线。所有的标记都在这个特定的位置结束。

我的问题是，当我使用SnakeIn()函数时，它一次只动画一个标记，我想要它做的是同时将它们动画在一起。

在我的PopulateMap函数中我有:

                    lg.addLayer(L.marker(latlng, { icon: cssIcon }));
                    lg.addLayer(L.Polyline.Arc([latlng.lat, latlng.lng],
                    [netLat, netLong],
                    {
                        color: "red",
                        vertices: 50,
                        weight: 1,
                        opacity: 1,
                        snakeSpeed: 50
                    }));
                    return lg;

注意!netLat + netLong的值总是相同的

返回后，将其添加到map中并调用snakeIn()函数。

    .addTo(map).snakeIn();

使用此代码生成一个标记，从标记开始位置到结束位置绘制一条弧，然后加载下一个标记并重复此过程。

我也试过这样做，并从。addto (map)的末尾删除了。snakein()部分:

                    lg.addLayer(L.marker(latlng, { icon: cssIcon }));
                    lg.addLayer(L.Polyline.Arc([latlng.lat, latlng.lng],
                    [netLat, netLong],
                    {
                        color: "red",
                        vertices: 50,
                        weight: 1,
                        opacity: 1,
                        snakeSpeed: 0
                    }).snakeIn());

这种方法实际上一次加载了所有的标记，但它也加载了除了1之外没有动画的弧线。最后一个标记是唯一一个会动画的，而不是其他的。

所以我想知道是否有人遇到过同样的问题并解决了它，或者如果有人对我如何完成它有任何想法。

谢谢你的帮助

Answer 1

对于任何有类似问题的人来说，我的问题与将它们添加到lg有关。addLayer方法。

我现在要做的是将它们添加到地图中，而不是添加到lg。layer:

        function drawArc(source, destination, leafletMap) {
        for (var i = 0; i < source.length; i++) {
        L.Polyline.Arc([source[i].geometry.coordinates[1], source[i].geometry.coordinates[0]],
                destination,
                {
                    color: "red",
                    vertices: 200,
                    snakingSpeed: 200
                })
            .addTo(leafletMap).snakeIn();
    }
}

这样，我所有的行同时开始动画