MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.03.11

GoogleマップにGeoJSONで図形を描画する

GeoJSONロード

みなさん、こんにちは!

前回、KMLファイルを使って図形を描画する方法を紹介しましたが、今回は GeoJSON ファイルを使って図形を描画する方法を紹介します!

Google マップにKMLファイルをロードする

 

今回紹介する GeoJSON は ジオメトリ図形を JSON形式で表現する方法です。最近の流行りである JSON 形式で表現できるので非常に使い勝手が良いですね。

Wikipedia の紹介ページはコチラ

 

KMLファイルの場合、ファイルをグローバルなURLに置かないといけないという課題がありましたが、GeoJSON の場合は、ローカルのURLでも利用することができます。

イントラ利用で一括で図形を描画したいときには、GeoJSON がオススメですね。

 

 

さて、早速デモ画面を見ていきましょう。「GeoJSONロード」ボタンをクリックすると、前回と同様、マーカー、ライン、ポリゴンを描画します。

Full Screen

 

GeoJSONを使って図形を描画するときのソース・プログラムです。mapオブジェクト生成後、「map.data.loadGeoJson」にて GeoJSON を読み込みます。マーカーのアイコンや、ライン、ポリゴンの色等の設定は、「map.data.setStyle」にて行います。図形をクリックしたときのイベントは、「map.data.addListner」で定義することができます。

var initMap = function();
	var map = new google.maps.Map(document.getElementById("map"), {
		zoom : 15,
		center: _new google.maps.LatLng(35.692235, 139.759864),
		mayTypeId: google.maps.MapTypeId.ROADMAP,
		scrollwheel: true,
		mapTypeControlOptions: {
		    position: google.maps.ControlPosition.BOTTOM_CENTER
		},
	});

	// InfoWindowを生成
	var infoWindow = new google.maps.InfoWindow();
	
	// GeoJson をロード
	map.data.loadGeoJson('geojson/s01.geojson');
	
	// スタイルの設定
	map.data.setStyle(function(feature) {
		if (feature.getProperty('type') === 'point') {
			// マーカーのスタイル
			return ({
				icon: {
					url:  feature.getProperty('icon'),
					scaledSize: new google.maps.Size(32, 32)
				}
			}); 
		} else if (feature.getProperty('type') === 'polyline') {
			// ポリラインのスタイル
			return ({
				strokeColor: '#0000ff',
				strokeWeight: 2,
				clickable: true,
				zIndex: 1
			});
		} else if (feature.getProperty('type') === 'polygon'){
			// ポリゴンのスタイル
			return ({
				fillColor: '#ff0000',
				fillOpacity: 0.5,
				strokeWeight: 0,
				clickable: true,
				zIndex: 1
			});
		}
	});

	// クリックイベントの定義
	map.data.addListener('click', function(event) {
		// 表示位置
		infoWindow.setPosition(event.latLng);
		// InfoWindow内のの内容
		infoWindow.setContent('<h3>' + event.feature.getProperty('name') + '</h3><br/>' + event.feature.getProperty('description'));
		// IndowWindowを表示
		infoWindow.open(_map);
	});
};

 

以下が今回使用した GeoJson ファイルです。
プログラム内の「feature.getProperty(“name”)」は、”poperties” 内の “name” を取得しています。

{
  "type": "FeatureCollection",
  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
  "features": [
    { "type": "Feature", "properties": { "name": "ポイント1", "description": "テスト用ポイント1です。", "type": "point",     "icon": "https://maps.multisoup.co.jp/exsample/common/img/ms/pin_01.png"}, "geometry": { "type": "Point", "coordinates": [ 139.75986270479419, 35.694634921909767, 0.0 ] } },
    { "type": "Feature", "properties": { "name": "ポイント2", "description": "テスト用ポイント2です。", "type": "point",     "icon": "https://maps.multisoup.co.jp/exsample/common/img/ms/pin_04.png"}, "geometry": { "type": "Point", "coordinates": [ 139.7598636575899, 35.693392075631337, 0.0 ] } },
    { "type": "Feature", "properties": { "name": "ポイント3", "description": "テスト用ポイント3です。", "type": "point",     "icon": "https://maps.multisoup.co.jp/exsample/common/img/ms/pin_05.png"}, "geometry": { "type": "Point", "coordinates": [ 139.76192383685731, 35.693755104959394, 0.0 ] } },
    { "type": "Feature", "properties": { "name": "ライン",    "description": "テスト用ラインです。",     "type": "polyline",  "icon": null}, "geometry": { "type": "LineString", "coordinates": [ [ 139.76148924980581, 35.695239184799441, 0.0 ], [ 139.76276858374351, 35.694297015708813, 0.0 ], [ 139.7625057055418, 35.692912559422311, 0.0 ] ] } },
    { "type": "Feature", "properties": { "name": "ポリゴン",  "description": "テスト用ポリゴンです。",   "type": "polygon",   "icon": null}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 139.75876778245129, 35.693802037023673, 0.0 ], [ 139.758970953849, 35.692875568350857, 0.0 ], [ 139.76093088230721, 35.692858331137693, 0.0 ], [ 139.76105321410731, 35.693831589073483, 0.0 ], [ 139.75876778245129, 35.693802037023673, 0.0 ] ] ] } }
  ]
}

今回使用した GeoJson はコチラ

 

 

前回紹介した KML や GeoJSON を利用するれば、簡単にマーカーやポリゴン、ポリラインを描画することができますね^^ また、KML や GeoJSON は統一規格なので、他のGISソフトでも利用できるところが利点です!

 

 

マルティスープ では、Google Maps をはじめ、様々な地図サービスを活用したソリューションを提供しています。もし、地図に関することでお悩みごとがありましたら、是非 マルティスープ までお問い合わせください!

 

バイ

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

2017.05.01

Google Places API オートコンプリートで地名検索を素早くする

みんさん、こんちには。

今回は、Google Places API のオートコンプリートについて、ご紹介します。

オートコ・・・

続きを読む

2017.07.02

Googleマップに色々なマーカーを描画する方法

みなさん、こんにちは!

今回は、 Google マップ上に色々なマーカーを描画する方法を説明したいと思います。

 

続きを読む

2016.09.27

MarkerClusterer ライブラリの紹介

みなさん、こんにちは!

 

Google Maps 上に 店舗の情報などマーカーをたくさん描画したとき、マーカーが重なっ・・・

続きを読む

 - GIS, Google Maps JavaScript API, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)