Leaflet ist ein einfach zu bedienendes und ziemlich leistungsstarkes JavaScript-Tool, mit dem wir Karten auf einer Website erstellen und anzeigen können. Dieser Artikel wird Sie beim Einrichten von Leaflet und beim Erstellen einer einfachen Map mit einer Kachelebene aus Mapbox und einigen anderen Layern und Features unterstützen.

Teil eins von zwei:
Einrichten der Karte

  1. 1 Öffnen oder erstellen Sie Ihre Webseite. Wenn Sie noch keine Webseite haben, in die Sie die Karte einfügen möchten, können Sie die folgende HTML5-Vorlage verwenden. Speichern Sie es als 'map_page.html': 
      <html lang="en"> <Kopf> <Meta Zeichensatz="utf-8"> <Titel>Meine Prospektkarte</Titel> </Kopf> <Karosserie>  </Karosserie> </html>
  2. 2 Fügen Sie die JavaScript- und CSS-Dateien des Leaflet hinzu. Ihre Webseite muss die JavaScript-Datei und CSS-Datei des Leaflet enthalten. Fügen Sie dazu die folgende Codezeile in Ihre HTML-Datei ein Bereich, in einer neuen Linie unter dem : 
     <Skript src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></Skript> <Verknüpfung rel="Stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  3. 3 Fügen Sie einen HTML-Map-Container hinzu. Leaflet zeigt die Karte in einem HTML-Element an, daher müssen Sie eines angeben. Fügen Sie die folgende Markup-Zeile in das Feld ein : 
     <div Ich würde="Karte"></div>
  4. 4 Style den Kartencontainer. Sie müssen festlegen, wie groß die Karte sein soll, wenn sie angezeigt wird. Dazu sollten Sie CSS verwenden. Sie können dem Dokument Folgendes hinzufügen : 
     <>> #Karte  Höhe: 500px; Breite: 700px;  >
  5. 5 Erstellen Sie das Kartenobjekt. Um mit dem Schreiben des JavaScript-Codes zu beginnen, der die Karte erstellt, müssen Sie ein hinzufügen Bereich zum nach der Kartencontainer div. Auch innerhalb davon können Sie das Kartenobjekt erstellen, indem Sie das Symbol aufrufen Karte() Funktion des Prospektobjekts, so: 
     <Skripttyp='Text / Javascript'> var Karte = L.Karte('Karte'); Skript>
  6. 6 Stellen Sie die Kartenansicht ein. Die Ansichtseigenschaft einer Leaflet-Map bestimmt, welcher Teil der Karte angezeigt wird. Richten Sie die Kartenansicht auf die Koordinaten [0, 0] (vor der Küste Zentralafrikas) aus:
    Hinweis: Im Gegensatz zur OpenLayers Mapping-Bibliothek behandelt das Leaflet Koordinaten im Format [latitude, longitude]. 
     Karte.SetView([0, 0], 2);
  7. 7 Fügen Sie eine Kachelebene hinzu. Leaflet-Maps haben übereinander gestapelte Layer und sind das, was Sie tatsächlich auf einer Karte sehen. Es gibt verschiedene Arten von Layern: UI (Markierungen und Popups), Raster (Kachelebenen), Vektor (Formen) und Andere. Kachel-Layer sind die Standard-Basis-Layer und können von Kartenanbietern wie Google Maps, MapQuest oder OpenStreetMaps stammen. Jede Ebene hat eine urlTemplate, die dem Leaflet mitteilt, woher die Ebeneninformation kommt. Sie sollten auch Attributinformationen angeben, um den Besuchern zu sagen, woher die Kartenkacheln stammen. 
     var Schicht = L.tileLayer("http: // s .tile.osm.org / z / x / y .png",  Zuschreibung: '© OpenStreetMap Mitwirkende ); Schicht.hinzufügen(Karte);


Teil zwei von zwei:
Hinzufügen zusätzlicher Layer und Features

  1. 1 Fügen Sie eine Markierung hinzu. Markierungen zeigen den Standort eines Punkts auf einer Karte an. In Leaflet sind Markierungen eine Art von "UI-Ebene", sodass sie direkt zu Karten hinzugefügt werden können. Kopieren Sie einfach die folgende Codezeile in Ihre Element:. 
     var Marker = L.Marker([20, 20]); Marker.hinzufügen(Karte);
  2. 2 Fügen Sie ein Popup hinzu. Popups werden verwendet, um einem Marker oder einer anderen Ebene Kontextinformationen hinzuzufügen. 
     Marker.bindPopup('Tschad'); Marker.openPopup();
  3. 3 Fügen Sie eine Polylinie hinzu. In Leaflet ist eine Polylinie eine Linie mit mehreren Segmenten und eine Art "Vektorebene". 
     var Polylinie = L.Polylinie([ [20, 10], [10, 20], [20, 30] ]) Polylinie.hinzufügen(Karte);
  4. 4 Legen Sie den Stil einer Vektorebene fest. Stile bestimmen, wie der Vektor aussieht, und enthalten Linienfarbe, Linienstil, Füllfarbe, Deckkraft und so weiter. Verschiedene Stiloptionen gelten für verschiedene Arten von Vektoren; Zum Beispiel hat eine Polylinie keinen Bereich, daher gelten die Fülloptionen nicht. 
     Polylinie.setStyle( Farbe: 'rot' );
  5. 5 Fügen Sie ein Skalierungssteuerelement hinzu. Mit Steuerelementen können Sie auf verschiedene Arten mit der Karte interagieren oder zusätzliche Informationen zur Karte anzeigen. Eine Skalierungssteuerung zeigt an, wie groß die Entfernungen auf der Karte sind, die sich beim Zoomen der Karte ändern. 
     var Rahmen = L.Steuerung.Rahmen() Rahmen.hinzufügen(Karte);
  6. 6 Die fertige Karte.