レイヤーグループとレイヤー制御

このチュートリアルでは、複数のレイヤーをグループ化する方法と、レイヤー制御を使用してユーザーがマップ上の異なるレイヤーを簡単に切り替える方法を説明します。

レイヤーグループ

コードで 1 つにして処理するグループにまとめたいレイヤーが多数あると仮定しましょう。

var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
	denver    = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
	aurora    = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
    golden    = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

LayerGroup クラスを使用して、それらを直接マップに追加する代わりに、以下のことができます。

var cities = L.layerGroup([littleton, denver, aurora, golden]);

簡単ですね。都市マーカーを 1 つのレイヤーにまとめた cities レイヤーが作成されました。このレイヤーは一度に追加したり、マップから削除できます。

レイヤー制御

ユーザーがマップ上に表示するレイヤーを制御できる便利な小さな制御機能が Leaflet に用意されています。使用方法を示すだけでなく、レイヤーグループのもう 1 つの便利な用途についても説明します。

2 種類のレイヤーがあります。(1) 相互に排他的なベースレイヤー (一度にマップ上に表示できるのは 1 つのみ) で、タイルレイヤーなどがあります。(2) オーバレイは、ベースレイヤーの上に乗せるその他のすべてのレイヤーです。この例では、2 つのベースレイヤー (OpenStreetMap の「osm」と OpenStreetMap.Hot osmHOT ベースマップ) を切り替えるためのものと、オンとオフを切り替えるオーバレイ (前に作成した都市マーカー) を用意します。

ベースレイヤーを作成して、デフォルトをマップに追加しましょう。

var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '© OpenStreetMap'
});

var osmHOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'});

var map = L.map('map', {
	center: [39.73, -104.99],
	zoom: 10,
	layers: [osm, cities]
});

次に、2 つのオブジェクトを作成します。1 つはベースレイヤーを含み、もう 1 つはオーバレイを含みます。これらは、キーと値のペアを含む単純なオブジェクトです。キーは制御内のレイヤーのテキストを設定し (例: 「OpenStreetMap」)、対応する値はレイヤーへの参照です (例: osm)。

var baseMaps = {
	"OpenStreetMap": osm,
	"OpenStreetMap.HOT": osmHOT
};

var overlayMaps = {
	"Cities": cities
};

これで、残りの作業は、レイヤー制御を作成してマップに追加するだけです。レイヤー制御を作成するときに渡される最初の引数はベースレイヤーオブジェクトです。2 番目の引数はオーバレイオブジェクトです。どちらの引数もオプションです。2 番目の引数を省略してベースレイヤーオブジェクトだけを渡したり、null を最初の引数として渡してオーバレイオブジェクトだけを渡したりできます。どちらの場合も、省略されたレイヤータイプはユーザーが選択できないようになります。

var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);

osm と cities レイヤーはマップに追加しましたが、osmHOT は追加していないことに注意してください。レイヤー制御は、既に追加したレイヤーを検出し、対応するチェックボックスとラジオボックスを設定するのに十分賢いです。

また、複数のベースレイヤーを使用する場合、インスタンス化のときに 1 つだけマップに追加する必要がありますが、レイヤー制御を作成するときは、すべてのベースレイヤーをベースレイヤーオブジェクトに含める必要があることに注意してください。

レイヤーのオブジェクトを定義するときに、キーのスタイルを指定することもできます。たとえば、このコードは OpenStreetMap.HOT マップのラベルを赤くします。

var baseMaps = {
	"OpenStreetMap": osm,
	"<span style='color: red'>OpenStreetMap.HOT</span>": osmHOT
};

最後に、ベースレイヤーまたはオーバレイを動的に追加または削除できます。

var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.'),
    rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');
    
var parks = L.layerGroup([crownHill, rubyHill]);
var openTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: 'Map data: © OpenStreetMap contributors, SRTM | Map style: © OpenTopoMap (CC-BY-SA)'
});

layerControl.addBaseLayer(openTopoMap, "OpenTopoMap");
layerControl.addOverlay(parks, "Parks");

それでは、別のページで結果を確認 →しましょう。