LeafletJS - Couches vectorielles

Dans le chapitre précédent, nous avons appris à utiliser les marqueurs dans Leaflet. En plus des marqueurs, nous pouvons également ajouter diverses formes telles que des cercles, des polygones, des rectangles, des polylignes, etc. Dans ce chapitre, nous verrons comment utiliser les formes fournies par Google Maps.

Polyligne

Pour dessiner une superposition de 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éer un latlangs variable pour contenir les points pour dessiner la polyligne, comme indiqué ci-dessous.

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

Step 5 - Créez une polyligne à l'aide du L.polyline(). Pour dessiner la polyligne, transmettez les emplacements comme variable et une option pour spécifier la couleur des lignes.

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

Step 6 - Ajoutez la polyligne à la carte en utilisant le addTo() méthode de la Polyline classe.

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

Exemple

Voici le code qui dessine une polyligne, couvrant les villes de Hyderabad, Vijayawada, Rajamahendrawaram et, Vishakhapatnam (Inde).

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>

Il génère la sortie suivante

Polygone

Pour dessiner une superposition de polygones 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éer un latlangs variable pour contenir les points pour dessiner le polygone.

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

Step 5 - Créez un polygone en utilisant le L.polygon(). Passez les emplacements / points comme variables pour dessiner le polygone et une option pour spécifier la couleur du polygone.

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

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

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

Exemple

Voici le code pour dessiner un polygone couvrant les villes de Hyderabad, Vijayawada et Vishakhapatnam (Inde).

<!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>

Il génère la sortie suivante -

Rectangle

Pour dessiner une superposition Rectangle 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 un rectangle sur la carte.

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

Step 5 - Créez un rectangle à l'aide du L.rectangle()fonction. Passez les emplacements / points comme une variable pour dessiner un rectangle etrectangleOptions pour spécifier la couleur et l'épaisseur du rectangle.

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

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

Step 6 - Ajoutez le rectangle à la carte à l'aide du addTo() méthode de la Polygon classe.

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

Exemple

Voici le code pour dessiner un rectangle sur la carte à l'aide de la bibliothèque JavaScript Leaflet.

<!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>

Il génère la sortie suivante -

Cercle

Pour dessiner une superposition de cercle 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 maintenir le centre du cercle comme indiqué ci-dessous.

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

Step 5 - Créez une variable circleOptions pour spécifier les valeurs des options color, fillColor et fillOpacity comme indiqué ci-dessous.

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

Step 6 - Créez un cercle en utilisant L.circle(). Passez le centre du cercle, le rayon et les options de cercle à cette fonction.

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

Step 7 - Ajoutez le cercle créé ci-dessus à la carte en utilisant le addTo() méthode de la Polyline classe.

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

Exemple

Voici le code pour dessiner un cercle avec les coordonnées de la ville Hyderabad comme rayon.

<!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>>

Il génère la sortie suivante -

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved