Leaflet
Реклама. ООО «ЛитРес», ИНН: 7719571260.
Оглавление
Astrid Günther. Leaflet
Willkommen
Wichtiges zum Buch
Was ist Leaflet?
Was sollten Sie mitbringen?
Die Autorin
Eine Karte mit Leaflet erstellen
Wir beginnen mit einer einfachen Karte
Integrieren Sie die notwendigen JavaScript- und Cascading Style Sheet-Dateien
Leaflet über ein Content Delivery Network einbinden
Eine lokale Leaflet-Kopie einbinden
Leaflet performant einbinden – defer oder async
Was passiert genau, wenn eine Website geladen wird, die im Kopfbereich ein Skript einbindet?
Wie können Sie die Ladezeit positiv beeinflussen?
Was sollten Sie beim Einsatz von defer oder async mit Leaflet beachten?
Erstellen Sie ein Element, in dem Ihre Karte angezeigt werden soll
Erstellen Sie das Kartenobjekt
Fügen Sie eine Schicht mit Kacheln – einen Tile-Layer – zum Kartenobjekt hinzu
Exkurs: Geographische Koordinaten
Das Koordinatensystem der Erde
Breitengrade
Längengrade
Schreibweisen von geografischen Koordinaten
Das Sexagesimalsystem
Die Dezimalschreibweise
Exkurs: Wie werden Landkarten auf einer Website angezeigt?
Grafikformate: Vektoren und Rastergrafiken
Vektoren
Rastergrafiken
Vektoren und Rastergrafiken für digitale Karten
Wir unterteilen die Welt in Kacheln
Wie weiß Leaflet, welche der vielen Kacheln angezeigt werden sollen?
Schöne Kartenlayer
Thunderforest
Stamen
Images als Layer – Web-Map-Service
Eine einfache Leaflet-Karte mithilfe des Web-Map-Services erstellen
L.tileLayer.wms über L.tileLayer.wms
L.tileLayer.wms und L.tileLayer zusammen auf einer Karte
In diesem Kapitel haben wir …
Die Karte mit Daten bestücken
In diesem Kapitel werden wir …
Punkte, Marker, Linien, Polygone, Rechtecke und Kreise als Leaflet-Objekte
Punkte und Marker
Punkte
Marker
Objekte, die aus mehr als einem Punkt bestehen. Linien
Polygon
Rechtecke und Kreise
Rechtecke
Kreise
Mehrere Poly-Objekte auf einer Ebene
Mehrere Polyline-Objekte auf einer Ebene
Mehrere Polygon-Objekte auf einer Ebene
Mehrere sich überschneidende Polygon-Objekte auf einer Ebene
Daten auf Ebenen gruppieren
Layer-Gruppen
Feature-Gruppen
Popups
Mobil
HTML und CSS
JavaScript
Ereignisse in Leaflet
Eine benutzerdefinierte Funktionen
Ein interaktives Beispiel
In diesem Kapitel haben wir …
GeoJSON
In diesem Kapitel werden wir …
Die Entwicklungsgeschichte von GeoJSON
Warum ist das Format GeoJSON entstanden?
XML
JSON
Und warum nach JSON nun auch noch GeoJSON?
GeoJSON erkunden
Eine Geometrie
Position
Point
Multipoint
LineString
MultiLineString
Polygon
MultiPolygon
Mehrere Geometrien zusammenfassen – GeometryCollection
Einer GeoJSON-Geometrie Eigenschaften zuordnen
FeatureCollection
Die Grenzen von GeoJSON
GeoJSON in Leaflet
Ein GeoJSON Feature in Leaflet einbinden
Eine GeoJSON FeatureCollection in Leaflet einbinden
GeoJSON aus Leaflet exportieren
Styles
Beim Erstellen eines GeoJSON Layer einen Stil mitgeben
Ein komplexeres Beispiel: Eine andere Farbe beim Überrollen mit der Maus
Iterieren
OnEachFeature() – Bearbeite jedes Feature
PointToLayer – Punkt zu Ebene
Filtern mit der Option filter
In diesem Kapitel haben wir …
Heatmaps und Choroplethenkarten
In diesem Kapitel werden wir …
Heatmaps
Was ist eine Heatmap?
Heatmaps in Leaflet – Dichte
Stile und Optionen
Methoden
Ein Beispiel zur Anwendung der Methoden – Die Methode addLatLng()
Die Methoden addLatLng(), addLatLngs() und setOptions() der Klasse L.heatLayer zusammen in einem Beispiel
Marker
Heatmaps mit Leaflet – Intensität
Dokumentation und Methoden
Interaktive Heatmaps
Animierte Heatmaps
Choroplethenkarte
Was genau unterscheidet eine Choroplethenkarte von einer Heatmap?
Choroplethenkarten in Leaflet
Open Data
Farben
Stile
Das vollständige Beispiel
Normalisierte Choroplethenkarten
In diesem Kapitel haben wir …
Custom Markers
In diesem Kapitel werden wir …
Ein individueller Marker auf Ihrer Karte
Eigenschaften eines individuellen Markers
Die Klasse L.Icon erweitern
Ein Marker Plugin
BeautifyMarker
Cluster
Optionen, Methoden und Ereignisse
Marker animieren. Hüpfende Marker
Animierte Marker. Ein Marker bewegt sich
Einen Marker in Bewegung versetzen und wieder stoppen
Plugins kombinieren
Leaflet Data Visualization Framework (DVF)
Das Plugin Data Visualization Framework
Diagramme als Marker
In diesem Kapitel haben wir …
ESRI – Environmental Systems Research Institute
In diesem Kapitel werden wir …
L.esri.BasemapLayer erweitert L.TileLayer
Basemaps und optionale Layer von ESRI
Basemaps
Optionale Label Layer
Ein erstes Beispiel
Unterschiedliche Basemaps auswählen
Shapefiles
Was genau verbirgt sich hinter dem Begriff Shapefile?
Wie kommen Sie an ein Shapefiles
Wie binden Sie Shapefiles in Ihre Leaflet-Karte ein? Deutsche Verwaltungsgrenzen als Shapefile in der Leaflet-Karte
Deutsche Verwaltungsgrenzen mit Optionen
Ein Pop-up-Fenster
Ein Pop-up-Fenster mit allen Informationen des Features
ESRI Services
L.esri.DynamicMapLayer
Geocoding
Nach Eingabe einer Adresse den passenden Ort auf der Karte finden
Mithilfe eines Parameters in der URL den passenden Ort finden
Nach Klick auf die Karte die passende Adresse ausgeben
Feature Services
Attribute
Abstand visualisieren
In diesem Kapitel haben wir …
Routing
In diesem Kapitel werden wir …
Allgemeines zum Thema Routing…
Leaflet Routing Maching
Optionen
Geocoding und Routing
In diesem Kapitel haben wir …
Leaflet Klassendiagramm
Auf Wiedersehen
Impressum
Отрывок из книги
Das Arbeiten mit Geodaten und digitalen Landkarten hat durch das globale Positionsbestimmungssystem GPS1 immer mehr an Relevanz gewonnen. Viele Anwendungen bieten heute sogar online geografische Informationen in Echtzeit an. So finden Sie auch im Internet immer mehr digitale Karten und Anwendungen, die mit Geodaten arbeiten.
Geodaten2 sind Informationen, die eine Zuordnung zu einer räumlichen Lage besitzen. 90 % aller Daten können einem Ort zugeordnet werden und sind somit Geodaten.
.....
Nicht nur OpenStreetMap, auch die Google Maps API unterteilt ihre Kartenbilder in Kacheln. Wenn Sie die Website https://www.google.de/maps aufrufen und eine andere Vergrößerungsstufe wählen, wird ermittelt, welche Daten erforderlich sind. Diese Daten werden dann in einen Satz mit Kacheln übersetzt und angezeigt. Dabei bildet die Zoomstufe 0 die ganze Welt auf ein Quadrat ab. Teilt man den Erdumfang von 40.038 Kilometern durch die 256 Pixel der Kachel sieht man im Ergebnis, dass ein Pixel 156,4 Kilometer darstellt. Das ist noch nicht sehr detailliert. Bis Zoomstufe 19 ändert sich eine ganze Menge. In der nachfolgenden Tabelle sehen Sie, dass bei Zoomstufe 19 ein Pixel einem Bereich von 0,3 Metern auf der Erde entspricht. Damit kann man schon etwas anfangen!
Die vollständige Tabelle können Sie unter der Adresse http://wiki.openstreetmap.org/wiki/Zoom_levels26 mit weiteren Angaben im Internet abrufen.
.....