次のマイルストーンということで、90秒間隔で更新される列車ロケーション情報を使って、列車移動情報の更新時にアニメーション化するテストを行った。一定間隔（今は30秒間隔）で列車ロケーション情報を読んで、列車位置を更新する際にd3.jsのトランジションを使ってアニメーション効果を付与している。列車ロケーション情報は本当は更新間隔と情報の有効期間等も含まれているけれども、それはまだ考慮していない。データを見ると90秒間隔で更新されているようだ。それに合わせて更新をかけるのが一番効率がいいが、いったん自サーバでキャッシュしているのでそのあたりも考慮しないといけないな。
いちばん苦労したのは路線データをQGISを使って編集するところである。そこはちょっとしんどかった。
実際のページ：https://www.sfpgmr.net/test/metrop/0007/
ソースコード：sfpgmr/metrop · GitHub
ソースコードは結構場当たり的なものになってきていて、あまり参考にならないかもしれない。。汚いコードの例になりつつある。
多少おかしなところはまだあるかもしれないが、一定間隔で路線に沿って列車が移動させるという目標は達成できた。次はこれをベースにもう少し発展させて、実用的な機能を付加してないといけないだろう。完成までのスケジュールとしては
- 10/28-11/08:アプリの作成
- 11/09-11/09:アプリの応募
- 11/10-11/17:バッファ
となっている。ぎりぎりですな。。
d3.jsのトランジションは面白い。面白いなぁ。