Leaflet-Karten mit Svelte Actions
Initialisieren und steuern Sie eine Leaflet-Karteninstanz über eine Svelte Action.
Leaflet-Karten mit Svelte Actions ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Leaflet
Leaflet ist eine kleine, ausgereifte Open-Source-Kartenbibliothek, die gut mit Svelte funktioniert.
Installation
Fügen Sie Leaflet und das zugehörige CSS hinzu.
npm install leaflet
@import "leaflet/dist/leaflet.css";Action-Muster
Kapseln Sie die Initialisierung von Leaflet in einer Svelte Action.
export function leafletMap(node, options) {
const map = L.map(node).setView(options.center, options.zoom);
L.tileLayer("https://...{z}/{x}/{y}.png").addTo(map);
return { destroy() { map.remove(); } };
}In einer Komponente verwenden
Wenden Sie die Action auf ein div an.
<div use:leafletMap={{ center: [40, 30], zoom: 12 }} style="height: 400px;" />Aktualisierung
Geben Sie eine update-Funktion zurück, um auf Änderungen von Parametern zu reagieren.
update(newOptions) { map.setView(newOptions.center, newOptions.zoom); }Marker
Fügen Sie Marker programmgesteuert oder in einer Svelte-Unterkomponente hinzu, die den Kontext gemeinsam nutzt.
Bereinigung
Rufen Sie in destroy immer map.remove() auf, um Ressourcen freizugeben.
SSR-Hinweis
Leaflet verwendet window/document. Sichern Sie den Zugriff mit onMount ab oder setzen Sie ssr = false.
Kachel-Anbieter
Wählen Sie für die Kacheln Anbieter wie OpenStreetMap, Mapbox oder Stadia.
Performance
Verwenden Sie bei vielen Markern Plugins zur Clusterbildung.
Komponenten-Wrapper
Kapseln Sie die Action in einer Komponente, um wiederverwendbare Karten mit Parametern zu erstellen.
Schnelltest
Warum sollten Sie für Leaflet eine Action verwenden?
Zusammenfassung
Kapseln Sie Leaflet in einer Svelte Action: Initialisieren Sie sie beim Mounten, reagieren Sie über update und bereinigen Sie sie in destroy. Vermeiden Sie SSR beim Zugriff auf window.
Häufig gestellte Fragen
Ist die Lektion „Leaflet-Karten mit Svelte Actions“ kostenlos?
Ja — der vollständige Text von „Leaflet-Karten mit Svelte Actions“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Leaflet-Karten mit Svelte Actions“?
Initialisieren und steuern Sie eine Leaflet-Karteninstanz über eine Svelte Action. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Leaflet-Karten mit Svelte Actions“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Tailwind CSS mit SvelteKit verwenden
- D3.js-Diagramme in Svelte
- Leaflet-Karten mit Svelte Actions
- Rich-Text-Editoren: Tiptap