LeafletJS-コントロール

リーフレットは、ズーム、属性、スケールなどのさまざまなコントロールを提供します。

ズーム-デフォルトでは、このコントロールはマップの左上隅にあります。これには2つのボタン "+" および "–" があり、これらを使用してマップをズームインまたはズームアウトできます。マップオプションの zoomControl オプションを false に設定すると、デフォルトのズームコントロールを削除できます。
属性-デフォルトでは、このコントロールはマップの右下隅にあります。小さなテキストボックスに属性データが表示されます。デフォルトでは、テキストが表示されます。マップオプションの attributionControl オプションを false に設定すると、デフォルトの属性コントロールを削除できます。
スケール-デフォルトでは、このコントロールはマップの左下隅にあります。画面の現在の中心を表示します。

この章では、Leaflet JavaScriptライブラリを使用して、これら3つのコントロールをすべて作成し、マップに追加する方法を説明します。

Zoom

Leaflet JavaScriptライブラリを使用して独自のズームコントロールをマップに追加するには、以下の手順に従ってください-

ステップ1 *-要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *-zoomOptions変数を作成し、デフォルトのオプション（+および-）の代わりに、ズームインおよびズームアウトオプションの独自のテキスト値を定義します。

次に、以下に示すように、zoomOptions変数を* L.control.zoom（）*に渡してズームコントロールを作成します。

//zoom control options
var zoomOptions = {
   zoomInText: '1',
   zoomOutText: '0',
};
//Creating zoom control
var zoom = L.control.zoom(zoomOptions);

ステップ5 *- addTo（）*メソッドを使用して、前のステップで作成したズームコントロールオブジェクトをマップに追加します。

//Adding zoom control to the map
zoom.addTo(map);

例

デフォルトの代わりに、独自のズームコントロールをマップに追加するコードを次に示します。ここでは、1を押すとマップがズームインし、0を押すとマップがズームアウトします。

<!DOCTYPE html>
<html>
   <head>
      <title>Zoom Example</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: 10,
            zoomControl: false
         }
         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

        //zoom control options
         var zoomOptions = {
            zoomInText: '1',
            zoomOutText: '0',
         };
         var zoom = L.control.zoom(zoomOptions);  //Creating zoom control
         zoom.addTo(map);  //Adding zoom control to the map
      </script>
   </body>

</html>

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

ズームマップ

帰属

Leaflet JavaScriptライブラリを使用して独自の属性をマップに追加するには、以下の手順に従います-

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *- *attrOptions 変数を作成し、デフォルト値（リーフレット）の代わりに独自のプレフィックス値を定義します。

次に、以下に示すように、 attrOptions 変数を* L.control.attribution（）*に渡すことにより、属性コントロールを作成します。

//Attribution options
var attrOptions = {
   prefix: 'attribution sample'
};

//Creating an attribution
var attr = L.control.attribution(attrOptions);

ステップ5 *- addTo（）メソッドを使用して、前のステップで作成した *attribution control オブジェクトをマップに追加します。

//Adding attribution to the map
attr.addTo(map);

例

次のコードは、デフォルトではなく独自の属性コントロールをマップに追加します。ここでは、代わりにテキスト_attribution sample_が表示されます。

<!DOCTYPE html>
<html>
   <head>
      <title>Attribution Example</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: 10,
            attributionControl: false
         }
         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

        //Attribution options
         var attrOptions = {
            prefix: 'attribution sample'
         };

        //Creating an attribution
         var attr = L.control.attribution(attrOptions);
         attr.addTo(map); //Adding attribution to the map
      </script>
   </body>

</html>>

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

属性マップ

規模

Leaflet JavaScriptライブラリを使用して独自のスケールコントロールをマップに追加するには、以下の手順に従ってください-

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）メソッドを使用して、 *layer オブジェクトをマップに追加します。

ステップ4 *-以下に示すように L.control.scale（）*を使用して渡すことにより、スケールコントロールを作成します。

//Creating scale control
var scale = L.control.scale();

ステップ5 *-以下に示すように、 addTo（）メソッドを使用して、前のステップで作成した *scale control オブジェクトをマップに追加します。

//Adding scale control to the map
scale.addTo(map);

例

次のコードは、地図に縮尺制御を追加します。

<!DOCTYPE html>
<html>
   <head>
      <title>Scale Example</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: 10
         }
        //Creating a map object
         var map = new L.map('map', mapOptions);

        //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
         var scale = L.control.scale();//Creating scale control
         scale.addTo(map);//Adding scale control to the map
      </script>
   </body>

</html>

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

縮尺マップ

Leafletjs-controls

目次

LeafletJS-コントロール

Zoom

例

帰属

例

規模

例