在Mapbox GL JS中的线动画之间插入自动延迟

时间:2019-03-26 00:55:55

标签: animation line mapbox delay

我正在使用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>

我希望动画在每个功能之间的开始时间稍有延迟。

0 个答案:

没有答案