Mapy Leaflet z akcjami Svelte
Inicjalizuj instancję mapy Leaflet i steruj nią za pomocą akcji Svelte.
Mapy Leaflet z akcjami Svelte to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Dlaczego Leaflet
Leaflet to niewielka, dojrzała biblioteka map open source, która dobrze współpracuje z Svelte.
Instalacja
Należy dodać Leaflet i jego arkusz CSS.
npm install leaflet
@import "leaflet/dist/leaflet.css";Wzorzec akcji
Inicjalizację Leaflet należy opakować w akcję Svelte.
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(); } };
}Używanie w komponencie
Akcję należy zastosować do elementu div.
<div use:leafletMap={{ center: [40, 30], zoom: 12 }} style="height: 400px;" />Aktualizowanie
Należy zwrócić funkcję update, aby reagować na zmiany parametrów.
update(newOptions) { map.setView(newOptions.center, newOptions.zoom); }Markery
Markery można dodawać programowo lub w komponencie potomnym Svelte współdzielącym kontekst.
Czyszczenie
W destroy należy zawsze wywoływać map.remove(), aby zwolnić zasoby.
Uwaga dotycząca SSR
Leaflet korzysta z window/document. Należy zastosować zabezpieczenie za pomocą onMount lub ustawić ssr = false.
Dostawcy kafelków
Do dostarczania kafelków należy wybrać dostawców takich jak OpenStreetMap, Mapbox lub Stadia.
Wydajność
W przypadku dużej liczby markerów należy używać wtyczek do klasteryzacji.
Wrapper komponentu
Akcję należy opakować w komponent, aby uzyskać wielokrotnego użytku mapy z parametrami.
Szybkie sprawdzenie
Dlaczego należy używać akcji dla Leaflet?
Podsumowanie
Leaflet należy opakować w akcję Svelte: inicjalizować w mount, reagować za pomocą update i czyścić w destroy. Należy unikać SSR w przypadku dostępu do window.
Często zadawane pytania
Czy lekcja „Mapy Leaflet z akcjami Svelte” jest bezpłatna?
Tak — pełny tekst „Mapy Leaflet z akcjami Svelte” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Mapy Leaflet z akcjami Svelte”?
Inicjalizuj instancję mapy Leaflet i steruj nią za pomocą akcji Svelte. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Mapy Leaflet z akcjami Svelte”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Używanie Tailwind CSS z SvelteKit
- Wykresy D3.js w Svelte
- Mapy Leaflet z akcjami Svelte
- Edytory tekstu sformatowanego: Tiptap