[英]Animating polylines between markers - Mapbox
I have the following code to plot markers and polylines between points. 我有以下代码在点之间绘制标记和折线。 It runs this script when a user changes a selection on the page. 当用户在页面上更改选择时,它将运行此脚本。
$.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');
I have found the following example on the mapbox examples. 我在mapbox示例中找到了以下示例。 https://www.mapbox.com/mapbox.js/example/v1.0.0/dynamically-drawing-a-line/ I was wondering if this kind of animation is possible on drawing simple lines, and if so how to do it. https://www.mapbox.com/mapbox.js/example/v1.0.0/dynamically-drawing-a-line/我想知道这种动画是否可以绘制简单的线条,如果可以,该如何做。
Instead of adding the entire lineArray
to instanciate L.polyline
: 而不是将整个lineArray
添加到实例化L.polyline
:
var polyline = L.polyline(lineArray).addTo(map);
Add an empty array and create a function which adds the points from the array one by one. 添加一个空数组,并创建一个函数,将数组中的点一一添加。 In code, with explanation in the comments: 在代码中,带注释的解释:
// 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();
Working example on Plunker: http://plnkr.co/edit/8tO7P2bFd6ycWllfllZM?p=preview 在Plunker上的工作示例: http ://plnkr.co/edit/8tO7P2bFd6ycWllfllZM?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.