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>

それは次の出力を生成します-

レイヤーグループマップの追加

「https://www.finddevguides.com/index.php?title=Leafletjs-layers-group&oldid=35309」から取得
Powered by MediaWiki