GPSの記録で線を引く

移動の記録をマップ上に表示しようとすると、まず、移動の記録を取るところから、ということになります。移動の記録については、スマートフォンにGPS機能があることで、手軽にとれるようになりました。例えば、KML形式で取得すると、

1. <when>2019-06-02T07:47:22.669Z</when>
2. <gx:coord>145.5978991 43.3309429 73.79999542236328</gx:coord>
3. <when>2019-06-02T07:47:29.000Z</when>
4. <gx:coord>145.5975803 43.33057485 68.89349365234375</gx:coord>
5. <when>2019-06-02T07:47:33.315Z</when>
6. <gx:coord>145.59787 43.3306522 73.79999542236328</gx:coord>

のようなデータになります(ヘッダ部分やフッタ部分にはもっと別のデータがある)。<gx:coord>の経度、緯度、標高情報を使えば、どこにいるか分かるというわけです。

これを、利用して、地図上に線を引いてみます。前回の地図表示のJavascriptに緯度、経度の配列をpushし、polylineに指定します。

1. var coordinate = new Array();
2. coordinate.push([43.41030385, 142.42685039]);
3. coordinate.push([43.41117994, 142.42760581]);
4. coordinate.push([43.41188111, 142.4282986]);
5. coordinate.push([43.41226711, 142.42921284]);
6. coordinate.push([43.41237535, 142.43037959]);
7. coordinate.push([43.41236866, 142.43165465]);
8. coordinate.push([43.41262282, 142.43287926]);
9. coordinate.push([43.41329179, 142.43379154]);
10. coordinate.push([43.4141121, 142.43452936]);
11. L.polyline(coordinate, { color: 'blue', weight: 3 }).addTo(map);

これを表示すると、

GPSロガーで記録する間隔次第ですが、結構、正確に表現ができます。間隔が空けば、曲がっている道を真っ直ぐ進んだように見えるようになります。