Mapbox GL JSで複数の3Dオブジェクトの配置に苦労した件について
この内容は2022/06/11の千歳ゆるい勉強会で発表したスライドを一部修正し記事形式にしたものです
自己紹介とFlightRadar24について
空が見えたらついつい飛行機をさがしてしまうhobby-overflowです
いきなりですが質問です、皆さんはFlightRadar24というサービスを聞いたことはありますか？
このサービスは旅客機が行方不明になってしまった時にマスコミが真っ先に使うサービスでもあります、ニュース番組などでなんとなく映像を見たことがあるのでは無いでしょうか。
ではいま飛行機がどこを飛んでいるか見てみましょう
このようにFlightRadar24は2Dの地図上に飛行機のアイコンが表示されていて2D表現となっています
そこで、立体的に見てみたくなるのがオタクというもの。
かつては3D表示できるソフトウェアがあったのですがGoogle Mapの仕様変更により開発元が3D表示を打ち切ってしまいました。
過去にあったのなら自分でも作れるのでは？と根拠のない自信があり着手しました
FlightRadar24は2Dの地図上に飛行機のアイコンが表示されていて2D表現となっています
そこで、立体的に見てみたくなるのがオタクというもの。
かつては3D表示できるソフトウェアがあったのですがGoogle Mapの仕様変更により開発元が3D表示を打ち切ってしまいました。
過去にあったのなら自分でも作れるのでは？と根拠のない自信があり着手しました
作っている途中の物がこちらです
reactとtypescriptとwebpackそしてElectronで作っていて
three.jsを使いMapboxのStatic TilesというAPIを叩いています
今は地図画像を並べているだけなのでカメラが近づいても地図は粗いままです。
前置きが長くなってしまいましたが新たな手法としてMapbox GL JSというライブラリを使えば
地図の操作はもちろん、three.jsを使い3Dオブジェクトを地図上に配置ができるとのことで実験してみました
やってみたのがこちらです
おお！いい感じじゃん！
ところがどっこい、ではこのオブジェクトの座標はどうなっているのかconsole.logで見てみます。
/* console.log()の出力結果 */
▼ Vector3
x: 0
y: 10
z: 0
配置したオブジェクトが3D空間の原点に設定されちゃってます。
これじゃ、動的に複数のオブジェクトを緯度経度を元に配置できないじゃん...
しばらく考え続けて「仕様だから諦めよう」と考えていたのですが
「もしかしたら距離と方位で算出できるかも！？」と思いつき、やってみました。
距離はMapboxの関数で取得することができて
方位角はsinとかcosとかatan2やらを使ってどうにか算出できました
ｽｳｶﾞｸﾑｽﾞｶｼｲ...
それを元に3D空間内の座標を算出することができました！
後々、今回のような処理を簡略化できるライブラリを作り公開します。
以上で発表終了です。
実は今回が人生初のLT発表でしたが、聞いていただきありがとうございました
hobby-overflowでした。
追記: このリポジトリでライブラリ化を目指して編集中です
Discussion