Я работаю с Mapbox GL JS и пытаюсь добавить задержку для серии линейных анимаций.
Я новичок в работе с Javascript и безуспешно пытался адаптировать некоторые примеры задержек в моем проекте.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>So many Dots</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.j'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.overlay {
position: absolute;
top: 10px;
left: 10px;
}
.overlay button {
font:600 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #3386c0;
color: #fff;
display: inline-block;
margin: 0;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 3px;
}
.overlay button:hover {
background-color:#4ea0da;
}
</style>
<script
src = 'https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js' charset =' utf-8 '>
<div id='map'></div>
<div class='overlay'>
<button id='replay'>Replay</button>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY29waGFuaW0iLCJhIjoiY2pxcHd0ZWp6MDRicDQzczB3YWV4eG5sdSJ9.OOFgoDb-cRD1xm3i6wfVBw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-43.1, 35.5],
zoom: 3
});
var route = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-6.290259838, 36.52988052],[-82.36749268,23.1321106]
]
}
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-75.80809021, 20.02582932],[-75.16217804, 39.95222092]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-66.47891235, 18.22506332]
]
}
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-16.55675697, 28.29053116]
]
}
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[2.341439962, 48.85720825]
]
}
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-3.699919939, 42.341259]
]
}
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-75.80809021, 20.02582932],[-74.00714111, 40.71455002]
]
}
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-102.5251389, 23.94062042]
]
}
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-82.36749268, 23.1321106],[-75.53836823, 10.42504978]
]
}
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-6.001959801, 37.38787842],[-82.36749268, 23.1321106]
]
}
},
]
};
// A single point that animates along the route.
// Coordinates are initially set to origin.
var point = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-6.290259838, 36.52988052]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-75.80809021, 20.02582932]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-75.80809021, 20.02582932]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-82.36749268, 23.1321106]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-6.001959801, 37.38787842]
}
},
]
};
for (j = 0; j < route.features.length; j++)
{
// Calculate the distance in kilometers between route start/end point.
for(i=0;i<11;i++) {
var lineDistance = turf.lineDistance(route.features[j], 'kilometers');
}
console.log(lineDistance)
var arc = [];
// Number of steps to use in the arc and animation, more steps means
// a smoother arc and animation, but too many steps will result in a
// low frame rate
var steps = 1000;
// Draw an arc between the `origin` & `destination` of the two points
for (var i = 0; i < lineDistance; i += lineDistance / steps) {
var segment = turf.along(route.features[j], i, 'kilometers');
arc.push(segment.geometry.coordinates);
}
// Update the route with calculated arc coordinates
route.features[j].geometry.coordinates = arc;
}
// Used to increment the value of the point measurement against the route.
var counter = 0;
map.on('load', function () {
// Add a source and layer displaying a point which will be animated in a circle.
map.addSource('route', {
"type": "geojson",
"data": route
});
map.addSource('point', {
"type": "geojson",
"data": point
});
map.addLayer({
"id": "route",
"source": "route",
"type": "line",
"paint": {
"line-width": 1,
"line-color": "#007cbf"
}
});
map.addLayer({
"id": "point",
"source": "point",
"type": "circle",
"paint": {
"circle-radius": 2,
"circle-color": "#000000"
}
});
map.addLayer({
"layout": {
"icon-image": "circle",
"icon-rotate": ["get", "bearing"],
"icon-rotation-alignment": "map",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}
});
function animate(featureIdx, cntr) {
// Update point geometry to a new position based on counter denoting
// the index to access the arc.
if (cntr >= route.features[featureIdx].geometry.coordinates.length-1){
return;
}
point.features[featureIdx].geometry.coordinates = route.features[featureIdx].geometry.coordinates[cntr];
point.features[featureIdx].properties.bearing = turf.bearing(
turf.point(route.features[featureIdx].geometry.coordinates[cntr >= steps ? cntr - 1 : cntr]),
turf.point(route.features[featureIdx].geometry.coordinates[cntr >= steps ? cntr : cntr + 1])
);
// Update the source with this new data.
map.getSource('point').setData(point);
// Request the next frame of animation so long the end has not been reached.
if (cntr < steps) {
requestAnimationFrame(function(){animate(featureIdx, cntr+1);});
}
}
document.getElementById('replay').addEventListener('click', function() {
// Set the coordinates of the original point back to origin
point.features[0].geometry.coordinates = origin;
// Update the source layer
map.getSource('point').setData(point);
// Reset the counter
cntr = 0;
// Restart the animation.
animate(0,cntr);
animate(1,cntr);
animate(2,cntr);
animate(3,cntr);
animate(4,cntr);
animate(5,cntr);
animate(6,cntr);
animate(7,cntr);
animate(8,cntr);
animate(9,cntr);
});
// Start the animation.
animate(0, 0);
animate(1, 0);
animate(2, 0);
animate(3, 0);
animate(4, 0);
animate(5, 0);
animate(6, 0);
animate(7, 0);
animate(8, 0);
animate(9, 0);
});
</script>
</body>
</html>
Я бы хотел, чтобы анимации запускались с небольшой задержкой времени начала между каждой функцией.