LeafletJS - Kontrollen

Die Broschüre bietet verschiedene Steuerelemente wie Zoom, Zuordnung, Skalierung usw., wobei -

Zoom- Dieses Steuerelement befindet sich standardmäßig in der oberen linken Ecke der Karte. Es hat zwei Tasten"+" und "–", mit denen Sie die Karte vergrößern oder verkleinern können. Sie können die Standard-Zoomsteuerung entfernen, indem Sie die Einstellung einstellenzoomControl Option der Kartenoptionen zu false.
Attribution- Standardmäßig befindet sich dieses Steuerelement in der unteren rechten Ecke der Karte. Es zeigt die Attributionsdaten in einem kleinen Textfeld an. Standardmäßig wird der Text angezeigt. Sie können die Standard-Attributionssteuerung entfernen, indem Sie die Einstellung festlegenattributionControl Option der Kartenoptionen zu false.
Scale- Standardmäßig befindet sich dieses Steuerelement in der unteren linken Ecke der Karte. Es zeigt die aktuelle Mitte des Bildschirms an.

In diesem Kapitel wird erläutert, wie Sie alle diese drei Steuerelemente mithilfe der Leaflet JavaScript-Bibliothek erstellen und zu Ihrer Karte hinzufügen können.

Zoomen

Führen Sie die folgenden Schritte aus, um mithilfe der Leaflet-JavaScript-Bibliothek eine eigene Zoomsteuerung zur Karte hinzuzufügen.

Step 1 - Erstellen Sie eine Map Objekt durch Übergeben eines Elements (String oder Objekt) und Zuordnungsoptionen (optional).

Step 2 - Erstellen Sie eine Layer Objekt durch Übergeben der URL der gewünschten Kachel.

Step 3 - Fügen Sie das Layer-Objekt mit der Taste zur Karte hinzu addLayer() Methode der Map Klasse.

Step 4 - Erstellen Sie die Variable zoomOptions und definieren Sie Ihre eigenen Textwerte für die Optionen zum Vergrößern und Verkleinern anstelle der Standardoptionen (+ und -).

Erstellen Sie dann das Zoom-Steuerelement, indem Sie die Variable zoomOptions an übergeben L.control.zoom() Wie nachfolgend dargestellt.

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

Step 5 - Fügen Sie das im vorherigen Schritt erstellte Zoomsteuerungsobjekt mit der Taste zur Karte hinzu addTo() Methode.

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

Beispiel

Im Folgenden finden Sie den Code zum Hinzufügen eines eigenen Zoomreglers zu Ihrer Karte anstelle des Standardcodes. Wenn Sie hier 1 drücken, wird die Karte vergrößert, und wenn Sie 0 drücken, wird die Karte verkleinert.

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

Es generiert die folgende Ausgabe -

Namensnennung

Führen Sie die folgenden Schritte aus, um mithilfe der Leaflet-JavaScript-Bibliothek eine eigene Zuordnung zur Karte hinzuzufügen.

Step 1 - Erstellen Sie eine MapObjekt durch Übergeben eines < div > -Elements (Zeichenfolge oder Objekt) und Zuordnungsoptionen (optional).

Step 2 - Erstellen Sie eine Layer Objekt durch Übergeben der URL der gewünschten Kachel.

Step 3 - Fügen Sie das Layer-Objekt mit der Taste zur Karte hinzu addLayer() Methode der Map Klasse.

Step 4 - Erstellen Sie die attrOptions Variieren Sie und definieren Sie Ihren eigenen Präfixwert anstelle des Standardwerts (Faltblatt).

Erstellen Sie dann die Attributionssteuerung, indem Sie die übergeben attrOptions Variable zu L.control.attribution() Wie nachfolgend dargestellt.

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

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

Step 5 - Fügen Sie die attribution control Objekt, das im vorherigen Schritt zur Karte mit dem erstellt wurde addTo() Methode.

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

Beispiel

Der folgende Code fügt Ihrer Karte anstelle des Standardcodes eine eigene Attributionssteuerung hinzu. Hier wird stattdessen das Textattributionsbeispiel angezeigt.

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

Es generiert die folgende Ausgabe -

Rahmen

Führen Sie die folgenden Schritte aus, um mithilfe der Leaflet-JavaScript-Bibliothek ein eigenes Skalierungssteuerelement zur Karte hinzuzufügen.

Step 1 - Erstellen Sie eine MapObjekt durch Übergeben eines < div > -Elements (Zeichenfolge oder Objekt) und Zuordnungsoptionen (optional).

Step 2 - Erstellen Sie eine Layer Objekt durch Übergeben der URL der gewünschten Kachel.

Step 3 - Fügen Sie die layer Objekt auf die Karte mit der addLayer() Methode der Map Klasse.

Step 4 - Erstellen Sie eine Skalensteuerung, indem Sie die Verwendung übergeben L.control.scale() Wie nachfolgend dargestellt.

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

Step 5 - Fügen Sie die scale control Objekt, das im vorherigen Schritt zur Karte mit dem erstellt wurde addTo() Methode wie unten gezeigt.

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

Beispiel

Der folgende Code fügt Ihrer Karte eine Skalierungssteuerung hinzu.

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

Es generiert die folgende Ausgabe -