標記之間的動畫折線-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