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ロード」ボタンをクリックすると、前回と同様、マーカー、ライン、ポリゴンを描画します。

GeoJSONロード

 

 

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

 

バイ

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

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

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

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

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

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

2018.03.31

Googleマップに地域メッシュを描画する

みなさん、こんにちは。

今回は、地域メッシュを Google マップ上に描画してみたいと思います。

地域メッシュは、Wik・・・

続きを読む

2017.03.17

時差計算ができるGoogle Maps Time Zone API の利用方法を・・・

みなさん、こんにちは。

 

Google Maps API で最後まで紹介できていなかった「続きを読む

2017.01.12

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

みなさん、こんにちは!

 

今回は、Google Maps API のウェブサービスのひとつ「

続きを読む

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