标记之间的动画折线-Mapbox

Question

我有以下代码在点之间绘制标记和折线。 当用户在页面上更改选择时，它将运行此脚本。

$.post('_posts/get-pins.php', {traveller: $(this).val()}, function(data){

// Create empty featureLayer
var featureLayer = L.mapbox.featureLayer().addTo(map);

// Create empty featureCollection
var featureCollection = {
    "type": "FeatureCollection",
    "features": []
};

var lineArray = [];

$.each(data, function (k, item) {

    // Create new feature object and push to featureCollection
    featureCollection.features.push({
        "type": "Feature",
        "properties": {
            "id": item.id,
            "title": item.title,
            "description": item.description,
            "image": item.image,
            "marker-symbol": "star",
            "marker-color": "#ff8888",
            "marker-size": "large"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                item.long,
                item.lat
            ]
        }
    });

    lineArray[item.id] = [item.lat, item.long];

});

featureLayer.setGeoJSON(featureCollection);

lineArray = lineArray.filter(function(){return true});


var polyline = L.polyline(lineArray).addTo(map);

},'json');

我在mapbox示例中找到了以下示例。 https://www.mapbox.com/mapbox.js/example/v1.0.0/dynamically-drawing-a-line/我想知道这种动画是否可以绘制简单的线条，如果可以，该如何做。

Answer 1

而不是将整个lineArray添加到实例化L.polyline ：

var polyline = L.polyline(lineArray).addTo(map);

添加一个空数组，并创建一个函数，将数组中的点一一添加。 在代码中，带注释的解释：

// New polyline with empty array
var polyline = L.polyline([]).addTo(map);

// Set iterator to 0
var iteration = 0;

// Function for adding lines
function addLine () {
  // Add first point from the line array  
  polyline.addLatLng(lineArray[iteration]);
  // Set the view to the same point
  map.setView(lineArray[iteration], 3);
  // As long as there are points in the array,
  // Update the iterator and execute this function every 500 ms
  if (++iteration < lineArray.length) window.setTimeout(addLine, 500);
}

// Execute the function
addLine();

在Plunker上的工作示例： http ://plnkr.co/edit/8tO7P2bFd6ycWllfllZM?p=preview