Gestrichelte Animationen in Mapbox GL JS

0

Nicht direkt. Der nächstgelegene ich denken kann, ist line-dasharray zu so etwas wie 10,5,0 zu setzen, dann kurze Zeit später, es zu 9,5,1 ändern, dann 8,5,2 usw.

Ich habe nicht versucht, though. Es ist möglich, dass es auf seltsame Weise neu gezeichnet wird, was nicht gut aussieht.

Quelle

2017-03-28 05:33:43

0

Hier ist mein erster Versuch einer gestrichelten Linie Animation mit Map#setPaintProperty(xx, 'line-dasharray', yy) innerhalb einer setInterval Funktion.

Einige Rendering-Artefakte konnten mit etwas Kreativität und Datenvorverarbeitung beseitigt werden.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset='utf-8' /> 
 
    <title></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.34.0/mapbox-gl.js'></script> 
 
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css' rel='stylesheet' /> 
 
    <style> 
 
     body { margin:0; padding:0; } 
 
     #map { position:absolute; top:0; bottom:0; width:100%; } 
 
    </style> 
 
</head> 
 
<body> 
 

 
<div id='map'></div> 
 
<script> 
 
mapboxgl.accessToken = 'pk.eyJ1IjoibHVjYXN3b2oiLCJhIjoiY2l5Nmg4cWU1MDA0ejMzcDJtNHJmZzJkcyJ9.WhcEdTYQH6sSw2pm0RSP9Q'; 
 
var map = new mapboxgl.Map({ 
 
    container: 'map', 
 
    style: 'mapbox://styles/mapbox/streets-v9', 
 
    center: [-122.486052, 37.830348], 
 
    zoom: 15 
 
}); 
 

 
map.on('load', function() { 
 

 
    map.addLayer({ 
 
     "id": "route", 
 
     "type": "line", 
 
     "source": { 
 
      "type": "geojson", 
 
      "data": { 
 
       "type": "Feature", 
 
       "properties": {}, 
 
       "geometry": { 
 
        "type": "LineString", 
 
        "coordinates": [ 
 
         [-122.48369693756104, 37.83381888486939], 
 
         [-122.48348236083984, 37.83317489144141], 
 
         [-122.48339653015138, 37.83270036637107], 
 
         [-122.48356819152832, 37.832056363179625], 
 
         [-122.48404026031496, 37.83114119107971], 
 
         [-122.48404026031496, 37.83049717427869], 
 
         [-122.48348236083984, 37.829920943955045], 
 
         [-122.48356819152832, 37.82954808664175], 
 
         [-122.48507022857666, 37.82944639795659], 
 
         [-122.48610019683838, 37.82880236636284], 
 
         [-122.48695850372314, 37.82931081282506], 
 
         [-122.48700141906738, 37.83080223556934], 
 
         [-122.48751640319824, 37.83168351665737], 
 
         [-122.48803138732912, 37.832158048267786], 
 
         [-122.48888969421387, 37.83297152392784], 
 
         [-122.48987674713133, 37.83263257682617], 
 
         [-122.49043464660643, 37.832937629287755], 
 
         [-122.49125003814696, 37.832429207817725], 
 
         [-122.49163627624512, 37.832564787218985], 
 
         [-122.49223709106445, 37.83337825839438], 
 
         [-122.49378204345702, 37.83368330777276] 
 
        ] 
 
       } 
 
      } 
 
     }, 
 
     "layout": { 
 
      "line-join": "round", 
 
      "line-cap": "butt" 
 
     }, 
 
     "paint": { 
 
      "line-color": "#888", 
 
      "line-width": 8 
 
     } 
 
    }); 
 
    
 
    var dashLength = 1; 
 
    var gapLength = 3; 
 
    
 
    // We divide the animation up into 40 steps to make careful use of the finite space in 
 
    // LineAtlas 
 
    var steps = 40; 
 
    // A # of steps proportional to the dashLength are devoted to manipulating the dash 
 
    var dashSteps = steps * dashLength/(gapLength + dashLength); 
 
    // A # of steps proportional to the gapLength are devoted to manipulating the gap 
 
    var gapSteps = steps - dashSteps; 
 
    
 
    // The current step # 
 
    var step = 0; 
 
    
 
    setInterval(function() { 
 
     step = step + 1; 
 
     if (step >= steps) step = 0; 
 
    
 
     var t, a, b, c, d; 
 
     if (step < dashSteps) { 
 
      t = step/dashSteps; 
 
      a = (1 - t) * dashLength; 
 
      b = gapLength; 
 
      c = t * dashLength; 
 
      d = 0; 
 
     } else { 
 
      t = (step - dashSteps)/(gapSteps); 
 
      a = 0; 
 
      b = (1 - t) * gapLength; 
 
      c = dashLength; 
 
      d = t * gapLength;   
 
     } 
 
     
 
     map.setPaintProperty("route", "line-dasharray", [a, b, c, d]); 
 
    }, 25); 
 
}); 
 
</script> 
 

 
</body> 
 
</html>

Quelle

2017-03-28 20:48:45

+0

Wie kann ich die Richtung definieren? Oder ist es zufällig? Leider stürzt das Skript ab, wenn "line-cap" aus irgendeinem Grund auf Runden eingestellt ist. – pixon

+0

Ich habe gerade herausgefunden, wie man die Richtung umkehrt. Ich lege die Buchstaben in eine andere Reihenfolge: [d, c, b, a] und es hat funktioniert :) Aber die CPU-Last ist sehr hoch bei 100% für einige LineStrings. Gibt es eine Möglichkeit, es zu reduzieren? – pixon

2

bereitete ich eine einfache Animation in diesem jsfiddle:

https://jsfiddle.net/2mws8y3q/

var animationStep = 50; 
var step = 0; 
let dashArraySeq = [ 
    [0, 4, 3], 
    [1, 4, 2], 
    [2, 4, 1], 
    [3, 4, 0], 
    [0, 1, 3, 3], 
    [0, 2, 3, 2], 
    [0, 3, 3, 1] 
]; 
setInterval(() => { 
    step = (step + 1) % dashArraySeq.length; 
    map.setPaintProperty(layerId, 'line-dasharray', dashArraySeq[step]); 
}, animationStep);

Quelle

2017-08-22 12:41:53 juliusz

Gestrichelte Animationen in Mapbox GL JS

Antwort

Verwandte Themen