Leafletjs-layers-group
提供：Dev Guides
LeafletJS-レイヤーグループ
レイヤーグループ
レイヤーグループを使用すると、複数のレイヤーをマップに追加し、それらを単一のレイヤーとして管理できます。
以下の手順に従って、 LayerGroup を作成し、マップに追加します。
ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。
ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。
ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。
- ステップ4 *-以下に示すように、それぞれのクラスをインスタンス化して、必要なマーカー、ポリゴン、円などの要素（レイヤー）を作成します。
//Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);
//Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.686816, 83.218482]
];
//Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});ステップ5 *- l.layerGroup（）*を使用してレイヤーグループを作成します。 以下に示すように、上記で作成したマーカー、ポリゴンなどを渡します。
//Creating layer group
var layerGroup = L.layerGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);ステップ6 *- addTo（）*メソッドを使用して、前のステップで作成したレイヤーグループを追加します。
//Adding layer group to map
layerGroup.addTo(map);例
次のコードは、3つのマーカーとポリゴンを保持するレイヤーグループを作成し、マップに追加します。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Layer Group</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id = "map" style = "width: 900px; height: 580px"></div>
<script>
//Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 7
}
var map = new L.map('map', mapOptions);//Creating a map object
//Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); //Adding layer to the map
//Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);
//Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.686816, 83.218482]
];
//Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});
//Creating layer group
var layerGroup = L.layerGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);
layerGroup.addTo(map); //Adding layer group to map
</script>
</body>
</html>それは次の出力を生成します-
レイヤー（要素）の追加
- addLayer（）*メソッドを使用して、フィーチャグループにレイヤーを追加できます。 このメソッドには、追加する要素を渡す必要があります。
ハイデラバード市を中心に円を追加できます。
//Creating a circle
var circle = L.circle([16.506174, 80.648015], 50000, {color: 'red', fillColor:
'#f03', fillOpacity: 0} );
//Adding circle to the layer group
layerGroup.addLayer(circle);次の出力が生成されます。 −
レイヤー（要素）の削除
- removeLayer（）*メソッドを使用して、フィーチャグループからレイヤーを削除できます。 このメソッドには、削除する要素を渡す必要があります。
以下に示すように、ヴィジャヤワダという都市のマーカーを削除できます。
//Removing layer from map
layerGroup.removeLayer(vjwdMarker);それは次の出力を生成します-
機能グループ
*LayerGroup* に似ていますが、マウスイベントを許可し、ポップアップをバインドできます。 * setStyle（）*メソッドを使用して、グループ全体にスタイルを設定することもできます。以下の手順に従って、フィーチャグループを作成し、マップに追加します。
ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。
ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。
ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。
- ステップ4 *-以下に示すように、それぞれのクラスをインスタンス化して、必要なマーカー、ポリゴン、円などの要素（レイヤー）を作成します。
//Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);
//Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.686816, 83.218482]
];
//Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});>ステップ5 *- l.featureGroup（）*を使用して機能グループを作成します。 以下に示すように、上記で作成したマーカー、ポリゴンなどを渡します。
//Creating feature group
var featureGroup = L.featureGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);- ステップ6 *-フィーチャグループにスタイルを設定すると、グループ内の各要素（レイヤー）にスタイルが適用されます。 * setStyle（）*メソッドを使用してこれを行うことができ、このメソッドに、色や不透明度などのオプションに値を渡す必要があります。
上記の手順で作成した機能グループにスタイルを設定します。
//Setting style to the feature group
featureGroup.setStyle({color:'blue',opacity:.5});ステップ7 *-以下に示すように、 bindPopup（）*メソッドを使用してポップアップをバインドします。
//Binding popup to the feature group
featureGroup.bindPopup("Feature Group");ステップ8 *- addTo（）*メソッドを使用して、前のステップで作成した機能グループを追加します。
//Adding layer group to map
featureGroup.addTo(map);例
次のコードは、3つのマーカーとポリゴンを保持するフィーチャグループを作成し、それをマップに追加します。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Feature Group</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id = "map" style = "width:900px; height:580px"></div>
<script>
//Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 7
}
var map = new L.map('map', mapOptions);//Creating a map object
//Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); //Adding layer to the map
//Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);
//Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.686816, 83.218482]
];
var polygon = L.polygon(latlngs, {color: 'red'});//Creating a polygon
//Creating feature group
var featureGroup = L.featureGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);
featureGroup.setStyle({color:'blue',opacity:.5});
featureGroup.bindPopup("Feature Group");
featureGroup.addTo(map); //Adding layer group to map
</script>
</body>
</html>それは次の出力を生成します-
