MULTISOUP

MULTISOUP

MULTISOUP

マルティスープ
Staff Blog

Introduction example

2017.01.12

Roads API を使って道路へスナップする

roadsapi

みなさん、こんにちは!

 

今回は、Google Maps API のウェブサービスのひとつ「Google Maps Roads API」の機能をご紹介いたします!

 

移動中にGPSで取得した位置データを基に、移動経路を地図上に表示したいとき、そのままではGPSの測位誤差によるバラつき等で、移動した道路上を正確に示すことは難しいです。

 

測位した位置をそのまま結んでも、建物の上を通過してしまったり、一部GPSを取得できなかった部分の経路が分からなかったり……

 

Google Maps Roads APIでは、このようなバラつきのあるGPS取得ポイントを、実際に移動していた可能性が高い道路上の地点に「スナップ」してくれる機能を提供します。

 

また、地点と地点の間を「補完」するようなリクエストもでき、これによって実際の移動経路を、道路の形状にあわせてスムーズに表示することが出来るようになります。

 

これから紹介するサンプルでは、皇居の周りを一周するような道路上の移動を想定して、あえて道路からずれた一連の位置情報を用意しました。

この位置情報をもとに、Roads APIを使って道路へのスナップを行い、実際に移動したと想定される経路を表示してみます。

// 道路へのスナップのリクエスト
// (引数originalPathには、元の位置情報の緯度・経度を","で繋げたペアを、
// "|"で繋げたものを渡すこととします)
// (例: "35.690864,139.758896|35.690359,139.759400|35.689461,139.760151")
function requestSnapToRoads(originalPath){
	$.get("https://roads.googleapis.com/v1/snapToRoads", {
		interpolate: true,	// 補完を行うかどうか
		key: roadsApiKey,
		path: originalPath
	}, function(data){
		processResponse(data);
	});
};

 

「interpolate」パラメータはデフォルトでは false であり、地点間の補完は行われません。

(元の位置情報として渡した地点に対してのみ、道路上にスナップされた地点が返されます。)

 

地点間を補完し、道路の形状に合わせたスムーズな経路表示を行うために、ここでは true を指定しています。

// レスポンス処理
function processResponse(data){
	var snappedCoordinates = [];
	for(var i = 0; i < data.snappedPoints.length; i++){
		// スナップされた地点の取得
		var position = new google.maps.LatLng(
			data.snappedPoints[i].location.latitude,
			data.snappedPoints[i].location.longitude);
		snappedCoordinates.push(position);

		// スナップされた地点へのマーカー表示
		var marker = new google.maps.Marker({
			position: position,
			map: map,
			icon: markerImage,
		});

		// 補完された地点(元の位置情報には無かった地点)については、
		// マーカーラベルを"x"として半透明で表示する
		if("originalIndex" in data.snappedPoints[i]){
			marker.setLabel((data.snappedPoints[i].originalIndex+1)+"");
		} else {
			marker.setLabel("x");
			marker.setOpacity(0.5);
		}
	}

	// スナップされた地点をもとにPolylineを表示
	var polyline = new google.maps.Polyline({
		path: snappedCoordinates,
		strokeColor: strokeColor,
		strokeWeight: 3
	});
	polyline.setMap(map);
}

 

レスポンスでは、スナップされた地点の配列が「snappedPoints」として返されます。

各地点の「location」フィールドから、スナップされた地点の緯度と経度を確認できます。

{
	"snappedPoints": [
		{
			"location": {
				"latitude": 35.690866,
				"longitude": 139.75886939999998
			},
			"originalIndex": 0,
			"placeId": "ChIJlasEQg6MGGAR2wLqjbQ_w7I"
		},
		{
			"location": {
				"latitude": 35.6907644,
				"longitude": 139.75884660000003
			},
			"placeId": "ChIJlasEQg6MGGAR2wLqjbQ_w7I"
		},
		(省略)
// スナップされた地点の取得
var position = new google.maps.LatLng(
	data.snappedPoints[i].location.latitude,
	data.snappedPoints[i].location.longitude);

 

レスポンス内の各地点の「originalIndex」フィールドには、リクエストとして渡した元の地点に対応する値が入ります。

リクエスト時に「interpolate」パラメータを true とした場合、地点間の補完がされますが、補完された地点については対応する元の値が無いため、「originalIndex」フィールドもありません。

// 補完された地点(元の位置情報には無かった地点)については、
// マーカーラベルを"x"として半透明で表示する
if("originalIndex" in data.snappedPoints[i]){
	marker.setLabel((data.snappedPoints[i].originalIndex+1)+"");
} else {
	marker.setLabel("x");
	marker.setOpacity(0.5);
}

 

実際のサンプルがこちらです。

Full Screen

 

表示しているマーカーとポリラインは、下記のように区別しています。

また、右上のコントロール部で、経路の表示・非表示を切り替えることが出来ます。

・青: バラつきを持たせた位置情報(元となる地点) ・赤: 補完を行わず、元の地点に対する道路へのスナップ結果のみを繋げた経路 ・橙: 補完を行い、補完された地点も繋げてスムーズに表示した経路

 

Google Maps Roads API の機能により、移動中に取得したGPS位置情報を、正確に視覚化することが出来ます。

 

カーブも滑らかに表示でき、見た目に美しいというのも勿論ですが、

・経路を正確に理解できるようになる ・移動距離を正確に測れるようになる

という点も大きいのではないでしょうか。

 

なお、Google Maps Roads API では、スナップした地点情報をもとに、道路上の制限速度が分かる機能も提供しています。

ただしこちらは、Google Maps API プレミアムプランのライセンスを持っている場合のみ、利用可能となっています。

 

このようにGoogle Maps プレミアムプランでしか使えない機能というのもいくつあるんですよ^^ ぜひプレミアムプランの購入もご検討ください。お問い合わせは、以下のフォームよりお待ちしております。

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

【関連記事】こんな記事も読まれています

2018.01.13

Google Maps JavaScript API で描画ツールを利用してみる

みなさん、こんにちは。

Google Maps JavaScript API で地図上にラインや円、ポリゴン、四角形、マーカーを描画するツ・・・

続きを読む

2019.02.18

Google マップのコントロールを小さくしたい

みなさん、こんにちは。

最近の Dynamics Maps を利用すると地図を選択するコントロールやズームコントロールが大きくなっているこ・・・

続きを読む

2017.01.16

東京の花粉量をヒートマップで可視化する

みなさん、こんにちは!

Google Maps JavaScript API のライブラリには、データ可視化ライブラリ(visualiza・・・

続きを読む

 - Google Maps APIs, Google Maps JavaScript API, Google Maps Roads API, スタッフ日記, プレミアムプラン, 動態管理