标记之间的动画折线 - 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

标记之间的动画折线 - Mapbox

Animating polylines between markers - Mapbox

javascript

maps

mapbox