Question

目前我正在使用Leaflet JS和一个名为＆＃34; SnakeAnim＆＃34;可以找到 here 在使用蛇形动画之前，我的所有地图标记都被加载在一起并从标记起始位置到同一位置绘制弧形。所有的标记都在这个特定的位置结束它们的弧线。

我的问题是当我使用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始终具有相同的值。

一旦返回，我将它添加到地图并调用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();
    }
}

这样，我的所有行都会同时开始制作动画。

动画所有SnakeAnimations而不是一个 - Leaflet js

1 个答案: