概要

車で旅に出る時に軌跡を残しておきたいなと思って、スマホのアプリで軌跡を残していましたが、ちょっとGPSのデータを取得してみたい。実際のGPSのデータってどうなってんの？が今回の作業のきっかけ。
Google MyMapで、GPSロガーのデータをインポートすればKMLに変換してくれて表示してくれるけど、ちょっと自分でやってみよう！

メインホスト

今、手元にRaspberryPi4Bが3台あります。
メインホストはこれを選択。

GPSの購入

RasberryPi HAT形式のGPSを考えていましたが、遊ぶにはちょっとお高めなので、USB接続のGPSレシーバーを購入。
Amazon GPSレシーバー GPS受信機 DOCTORADIO GR-7BN アンテナ内蔵チップ一体型 USB出力測位時刻較正用

構成

RaspberryPi4にUSBでGPSレシーバーと繋ぐ
USBを介してシリアルでGPSレシーバからNMEAフォーマットのデータを受信する
シリアルから1行づつデータを、nodejsで組んだプログラムが読み込む
読み込んだデータをLocalStorageに書き込む（ファイル）
同時にmosquittoのMQTT Pub/SubにPublishする
WebBrowserで、MQTT Pub/SubをWebsocketsで受信するためにSubscribeしておく
WebBrowserで受信したデータをパースして、10進の緯度経度に変換して、GoogleMapにプロットする
位置データをPolylineで結んで軌跡を表示させる

GPSデータの受信と保存

GPSのデータはシリアルポートから受信する。
GPSレシーバーをUSBのここに刺すと、/dev/ttyACM0 で読むことができる。

取得対象はGPRMCのみとする。
下記のreadDataメソッドのdata変数をconsole.logで出力すれば内容を確認できます。
GPSデータのNMEAフォーマットは？に関しては、以下を参照してください。
GPSのNMEAフォーマット

GPSデータではGPRMCのみ対象としています。
取得した内容をファイルに書き込んでいます。

gps.js


// 日付モジュール
const moment = require('moment-timezone');

// ファイル操作モジュール
const fs = require('fs');

// パス操作モジュール
const path = require('path');

// シリアルからGPSデータ受信
const SerialPort = require('serialport');
const Readline = SerialPort.parsers.Readline;
const port = new SerialPort('/dev/ttyACM0');
const parser = new Readline();
port.pipe(parser);
parser.on('data', readData);

// MQTTモジュール
const mqttHost = 'localhost';
const mqtt = require('mqtt');
const mqttClient  = mqtt.connect('mqtt://'+mqttHost);
mqttClient.on('connect', function() {
	console.log('mqtt ' + mqttHost + ' connected.');
});
mqttClient.on('error', function(err) {
	console.log(err);
});

/**
 * GPSデータの読み込み
 *
 * @param data String GPSデータ
 * @return void
 */
function readData(data)
{
	// GPRMCのみ採用して書き込む
	if (data.match(/^\$GPRMC/, data) != null) {
		// ファイルに書き込み
		writeLogToFile(data);
		// MQTTでpublish
		mqttClient.publish('gps', data);
	}
}
/**
 * GPSデータをログに書き込む
 *
 * @param data String GPSデータ
 * @return void
 */
function writeLogToFile(data)
{
	// 書き込むファイルパスの取得
	let filepath = getFilepath(data);
	// 書き込む行データを作成
	let log = getLogLineFromData(data);
	// 行データを書き込む
	let dir = path.dirname(filepath);
	if (!fs.existsSync(dir)) fs.mkdirSync(dir);
	fs.writeFileSync(filepath, log, {flag:"as"});
}
/**
 * GSPデータから書き込むログファイルパスを取得する
 *
 * @param data String GPSデータ
 * @return String
 */
function getFilepath(data)
{
	// 日付のファイルを作成して返す
	let utc = getUtcFromData(data);
	let date = moment.utc(utc).tz("Asia/Tokyo").format("YYYYMMDD");
	let filename = date + ".log";
	let dir = './log';
	let filepath = dir + '/' + filename;
	return filepath;
}
/**
 * GPSデータからUTC日時を作成する
 *
 * @param data String GPSデータ
 * @return String
 */
function getUtcFromData(data)
{
	// $GPRMC,144733.00,A,3519.49685,N,13926.21062,E,0.072,,180521,,,A*7C
	let ary = data.split(',');
	let hour = ary[1].substr(0, 2);
	let min = ary[1].substr(2, 2);
	let sec = ary[1].substr(4, 2);
	let year = parseInt(ary[9].substr(4, 2)) + 2000;
	let month = ary[9].substr(2, 2);
	let day = ary[9].substr(0, 2);
	let utc = year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec;
	return utc;
}
/**
 * ログ行をGPSデータから作成する
 *
 * @param data String GPSデータ
 * @return String
 */
function getLogLineFromData(data)
{
	let utc = getUtcFromData(data);
	let date = moment.utc(utc).tz("Asia/Tokyo").format();
	let log = date + ' - ' + data + "\n";
	return log;
}

$ node ./gps.js

でシリアルポートから受信を開始し、./log/YYYYMMDD.log に受信内容が書き込まれます。
こんな感じ

YYYYMMDD.log

