Mapbox GLの点線アニメーションJS

0

私は考えることができる最も近いなど8,5,2その後、

を、10,5,0のようなものにline-dasharrayを設定し、その後、短い時間後に、9,5,1にそれを変更することですでも、私はこれを試していません。見栄えの悪い方法で再描画することは可能です。

2017-03-28 05:33:43

0

setIntervalの機能の中でMap#setPaintProperty(xx, 'line-dasharray', yy)を使用した破線アニメーションでの私の最初の試みです。

いくつかのレンダリングアーチファクトは、いくつかの創造性とデータの前処理で排除することができます。

<!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>

出典

2017-03-28 20:48:45

+0

どのように方向を定義することができますか？それともランダムですか？「line-cap」が何らかの理由で丸めに設定されていると、残念ながらスクリプトがクラッシュします。 – pixon

+0

私はちょうど方向を逆転させる方法を考え出しました。私は別の順序で文字を入れました：[d、c、b、a]それは働いた:) しかし、CPUの負荷は100％で非常にいくつかのLineStrings高いです。それを減らす方法はありますか？ – pixon

2

私はこの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);

出典

2017-08-22 12:41:53 juliusz

Mapbox GLの点線アニメーションJS

答えて

関連する問題