LeafletJS - Multi Polyline et Polygone

Dans le chapitre précédent, nous avons appris comment ajouter diverses formes telles que des cercles, des polygones, des rectangles, des polylignes, etc. Dans ce chapitre, expliquons comment ajouter des multi-polygones, des multi-angles et des polylignes.

Multi-polyligne

Pour dessiner une superposition multi-polylignes sur une carte à l'aide de la bibliothèque JavaScript Leaflet, suivez les étapes ci-dessous -

Step 1 - Créer un Mapobjet en passant un élément < div > (chaîne ou objet) et des options de mappage (facultatif).

Step 2 - Créer un Layer objet en passant l'URL de la vignette souhaitée.

Step 3 - Ajoutez l'objet de couche à la carte à l'aide du addLayer() méthode de la Map classe.

Step 4 - Créez une variable latlangs pour contenir les points pour dessiner la multi-polyligne.

// Creating latlng object
var latlang = [
   [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
   [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
];

Step 5 - Créez une multi-polyligne en utilisant le L.multiPolyline()fonction. Passez les emplacements en tant que variables pour dessiner une multi-polyligne et une option pour spécifier la couleur et l'épaisseur des lignes.

// Creating multi polyline options
var multiPolyLineOptions = {color:'red'};

// Creating multi polylines
var multipolyline = L.multiPolyline(latlang , multiPolyLineOptions);

Step 6 - Ajoutez plusieurs polylignes à la carte en utilisant le addTo() méthode de la Multipolyline classe.

// Adding multi polyline to map
multipolyline.addTo(map);

Exemple

Voici le code pour dessiner une multi-polyligne couvrant les villes de Hyderabad, Vijayawada et Vishakhapatnam; et Kurnool, Bengaluru et Chennai.

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Multi Polylines</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 = [
            [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
            [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
         ];
         
         // Creating poly line options
         var multiPolyLineOptions = {color:'red'};
         
         // Creating multi poly-lines
         var multipolyline = L.multiPolyline(latlang , multiPolyLineOptions);
         
         // Adding multi poly-line to map
         multipolyline.addTo(map);
      </script>
   </body>
   
</html>

Il génère la sortie suivante -

Multi Polygone

Pour dessiner une superposition multi-polygone sur une carte à l'aide de la bibliothèque JavaScript Leaflet, suivez les étapes ci-dessous -

Step 1 - Créer un Mapobjet en passant un élément < div > (chaîne ou objet) et des options de mappage (facultatif).

Step 2 - Créer un Layer objet en passant l'URL de la vignette souhaitée.

Step 3 - Ajoutez l'objet de couche à la carte à l'aide du addLayer() méthode de la Map classe.

Step 4 - Créez une variable latlangs pour contenir les points pour dessiner le multi-polygone.

// Creating latlng object
var latlang = [
   [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
   [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
];

Step 5 - Créez un multi-polygone en utilisant le L.multiPolygon()fonction. Passez les emplacements en tant que variables pour dessiner le multi-polygone et une option pour spécifier la couleur et l'épaisseur des lignes.

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

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

Step 6 - Ajoutez le multi-polygone à la carte en utilisant le addTo() méthode de la MultiPolygon classe.

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

Exemple

Voici le code pour dessiner un multi-polygone touchant les villes d'Hyderabad, Vijayawada et Vishakhapatnam; et Kurnool, Bengaluru et Chennai.

<!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 = [
            [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
            [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
         ];
         // 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>

Il génère la sortie suivante -