LeafletJS - Contrôles

Leaflet fournit divers contrôles tels que le zoom, l'attribution, l'échelle, etc., où -

Zoom- Par défaut, ce contrôle existe dans le coin supérieur gauche de la carte. Il a deux boutons"+" et "–", à l'aide duquel vous pouvez effectuer un zoom avant ou un zoom arrière sur la carte. Vous pouvez supprimer la commande de zoom par défaut en définissantzoomControl option des options de carte pour false.
Attribution- Par défaut, ce contrôle existe dans le coin inférieur droit de la carte. Il affiche les données d'attribution dans une petite zone de texte. Par défaut, il affiche le texte. Vous pouvez supprimer le contrôle d'attribution par défaut en définissant laattributionControl option des options de carte pour false.
Scale- Par défaut, ce contrôle existe dans le coin inférieur gauche de la carte. Il affiche le centre actuel de l'écran.

Dans ce chapitre, nous vous expliquerons comment créer et ajouter ces trois commandes à votre carte à l'aide de la bibliothèque JavaScript Leaflet.

Zoom

Pour ajouter votre propre contrôle de zoom à la carte à l'aide de la bibliothèque JavaScript Leaflet, suivez les étapes ci-dessous -

Step 1 - Créer un Map objet en passant un élément (String 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 la variable zoomOptions et définissez vos propres valeurs de texte pour les options de zoom avant et de zoom arrière, au lieu de celles par défaut (+ et -).

Ensuite, créez le contrôle de zoom en passant la variable zoomOptions à L.control.zoom() comme indiqué ci-dessous.

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

Step 5 - Ajoutez l'objet de contrôle de zoom créé à l'étape précédente à la carte à l'aide du addTo() méthode.

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

Exemple

Voici le code pour ajouter votre propre contrôle de zoom à votre carte, au lieu de celui par défaut. Ici, en appuyant sur 1, la carte effectue un zoom avant, et en appuyant sur 0, la carte effectue un zoom arrière.

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

Il génère la sortie suivante -

Attribution

Pour ajouter votre propre attribution à la 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 le attrOptions variable et définissez votre propre valeur de préfixe au lieu de celle par défaut (dépliant).

Ensuite, créez le contrôle d'attribution en passant le attrOptions variable à L.control.attribution() comme indiqué ci-dessous.

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

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

Step 5 - Ajouter le attribution control objet créé à l'étape précédente sur la carte à l'aide de addTo() méthode.

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

Exemple

Le code suivant ajoute notre propre contrôle d'attribution à votre carte, au lieu de celui par défaut. Ici, à la place, l' exemple d'attribution de texte sera affiché.

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

Il génère la sortie suivante -

Échelle

Pour ajouter votre propre contrôle d'échelle à la 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 - Ajouter le layer objet sur la carte en utilisant le addLayer() méthode de la Map classe.

Step 4 - Créer un contrôle d'échelle en passant l'utilisation L.control.scale() comme indiqué ci-dessous.

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

Step 5 - Ajouter le scale control objet créé à l'étape précédente sur la carte à l'aide de addTo() méthode comme indiqué ci-dessous.

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

Exemple

Le code suivant ajoute un contrôle d'échelle à votre carte.

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

Il génère la sortie suivante -