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(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

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

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

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

2017.03.22

Google マップで「竹島」と表示する方法は?

みなさん、こんにちは。

Google Maps JavaScript API は、みなさんご存知のとおり多言語に対応した地図です。そのため、l・・・

続きを読む

2016.08.25

Googleマップで過去の航空写真を見る

みなさん、こんにちは。

国土地理院が提供するタイル地図とGoogleマップの連携方法を説明します。

今回は、Googleマ・・・

続きを読む

2017.05.01

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

みんさん、こんちには。

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

オートコ・・・

続きを読む

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