设置标记之间多段线的动画-Mapbox

Animating polylines between markers - Mapbox

本文关键字：动画 -Mapbox 段线 之间 设置      更新时间：2024-01-30

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

$.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');

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

而不是将整个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

相关文章：