2021-05-20T00:00:00+09:00 - $GPRMC,150000.00,A,3519.50282,N,13926.21234,E,0.321,,190521,,,A*70
2021-05-20T00:00:01+09:00 - $GPRMC,150001.00,A,3519.50280,N,13926.21236,E,0.185,,190521,,,A*7D
2021-05-20T00:00:02+09:00 - $GPRMC,150002.00,A,3519.50248,N,13926.21231,E,0.405,,190521,,,A*70
2021-05-20T00:00:03+09:00 - $GPRMC,150003.00,A,3519.50233,N,13926.21229,E,0.366,,190521,,,A*76
2021-05-20T00:00:04+09:00 - $GPRMC,150004.00,A,3519.50223,N,13926.21227,E,0.439,,190521,,,A*73
2021-05-20T00:00:05+09:00 - $GPRMC,150005.00,A,3519.50219,N,13926.21227,E,0.095,,190521,,,A*79
2021-05-20T00:00:06+09:00 - $GPRMC,150006.00,A,3519.50216,N,13926.21227,E,0.080,,190521,,,A*71
2021-05-20T00:00:07+09:00 - $GPRMC,150007.00,A,3519.50182,N,13926.21233,E,0.449,,190521,,,A*7A
2021-05-20T00:00:08+09:00 - $GPRMC,150008.00,A,3519.50161,N,13926.21229,E,0.453,,190521,,,A*78
2021-05-20T00:00:09+09:00 - $GPRMC,150009.00,A,3519.50166,N,13926.21224,E,0.125,,190521,,,A*77
2021-05-20T00:00:10+09:00 - $GPRMC,150010.00,A,3519.50176,N,13926.21221,E,0.375,,190521,,,A*7C
2021-05-20T00:00:11+09:00 - $GPRMC,150011.00,A,3519.50165,N,13926.21220,E,0.166,,190521,,,A*7E
2021-05-20T00:00:12+09:00 - $GPRMC,150012.00,A,3519.50145,N,13926.21216,E,0.430,,190521,,,A*7C

地図に表示する

リアルタイムに地図に取得した位置を表示させるために、ブラウザからWebsocketsでデータをやりとりします。
Websocketsサーバとしては、いつもIoTで利用している軽量Pub/Sub
mosquittoを利用します。

https://mosquitto.org/

Websocketsで接続して処理するjsライブラリはMQTT.jsを利用します。

https://github.com/mqttjs/MQTT.js/

GoogleMapを含む表示画面は、Webscocketsできればどこにあっても構いません。
今回、RaspberryPi4にnodejs ExpressでWebサーバを立てており、そこに表示ページを設置しています。

ページの実装内容は次の通り

index.js

<!DOCTYPE html>
<html>
<head>
<title>GPS Logger</title>
<meta charset="utf-8">
<script src="/javascripts/mqtt.min.js"></script>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script>

// Map
let map;
function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 20,
	});
	marker = new google.maps.Marker;
	marker.setMap(map);
	polyline = new google.maps.Polyline({
		path: [],
		strokeColor: "#728EF0",
		strokeOpacity: 0.8,
		strokeWeight: 3,
		geodesic: false
	});
}
let marker;
let polyline;

// MQTT
let mqttClient = mqtt.connect('ws://raspberrypi4.local:9090');
mqttClient.on('connect', () => {
	console.log('mqtt connected.');
	mqttClient.subscribe('gps');
});
mqttClient.on('message', (topic, message) => {
	readData(message.toString());
});

/**
 * GPSデータの読み込み
 *
 * @param json data {lat:val, lng:val}
 * @return void
 */
function readData(data)
{
	console.log(data);
	if (data == null) return ;
	// 緯度経度をMapの中心に配置
	let latlng = getLatLngFromData(data);
	if (latlng.lat != null && latlng.lng != null) {
		map.setCenter(latlng);
		// マーカーを設置
		marker.setPosition(latlng);
		// 軌跡を描く
		drawLine(latlng);
	}
}
/**
 * GPSデータから10進緯度経度を取得する
 *
 * @param strin data GPSデータ
 * @return json {lat:val, lng:val}
 */
function getLatLngFromData(data)
{
	let ary = data.split(',');
	latlng = {lat: null, lng: null};
	if (ary[3] && ary[5]) {
		// 経度 latitude
		let lats = [];
		let lat = String(ary[3]);
		lats[0] = parseInt(lat.substr(0, 2)); // 度
		lats[1] = parseFloat(lat.substr(2, lat.length-2))/60;
		lat = lats[0] + lats[1];

		// 緯度 longitude
		let lng = String(ary[5]);
		let lngs = [];
		lngs[0] = parseInt(lng.substr(0, 3)); // 度
		lngs[1] = parseFloat(lng.substr(3, lng.length-3))/60;
		lng = lngs[0] + lngs[1];

		latlng = {lat:lat, lng:lng};
		console.log(latlng);
	}
	return latlng;
}
/**
 * 軌跡を描く
 *
 * @param json latlng {lat:val, lng:val}
 * @return void
 */
function drawLine(latlng)
{
	let path = polyline.getPath();
	path.push(new google.maps.LatLng(latlng));
	polyline.setPath(path);
	polyline.setMap(map);
}

</script>
<style type="text/css">
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}
#map { height: 100%; }

</style>
</head>

<body>
	<div id="map"></div>

  <script
    src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&callback=initMap&libraries=&v=weekly"
    async
  ></script>
</body>
</html>

GPSレシーバーを受信できる家の窓際においておきます。
そしてWebブラウザで開くとこんな感じ。
10m範囲くらいでデータが動いています。

まとめ

と、いった感じでGPSのNMEAフォーマットの緯度経度を含むGPRMCデータを使用して、リアルタイムでの地図表示を行いました。
ちょっとハマったのが、NMEAの60進の度数を10進に変換する時に、どこまでが度なのかわからなかった。
その際こちらが参考になりました。
0183の座標の桁数は可変だった件

次の目標

保存しているデータを、カレンダーから期間を指定してファイル読み込んで地図に描きたい。

以上でーす。