LeafletJS-ベクターレイヤー

前の章では、リーフレットでマーカーを使用する方法を学びました。マーカーとともに、円、多角形、長方形、ポリラインなどのさまざまな形状を追加することもできます。この章では、Googleマップが提供する図形の使用方法について説明します。

ポリライン

Leaflet JavaScriptライブラリを使用して地図上にポリラインオーバーレイを描画するには、以下の手順に従ってください-

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

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

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

ステップ4 *-以下に示すように、ポリラインを描画するポイントを保持する *latlangs 変数を作成します。

//Creating latlng object
var latlngs = [
   [17.385044, 78.486671],
   [16.506174, 80.648015],
   [17.000538, 81.804034],
   [17.686816, 83.218482]
];

ステップ5 *- L.polyline（）*を使用してポリラインを作成します。ポリラインを描画するには、変数として位置を渡し、線の色を指定するオプションを渡します。

//Creating a poly line
var polyline = L.polyline(latlngs, {color: 'red'});

ステップ6 *- *Polyline クラスの* addTo（）*メソッドを使用して、ポリラインをマップに追加します。

//Adding to poly line to map
polyline.addTo(map);

例

以下は、ハイデラバード、ヴィジャヤワダ、ラジャマヘンドラダラム、およびヴィシャカパトナム（インド）の都市をカバーするポリラインを描くコードです。

DOCTYPE html>
<html>
   <head>
      <title>Leaflet Poly lines</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: [16.506174, 80.648015],
            zoom: 7
         }
        //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');

        //Adding layer to the map
         map.addLayer(layer);

        //Creating latlng object
         var latlngs = [
            [17.385044, 78.486671],
            [16.506174, 80.648015],
            [17.000538, 81.804034],
            [17.686816, 83.218482]
         ];
        //Creating a poly line
         var polyline = L.polyline(latlngs, {color: 'red'});

        //Adding to poly line to map
         polyline.addTo(map);
      </script>
   </body>

</html>

次の出力を生成します

ポリライン

ポリゴン

Leaflet JavaScriptライブラリを使用して地図上にポリゴンオーバーレイを描画するには、以下の手順に従ってください-

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

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

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

ステップ4 *- *latlangs 変数を作成して、ポリゴンを描画するポイントを保持します。

//Creating latlng object
var latlngs = [
   [17.385044, 78.486671],
   [16.506174, 80.648015],
   [17.686816, 83.218482]
];

ステップ5 *- L.polygon（）*を使用してポリゴンを作成します。位置/ポイントを変数として渡してポリゴンを描画し、オプションを使用してポリゴンの色を指定します。

//Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});

ステップ6 *- *Polygon クラスの* addTo（）*メソッドを使用して、ポリゴンをマップに追加します。

//Adding to polygon to map
polygon.addTo(map);

例

以下は、都市ハイデラバード、ヴィジャヤワダ、およびヴィシャカパトナム（インド）をカバーするポリゴンを描画するコードです。

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Polygons</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: [16.506174, 80.648015],
            zoom: 7
         }
        //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');

        //Adding layer to the map
         map.addLayer(layer);

        //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'});

        //Adding to polygon to map
         polygon.addTo(map);
      </script>
   </body>

</html>

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

ポリゴン

矩形

Leaflet JavaScriptライブラリを使用して長方形のオーバーレイを地図に描画するには、以下の手順を実行します

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

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

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

ステップ4 *-latlangs変数を作成して、マップ上に長方形を描くポイントを保持します。

//Creating latlng object
var latlngs = [
   [17.342761, 78.552432],
   [16.396553, 80.727725]
];

ステップ5 *- L.rectangle（）関数を使用して長方形を作成します。位置/ポイントを変数として渡し、長方形を描画し、 *rectangleOptions を使用して長方形の色と重さを指定します。

//Creating rectOptions
var rectOptions = {color: 'Red', weight: 1}

//Creating a rectangle
var rectangle = L.rectangle(latlngs, rectOptions);

ステップ6 *- *Polygon クラスの* addTo（）*メソッドを使用して、長方形をマップに追加します。

//Adding to rectangle to map
rectangle.addTo(map);

例

以下は、Leaflet JavaScriptライブラリを使用して地図上に長方形を描くコードです。

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Rectangle</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: [16.506174, 80.648015],
            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 latlng object
         var latlngs = [
            [17.342761, 78.552432],
            [16.396553, 80.727725]
         ];
         var rectOptions = {color: 'Red', weight: 1}  //Creating rectOptions

        //Creating a rectangle
         var rectangle = L.rectangle(latlngs, rectOptions);
         rectangle.addTo(map);  //Adding to rectangle to map
      </script>
   </body>

</html>

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

長方形

サークル

Leaflet JavaScriptライブラリを使用して地図上に円のオーバーレイを描画するには、以下の手順に従います。

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

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

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

ステップ4 *-以下に示すように、円の中心を保持するlatlangs変数を作成します。

//Center of the circle
var circleCenter = [17.385044, 78.486671];

ステップ5 *-変数circleOptionsを作成して、以下に示すように、オプションcolor、fillColor、およびfillOpacityに値を指定します。

//Circle options
var circleOptions = {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0
}

ステップ6 *- L.circle（）*を使用して円を作成します。円の中心、半径、および円のオプションをこの関数に渡します。

//Creating a circle
var circle = L.circle(circleCenter, 50000, circleOptions);

ステップ7 *- *Polyline クラスの* addTo（）*メソッドを使用して、上記で作成した円をマップに追加します。

//Adding circle to the map
circle.addTo(map);

例

以下は、都市ハイデラバードの座標を半径とする円を描くコードです。

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Circle</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
         var circleCenter = [17.385044, 78.486671];    //Center of the circle

        //Circle options
         var circleOptions = {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0
         }
        //Creating a circle
         var circle = L.circle(circleCenter, 50000, circleOptions);
         circle.addTo(map);    //Adding circle to the map
      </script>
   </body>

</html>>

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

サークル

Leafletjs-vector-layers

LeafletJS-ベクターレイヤー

ポリライン

例

ポリゴン

例

矩形

例

サークル

例

目次