2枚の Mapillary 画像から地物の位置を取得する実験(の途中)

先日参加した Mapillary Meetup 2018 Tokyo : ATND の懇親会で思いついた2枚の Mapillary 画像から地物の位置を特定するやつをどうにかしようと模索中です。

適当に動作するっぽい JavaScrpt までは書けました。続きができる気がしないけど。

右上の地図で濃い緑矢印は画像の方向角、赤いラインは画像間の基線です(これはいらないなぁ…)。
地図上の青いラインと画像上の青いラインは連動していて、画像上のマウスポインタの位置が画像上でどの方向かを見るためのものです。緑ラインも同じ様な動きをしますが、こちらはマウスをクリックした位置に固定して表示されます。
各種数値を正しく取得できれば緑ラインの交点が地物の位置になるはずです。サンプル画像では写真内から道路案内標識の位置を出そうとしていますが、地図上の交点がはるか街区内に突っ込んでいるので正しい位置を出せなかったことがわかります。

画像の持つ画像自体の方向角が正しくなかったり、画角の情報や画角の計算に必要な情報を持っていない画像で試したため(なぜその画像を選んだ…)結果として地物の正しい位置を取得できませんでした。

課題をまとめるために記事を残しておきます。あー、でもこんな記事書いたらなにか出来上がった気になってしまうかもと思いつつ。

やり残していること

さて、実装できるでしょうか。

Mapillary から直接画像の取得

今のはファイルをローカルに保存してデータを取っているので REST API か Mapillary.js を使ってクライアントサイドで完結できるようにしないと使い勝手が悪すぎる。

画角の取得

画角情報が保存されていないと画角とマウスの移動量を正しく連携させられないので、画像の2点と地図上の2点から挟角を設定できるような機能が必要そうです。

画像方向角の調整

画像の方向角は電子コンパスが正しく動作していないと正確な方向角を記録できません。せっかく画像から風景が見えていて、右上に地図を表示できているのでこの画面上で方向角を補正する機能を追加すれば正しい方向角を向くはずです。

ラインの拡縮追従

地図を拡大・縮小した時にラインが取り残されてしまいます…。

交点計算の改善

最小自乗法とかで計算したらかっこよさそう。

使ってるもの

地図表示は leaflet.js でその他のオブジェクトは d3.js でなんとかしています。
これに使うつもりで d3.js を練習してたわけではないのですが、なんか使えましたね。たまたま…。

というか誰か作って(ぇ