LeafletJS-マルチポリラインとポリゴン

前の章では、円、多角形、長方形、ポリラインなどのさまざまな形状を追加する方法を学びました。この章では、マルチポリゴン、マルチレクタングル、ポリラインを追加する方法について説明します。

マルチポリライン

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

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

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

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

ステップ4 *-マルチポリラインを描画するポイントを保持するために、latlangs変数を作成します。

//Creating latlng object
var latlang = [
   [[Step 5 *− Create a multi-polyline using the* L.multiPolyline()* function. Pass the locations as variable to draw a multi-polyline and an option to specify the color and weight of the lines.

[source,result,notranslate]

var multiPolyLineOptions = {color： 'red'};

var multipolyline = L.multiPolyline（latlang、multiPolyLineOptions）;

*Step 6 *− Add multi-polyline to the map using the* addTo() *method of the* Multipolyline* class.

[source,result,notranslate]

multipolyline.addTo（map）;

==== Example

Following is the code to draw a multi-polyline covering the cities Hyderabad, Vijayawada, and Vishakhapatnam; and Kurnool, Bengaluru, and Chennai.

[source,prettyprint,notranslate]

<！DOCTYPE html> <html> <head> <title>リーフレットマルチポリライン</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>//マップオプションの作成var mapOptions = {center：[16.506174、80.648015]、zoom：7}//マップオブジェクトの作成var map = new L.map （ 'map'、mapOptions）;//Layerオブジェクトの作成var layer = new L.TileLayer（ 'http：//{s} .tile.openstreetmap.org/{z}/{x}/{y} .png'）;//マップにレイヤーを追加map.addLayer（layer）;//latlngオブジェクトの作成var latlang = [[[Creating poly line options var multiPolyLineOptions = {color： 'red'};//マルチポリラインの作成var multipolyline = L.multiPolyline（latlang、multiPolyLineOptions）;//マルチポリラインをマップに追加multipolyline.addTo（map）; </script> </body> </html>

It generates the following output −

image:/leafletjs/multi_polyline_map.jpg[Multi-Polyline Map]

=== Multi Polygon

To draw a multi-polygon overlay on a map using Leaflet JavaScript library, follow the steps given below −

*Step 1 *− Create a* Map* object by passing a <__div__> element (String or object) and map options (optional).

*Step 2 *− Create a* Layer* object by passing the URL of the desired tile.

*Step 3 *− Add the layer object to the map using the* addLayer() *method of the* Map* class.

*Step 4 *− Create a latlangs variable to hold the points to draw the multi polygon.

[source,result,notranslate]

var latlang = [[[Step 5* -* L.multiPolygon（）*関数を使用してマルチポリゴンを作成します。場所を変数として渡し、マルチポリゴンを描画し、オプションで線の色と太さを指定します。

//Creating multi polygon options
var multiPolygonOptions = {color:'red'};

//Creating multi polygon
var multipolygon = L.multiPolygon(latlang , multiPolygonOptions);

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

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

例

以下は、ハイデラバード、ヴィジャヤワダ、ヴィシャカパトナムの各都市に触れるマルチポリゴンを描くコードです。クルヌール、ベンガルール、チェンナイ。

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Multi 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 latlang = [
            [[Creating multi polygon options
         var multiPolygonOptions = {color:'red', weight:8};

        //Creating multi polygons
         var multipolygon = L.multiPolygon(latlang , multiPolygonOptions);

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

</html>

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

マルチポリゴンマップ

Leafletjs-multi-polyline-and-polygon

LeafletJS-マルチポリラインとポリゴン

マルチポリライン

例