ドローンで撮影した動画と飛行軌跡を同期させOpenlayersで表示する方法

（とりあえず忘れないように殴り書き。あとで追記します。）
ドローン（Phantom4pro）で撮影した動画が、どこからどちらの方向を向いて撮影したのかOpenlayersで表示させる方法です。
動画と地図が同期しているので、地図上で場所を指定するとその場所を撮影した動画が表示され、逆に動画の再生位置を変更すると、地図上のアイコンが撮影場所に移動します。

フライトログと動画を同期する

フライトログの取得

DJI Assistant 2でDATファイルを取得します。
https://www.dji.com/jp/phantom-4-pro-v2/info#downloads

フライトログの変換

DatConでDATファイルをCSVファイルに変換します。
https://datfile.net/

変換されたCSVのヘッダーの意味はこちらで確認できます。
https://datfile.net/DatCon/fieldsV3.html

CSVの列の編集

CSVをEXCELで編集します。
以下の列を残して、不要な列を削除します。

IMU_ATTI(0):Longitude

IMU_ATTI(0):Latitude

IMU_ATTI(0):yaw360

flightTime

列名を以下に変更します。

lon

lat

yaw

sec

sec列の単位はミリ秒となっているので、1000で割って小数以下を切り捨て単位を秒にしておきます。

CSVの行の編集（動画との同期）

フライトログと動画を同期させるためにCSVの行を削除します。

あらかじめ動画は必要な範囲を切り取るなどの編集をしておきます。
（切り貼りして不連続に編集した動画は同期できません）

CSVをQGISに読み込んで、フライトログを表示させます。
（x,yには、lat,lonを指定します）

動画の開始位置がCSVの開始行となるように、それ以前の不要なポイントを削除します。
同様に、動画の終了位置がCSVの最終行となるように、それ以降の不要なポイントを削除します。
QGISからCSVに書き出します。

CSVをEXCELで開き、sec列の先頭が0（秒）から始まるように、sec列全体からsec列の先頭の値を引きます。（最終行の秒数は、動画の終了秒とほぼ同じになるはず）
秒数が重複しているデータを削除します。

CSVをJSONに変換

CSV2JSONでCSVをJSONに変換します。Minifyにチェックしておきます。
https://www.csvjson.com/csv2json

OpenLayersでフライトログと動画を表示する

MapBoxでの例を参考にOpenLayers 3 にコードを移植します。
Mapbox GoPro map

移植結果は、またあとで追記します。