Leaflet Quickstart ¶

Leaflet ist eine JavaScript-Bibliothek für Browser-basierte, mobil-freundliche, interaktive Karten. Leaflet ist leicht, verfügt über alle Funktionen, die die meisten Entwicker für Online-Karten benötigen. Leaflet ist mit einfach, performant und benutzerfreundlich.

Inhalt

Leaflet Quickstart

Vorbereitung ¶

Prior to running this quick start you should start MapProxy. On OSGeoLive this can be found under Geospatial\Web Services\MapProxy\Start MapProxy. This will provide background tiles that will be used in this demo.

Link zum example

Tipp

Wenn Sie dieses Quickstart außerhalb von OSGeoLive lesen, können Sie es vielleicht besser die Original-Demo auf https://leafletjs.com/examples/quick-start/ anschauen, da diese nicht lokal auf Tilestache zugreift.

Vorbereitung ihrer Seite ¶

Bevor Sie irgendeinen Code für ihre Kartenanwendung schreiben, müssen Sie die folgenden Vorbereitungsschritte auf Ihrer Seite ausführen:

Binden Sie die Leaflet CSS-Dateien in den header-Bereich Ihres Dokuments ein

<link rel="stylesheet" href="/leaflet/leaflet.css" />

Binden Sie die Leaflet JavaScript-Datei ein:

<script src="/leaflet/leaflet.js"></script>

Erstellen Sie ein div-Element mit einer bestimmten id, an der Stelle, an der sich Ihre Karte befinden soll:

<div id="map"></div>

Stellen Sie sicher, dass der map-Container eine definierte Höhe hat, z. B. indem Sie es im CSS festlegen:

#map { height: 180px; }

Jetzt sind Sie bereit, die Karte zu initialisieren und einige Dinge mit ihr zu tun.

Einrichten der Karte ¶

Let’s create a map of Firenze, Italy with an indication of the 2022 FOSS4G conference. First we’ll initialize the map and set its view to our chosen geographical coordinates and a zoom level:

var map = L.map('map').setView([43.77913, 11.24938], 15);

Standardmäßig (da wir beim Erstellen der Karteninstanz keine Optionen übergeben haben) sind alle Maus- und Touchinteraktionen auf der Karte aktiviert, und sie verfügt über Zoom- und Attributions-Steuerelemente.

Beachten Sie, dass der setView-Aufruf auch das Map-Objekt zurückgibt - die meisten Leaflet-Methoden verhalten sich so, wenn sie keinen expliziten Wert zurückgeben. Dies ermöglicht eine bequeme jQuery-ähnliche Methodenverkettung ermöglicht.

Next we’ll add a tile layer to our map. In this case we will be using the tile images provided by MapProxy on the live dvd. Note that using nicer background maps such as openstreetmap will result in a much better user experience.

Das Erstellen eines Kachel-Layers umfasst in der Regel das Festlegen der URL für die Kachelbilder, den Quellenverweis und die maximale Zoomstufe des Layers:

L.tileLayer('http://localhost:8011/wmts/mapnik_tile/GLOBAL_WEBMERCATOR/{z}/{x}/{y}.png',{}).addTo(map);

Wenn Sie Internetzugriff haben, können Sie eine schönere gekachelte Karte als Hintergrund verwenden:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:18, attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

Stellen Sie sicher, dass der gesamte Code nach dem Aufruf des div und der leaflet.js erfolgt. Das wars! Sie haben jetzt eine funktionierende Leaflet-Karte.

Es ist erwähnenswert, dass Leaflet anbieterunabhängig ist, was bedeutet, dass es keine bestimmte Auswahl von Anbietern für Kacheln erzwingt und nicht einmal eine einzige anbieterspezifische Codezeile enthält, sodass Sie frei ihren Anbieter auswählen können.

Marker, Kreise und Polygone ¶

Neben Kachel-Layern können Sie ganz einfach weitere Objekte zu Ihrer Karte hinzufügen, einschließlich Markern Polylinien, Polygonen, Kreisen und Popups. Fügen wir einen Marker hinzu:

var marker = L.marker([43.77913, 11.24938]).addTo(map);

Das Hinzufügen eines Kreises ist identisch (mit Ausnahme der Angabe des Radius in Metern als zweites Argument), Sie können jedoch steuern, wie er aussieht, indem Sie Optionen als letztes Argument beim Erstellen des Objekts übergeben:

var circle = L.circle([43.777, 11.255], 250, {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0.5
}).addTo(map);

Das Hinzufügen eines Polygons ist ebenso einfach:

var polygon = L.polygon([
    [43.775, 11.247],
    [43.784, 11.240],
    [43.778, 11.238]
]).addTo(map);

Arbeiten mit Popups ¶

Popups werden normalerweise verwendet, wenn Sie einige Informationen an ein bestimmtes Objekt auf einer Karte anfügen möchten. Leaflet hat eine sehr praktische Abkürzung für diese:

var popup = L.popup()
   .setLatLng([43.77913, 11.24938])
   .setContent("FOSS4G is here this year!")
   .openOn(map);

Hier verwenden wir openOn anstelle von addTo, da es das automatische Schließen eines zuvor geöffneten Popups durchführt, wenn ein neues geöffnet wird. Dies ist gut für die Benutzerfreundlichkeit.

Umgang mit Events (Ereignissen)¶

Jedes Mal, wenn etwas in Leaflet passiert, z.B. wenn der Benutzer auf eine Markierung klickt oder sich die Zoomstufe ändert, sendet das entsprechende Objekt ein Ereignis, das Sie mit einer Funktion abonnieren können. Dies ermöglicht Ihnen, auf Benutzerinteraktion zu reagieren:

function onMapClick(e) {
   alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

Jedes Objekt hat seinen eigenen Satz von Events - siehe Dokumentation für Details. Das erste Argument der Listener-Funktion ist ein Ereignisobjekt - es enthält nützliche Informationen über das Ereignis, das aufgetreten ist. Beispielsweise verfügt das map click-Ereignisobjekt (e im obigen Beispiel) über die latlng-Eigenschaft, an der das Klickereignis erfolgte.

Lassen Sie uns unser Beispiel verbessern, indem wir ein Popup anstelle einer Warnung verwenden:

var popup = L.popup();

function onMapClick(e) {
   popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
         .openOn(map);
}

map.on('click', onMapClick);

Klicken Sie, in die Karte und Sie werden die Koordinaten in einem Popup sehen. Lassen Sie sich das vollständige Beispiel anzeigen

Was kommt als Nächstes?¶

Jetzt haben Sie die Grundlagen von Leaflet gelernt und können sofort mit dem Erstellen von Karten-Anwendungen beginnen! Vergessen Sie nicht, einen Blick in die detaillierte Dokumentation oder andere Beispiele zu werfen.