LeafletによるGeoJSONの使用

GeoJSONは多くのGISテクノロジやサービスの中で非常にポピュラーなデータフォーマットです。シンプルで軽量かつわかりやすく、Leafletは扱いがとても上手です。この例ではGeoJSONオブジェクトから作成されたマップベクターを作成して対話する方法を学びます。

この例を単独でご覧ください。

GeoJSONについて

GeoJSON仕様（RFC 7946）によると

GeoJSONはさまざまな地理データ構造をエンコードするためのフォーマットです。[…]. GeoJSONオブジェクトは空間領域（Geometry）、空間的に境界づけられたエンティティ（Feature）、またはFeatureのリスト（FeatureCollection）を表すことができます。GeoJSONはPoint、LineString、Polygon、MultiPoint、MultiLineString、MultiPolygon、およびGeometryCollectionというジオメトリタイプをサポートしています。GeoJSONのFeatureにはGeometryオブジェクトと追加のプロパティが含まれ、FeatureCollectionにはFeatureのリストが含まれます。

Leafletは上記すべてのGeoJSONタイプをサポートしていますが、FeatureとFeatureCollectionを一緒に使用すると、プロパティのセットを使用してFeatureを記述できるので最適です。これらのプロパティを使用してLeafletベクターのスタイルを設定することもできます。以下にシンプルなGeoJSON Featureの例を示します

var geojsonFeature = {
	"type": "Feature",
	"properties": {
		"name": "Coors Field",
		"amenity": "Baseball Stadium",
		"popupContent": "This is where the Rockies play!"
	},
	"geometry": {
		"type": "Point",
		"coordinates": [-104.99404, 39.75621]
	}
};

GeoJSONレイヤー

GeoJSONオブジェクトはGeoJSONレイヤーを通してマップに追加されます。作成してマップに追加する場合、以下のコードを使用できます

L.geoJSON(geojsonFeature).addTo(map);

GeoJSONオブジェクトを有効なGeoJSONオブジェクトの配列として渡すこともできます。

var myLines = [{
	"type": "LineString",
	"coordinates": [[-100, 40], [-105, 45], [-110, 55]]
}, {
	"type": "LineString",
	"coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}];

あるいは、空のGeoJSONレイヤーを作成して変数に割り当てることで、後でさらにFeatureを追加することができます。

var myLayer = L.geoJSON().addTo(map);
myLayer.addData(geojsonFeature);

オプション

スタイル

スタイルオプションを使用してFeatureを2つの異なる方法でスタイルできます。まず、すべてのパス（ポリラインとポリゴン）を同じ方法でスタイルするシンプルなオブジェクトを渡すことができます

var myLines = [{
	"type": "LineString",
	"coordinates": [[-100, 40], [-105, 45], [-110, 55]]
}, {
	"type": "LineString",
	"coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}];

var myStyle = {
	"color": "#ff7800",
	"weight": 5,
	"opacity": 0.65
};

L.geoJSON(myLines, {
	style: myStyle
}).addTo(map);

あるいは、個々のFeatureをそのプロパティに基づいてスタイルする関数を渡すことができます。以下の例では「party」プロパティを確認し、それに応じてポリゴンのスタイルを設定しています

var states = [{
	"type": "Feature",
	"properties": {"party": "Republican"},
	"geometry": {
		"type": "Polygon",
		"coordinates": [[
			[-104.05, 48.99],
			[-97.22,  48.98],
			[-96.58,  45.94],
			[-104.03, 45.94],
			[-104.05, 48.99]
		]]
	}
}, {
	"type": "Feature",
	"properties": {"party": "Democrat"},
	"geometry": {
		"type": "Polygon",
		"coordinates": [[
			[-109.05, 41.00],
			[-102.06, 40.99],
			[-102.03, 36.99],
			[-109.04, 36.99],
			[-109.05, 41.00]
		]]
	}
}];

L.geoJSON(states, {
	style: function(feature) {
		switch (feature.properties.party) {
			case 'Republican': return {color: "#ff0000"};
			case 'Democrat':   return {color: "#0000ff"};
		}
	}
}).addTo(map);

pointToLayer

ポイントはポリラインやポリゴンとは異なる方法で処理されます。デフォルトでは、GeoJSONポイントに対してシンプルなマーカーが描画されます。GeoJSONレイヤーを作成するときにGeoJSONオプションオブジェクト内でpointToLayer関数を渡すことで、これを変更できます。この関数にはLatLngが渡され、ILayerのインスタンスを返さなければなりません。この場合はMarkerまたはCircleMarkerが考えられます。

ここではpointToLayerオプションを使用してCircleMarkerを作成しています

var geojsonMarkerOptions = {
	radius: 8,
	fillColor: "#ff7800",
	color: "#000",
	weight: 1,
	opacity: 1,
	fillOpacity: 0.8
};

L.geoJSON(someGeojsonFeature, {
	pointToLayer: function (feature, latlng) {
		return L.circleMarker(latlng, geojsonMarkerOptions);
	}
}).addTo(map);

この例ではスタイルプロパティを設定することもできます。pointToLayer関数内でサークルのようなベクターレイヤーを作成すると、Leafletは十分に賢くGeoJSONポイントにスタイルを適用します。

onEachFeature

onEachFeatureオプションは、GeoJSONレイヤーに追加する前に、各Featureで呼び出される関数です。このオプションを使用する一般的な理由は、クリックしたときにポップアップをFeatureに添付する場合です。

function onEachFeature(feature, layer) {
	// does this feature have a property named popupContent?
	if (feature.properties && feature.properties.popupContent) {
		layer.bindPopup(feature.properties.popupContent);
	}
}

var geojsonFeature = {
	"type": "Feature",
	"properties": {
		"name": "Coors Field",
		"amenity": "Baseball Stadium",
		"popupContent": "This is where the Rockies play!"
	},
	"geometry": {
		"type": "Point",
		"coordinates": [-104.99404, 39.75621]
	}
};

L.geoJSON(geojsonFeature, {
	onEachFeature: onEachFeature
}).addTo(map);

フィルター

filter オプションを使用して GeoJSON フィーチャの可視性を制御できます。これを実現するには、filter オプションとして関数を渡します。この関数は、GeoJSON レイヤーの各フィーチャに対して呼び出され、feature と layer が渡されます。フィーチャのプロパティの値を利用して、true または false を返すことにより、可視性を制御できます。

以下の例では、"Busch Field" がマップに表示されません。

var someFeatures = [{
	"type": "Feature",
	"properties": {
		"name": "Coors Field",
		"show_on_map": true
	},
	"geometry": {
		"type": "Point",
		"coordinates": [-104.99404, 39.75621]
	}
}, {
	"type": "Feature",
	"properties": {
		"name": "Busch Field",
		"show_on_map": false
	},
	"geometry": {
		"type": "Point",
		"coordinates": [-104.98404, 39.74621]
	}
}];

L.geoJSON(someFeatures, {
	filter: function(feature, layer) {
		return feature.properties.show_on_map;
	}
}).addTo(map);

GeoJSON レイヤーで何が可能か詳細を確認するには、例ページをご覧ください。