Peta Leaflet dengan Tindakan Svelte
Inisialisasikan dan kendalikan instans peta Leaflet melalui tindakan Svelte.
Peta Leaflet dengan Tindakan Svelte adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Mengapa Leaflet
Leaflet adalah pustaka pemetaan sumber terbuka yang kecil dan matang serta bekerja dengan baik bersama Svelte.
Pasang
Tambahkan Leaflet dan CSS-nya.
npm install leaflet
@import "leaflet/dist/leaflet.css";Pola Tindakan
Bungkus inisialisasi Leaflet dalam tindakan 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(); } };
}Gunakan di Komponen
Terapkan tindakan tersebut ke div.
<div use:leafletMap={{ center: [40, 30], zoom: 12 }} style="height: 400px;" />Pembaruan
Kembalikan fungsi pembaruan untuk merespons perubahan parameter.
update(newOptions) { map.setView(newOptions.center, newOptions.zoom); }Penanda
Tambahkan penanda secara terprogram atau dalam komponen anak Svelte yang berbagi konteks.
Pembersihan
Selalu panggil map.remove() saat penghancuran untuk membebaskan sumber daya.
Catatan SSR
Leaflet menggunakan window/document. Lindungi dengan onMount atau atur ssr = false.
Penyedia Petak
Pilih penyedia seperti OpenStreetMap, Mapbox, atau Stadia untuk petak peta.
Kinerja
Untuk banyak penanda, gunakan pengaya pengelompokan.
Pembungkus Komponen
Bungkus tindakan dalam komponen untuk peta yang dapat digunakan kembali dan memiliki parameter.
Pemeriksaan Singkat
Mengapa menggunakan tindakan untuk Leaflet?
Ringkasan
Bungkus Leaflet dalam tindakan Svelte: inisialisasi saat pemasangan, respons melalui pembaruan, dan bersihkan saat penghancuran. Hindari SSR untuk akses ke window.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Peta Leaflet dengan Tindakan Svelte” gratis?
Ya — teks lengkap “Peta Leaflet dengan Tindakan Svelte” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Peta Leaflet dengan Tindakan Svelte”?
Inisialisasikan dan kendalikan instans peta Leaflet melalui tindakan Svelte. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Peta Leaflet dengan Tindakan Svelte” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Menggunakan Tailwind CSS dengan SvelteKit
- Grafik D3.js dalam Svelte
- Peta Leaflet dengan Tindakan Svelte
- Editor Teks Kaya: Tiptap