GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

D3v4 leaflet.js

D3で2点間の緯度経度を補完しアニメーションする。

投稿日:

interpolate latitude and longitude - Bl.ock Builder 2017-12-04 16-44-48

example

d3.jsを用いて2点間の緯度経度を補完しアニメーションを行なっています。
画面上の座標ではなく、緯度経度を補完することでアニメーション中に地図を移動・パン/ズームしても正しく移動します。

地図ライブラリにアニメーション機能が備わっていない場合でもD3を使うことでスムーズなアニメーションを実装することができます。

サンプルコード

durationとして指定された秒数を0〜1の値に正規化(scaleLinear)するスケールを作成しています。
また、interplateメソッドを使って、soruceからtargetまでの緯度経度を補完する関数を作成しています。
d3.timerに渡されたコールバックは引数に経過時間を取ります。取得した経過時間を正規化し補完関数に渡すことで経過した時間をもとに補完した緯度経度を取得することができます。
また、正規化した経過時間にイージングメソッドを適用することで、d3の豊富なイージング機能を活用することができます。

moveTweenを実行すると補完した緯度経度を出力します。

緯度経度の補完

2点間を1秒かけて移動させる場合は以下のように実行します。

d3のイージング機能を使うことで、地図上でも細かな動きを再現することができます。

例:バウンドするような動き。

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。