Category: React

こんにちは！ 運航管理開発部の藤井です。 最近UTM(ドローン運航管理システム)サービスの開発でフロントエンドの開発をする機会があり、地図系WebGLで3d terrainと3dモデルを組み合わせて描画できるのかを検証したく今回記事にしてみました。Maplibre-gl-jsのaddProtocolを使用して国土地理院の標高タイルをDEMのラスタータイルに変更したものを描画するような作りにしております。 使用技術, ライブラリ 3D地形の描画と3Dモデルのシミュレーション 具体的な実装は @itouotiさん、@Kanahiroさんの記事が詳しいです。 今回の実装にあたりmaplibre-gl-jsから標高値の取得をおこなっており、Map.transformクラス内のメソッドgetElevationから取得します。 この際デフォルトで450m標高が高く表示される実装になっているため一律で450m下げる必要があります。  API to access thr camara target elevation when using terrain また、terrainのスタイルを適用する時に実標高データをそのまま適用するために標高データに対してどれだけ地形を隆起して表示させるかの倍率を表すexaggerationをデフォルトもしくは1にします。 ドローンのフライトルートについては国土地理院のWeb地図より線形データをgeoJson形式で取得しました。 都心部では平地に高さのある建物が建っています。おおよそドローンは30mから150mの間で飛行することが想定されており、上記だけだと建物への接近状況が可視化できません。 そのため今回はPlateauの3Dモデルをindigoさんがベクタータイルに変換したものを使用して建物の可視化までやってみます。 画面の表示するタイミングで録画を開始しております。ベクターファイルですが思ったより早く描画されているなと感じました！ まとめ ドローンの運行管理をデジタルツインっぽい３Dにする際の主要なものを組み合わせてみましたが、ドローンの実映像と画面上の視界を一致させようとするにはまだDSMの建物や大きいオブジェクトの標高データをどのように取るかの課題があります。 またドローンは高度を変えながら飛行するためそれを画面上に反映する必要もあります。 参照データDEM標高タイル(国土地理院)国土地理院地図Webindigo株式会社さんのMVT形式データセット – 3D都市モデルドローン3Dモデル 参考資料@itouoti – React/mapboxの地図上で3Dモデルを動かす(Qiita )@Kanahiro – maplibre-gl-gsi-terrain(github) MapLibre GL JSと地理院標高タイルで3D地形を表示(Qiita)Maplibre GL JS の addProtocol の使い方を調べる (Qiita) MapLibre（v2.2.0-pre.2.）での3次元表示（Terrain 3D）を試してみる Reactを用いたCesiumの応用 航空レーザ測量の仕組み Join our team！ ご覧いただきありがとうございました。テラドローンではエンジニアを募集しています！一緒にテラドローンで技術のアップデート・社会に役立つプロダクト開発を行っていきたい方ぜひCasual…