🌏

Mapbox GL JSでルートアニメーションを作る🌏🎥

2022/12/06に公開

この記事は Mapbox Advent Calendar 2022 の記事です。
筆者はMapboxの広告配信プラットフォームを作っているインフラ&データエンジニアです。普段はCDKでAWS上でインフラを構築したり、EKS上にデータ提供APIを作ったりしています。

1.概要

Mapbox GL JSでルートアニメーションを作る方法を紹介します。

※ gifファイルのサイズ制限により画質が荒くなっていますが、実際はこちらの動画のような高画質のアニメーションが作成されます。

2.アニメーションの作り方

今回は筆者が用意したサンプルデータを利用してアニメーションを作成します。

2-1. Mapboxアカウントの作成

Mapbox の「サインアップ」からアカウント作成を行ってください。

2-2. Access Tokenを取得

アカウントページにアクセスするとアクセストークンが記載されていますので、値をメモします。

2-3. GitHubのリポジトリをClone

筆者のGitHubのリポジトリからソースコードをCloneします。

git clone https://github.com/yukinakanaka/route-animation.git

2-4. Access Tokenを書き換える

テキストエディタでsrc/config.jsを開き、accessTokenを2で取得した値に書き換えます。

2-5. HTTP Serverを起動する

cloneしたリポジトリのTopディレクトリでHTTP Serverを起動します。ここではpythonでHTTP Serverを起動する例を示します。

python -m http.server

2-6. HTTP Serverにアクセスしアニメーションを作成

ブラウザでHTTP Serverにアクセスします。アニメーションが自動で開始されるので、終了するまで待機します。

アニメーションが終了するとroute-animation.mp4のダウンロードが開始されるので、ダウンロードを行います。

以上でアニメーション動画の作成は完了です。

2-7. アニメーションのカスタマイズ

アニメーションを再生する度にmp4ファイルが作成されるのを防ぐために、カスタマイズ作業中はmp4ファイルの作成機能をオフにします。具体的には、src/config.jsのrecordの値をfalseに設定します。

2-7-1. 解像度の変更

アニメーションの解像度はブラウザの解像度に依存します。解像度を変更したい場合は、ブラウザのウィンドウサイズを調整して下さい。解像度の値を明示的に指定したい場合は、開発者ツールを利用して解像度の値を手動で入力します。

2-7-2. KeyFrameのカメラアングルや各Phaseの動画速度の変更

本アニメーションは3つのKeyFrameと3つのPhaseで構成されています。

src/config.jsでKeyFremeのカメラアングルや各Phaseの動画速度などの調整が可能です。
値を変えて自分の好みのアニメーションを探してみて下さい。

2-7-3. データの変更

今回は登山ルートのアニメーションを作成しましたが、軌跡データさえあればアニメーションの作成が可能です。ランニングやウォーキング、サイクリング、スキーなどのアクティビティを記録している方は、是非ご自身のデータでの作成をチャレンジしてみて下さい。今回の、登山ルートデータの用意方法を下記で紹介していているので、参考にしてみて下さい。

3. <技術解説> Mapbox GL JSについて

本ツールは、Query terrain elevationをベースに開発を行いました。
それに加えて、BUILDING CINEMATIC ROUTE ANIMATIONS WITH MAPBOXGL（Mapboxで映画のようなルートアニメーションを作る）を参考に、ズームアウトやmp4ファイル作成機能の追加を行いました。
これらの記事にも詳しい解説がありますので、本記事では筆者が工夫した点について解説したいと思います。

3-1. 迫力ある山の描画

3Dでの地形表示はsetTerrainメソッドでとても簡単に実装できます。

そのsetTerrainのexagggerationパラメータで標高を誇張することが可能です。本ツールでは1.5に設定することで、山の高さを少し誇張表現することで迫力ある山に見えるようにしています。

3-2. GlobalViewの表示

Mapの初期化の際のzoom levelを小さめに設定することで、GlobalViewから始まるようにしました。

なお、GlobalViewからのZoomInはflyToメソッドで容易に実装可能です。

3-3. PinをMap上ではなくMap内に描画

Mapboxの地図上にPinを描画する方法は2つあります。1つ目はMap内に描画する方法で、2つ目はMap上に描画する方法です。Map上に描画する方法では、今回のencoderを利用したアニメーション録画方法ではPinが録画されません。そのため、Map内にPinを描画する方法で開発を行いました。

PinのImageとLayerの作成

Pinの位置移動(アニメーション)

なお、2つの方法の詳細はMapboxのDocumentをご覧下さい。

3-4. チラつき防止

アニメーションやCollisionによるチラつきを防止するために以下の設定を行っています。

fadeDuration=0

icon-allow-overlap=true, text-allow-overlap=true

4. まとめ

本記事ではMapbox GL JSを利用してルートアニメーションを作成する方法を紹介しました。
いざ自分の登山の様子を3D地図上でアニメーションしてみると「こんな急な角度で登っていたんだなー」とか「この山の形かっこいいな」とか、新しい発見があって面白かったです。Mapboxの3D地図はアウトドアのアクティビティと非常に相性が良いなと改めて実感しました。今後は、もっと格好良いカメラワークや地図上のデザインなどにも挑戦していきたいと考えています。

最後までお読みいただきありがとうございました。

<参考>データの用意方法

本ツールはgeojson形式でデータを用意しconfigファイルの値を書き換えれば、皆さん自身のデータのアニメーションを作成することが可能です。

軌跡(route)データ

軌跡データの取得方法は計測機器やアプリに依存するので、皆さんがご利用されている製品のドキュメントをご参照していただければと思います。ここでは参考までに、筆者がどっやって今回の登山ルート用のデータを用意したかを紹介します。

GPXファイルの取得

YAMAPを利用して登山を実施する。
活動データにPCでアクセスし、GPXファイルをダウンロードする。

GPX→geojsonの変換

弊社が開発し公開している変換ツールmapbox/togeojsonを利用して取得したGPXファイルをgeojsonファイルに変換します。

togeojson xxx.gpx > xxx.geojson

togeojsonのインストール方法や詳しい利用方法については、GitHub上のドキュメントをご参照下さい。なお、togeojsonではKMLファイルの変更も可能です。

チェックポイント(features)データ

チェックポイントのデータはアニメーション作成には必須ではありませんが、地図上に表示したいポイントがある方は、是非作成にチャレンジしてみて下さい。
筆者の場合は、YAMAPやYamarecoのサイトを利用してfeatureの緯度経度を調べた後、DMS(Degree Minute Second)形式からDEG(Degree)形式の値に変換した値を、geojsonファイル内に記入します。

<おまけ> 動画ギャラリー

ツールド東北

Mapboxがスポンサーとなったツールド東北イベントの紹介動画: 「ツール・ド・東北 2022」 100kmコース紹介です。是非こちらもご覧いただけると嬉しいです。
https://youtu.be/nhKrR30E8jQ
Yさんへ
この動画を作成していただいて、また参考情報を教えていただき、ありがとうございました😆!!

登山

本ツールを利用して作成した登山ルート動画はこちらです。これらの動画は本ツールで作成した動画をベースに、動画編集ソフトを使ってナレーションやMapboxのロゴを加えています🌍。余談ですが、筆者は登山系YouTubeチャンネルをやっているので、Goodボタンとチャンネル登録していただけると嬉しいです🎥

George & Maoko Hiking VLOG