Карты Leaflet с действиями Svelte
Инициализируйте экземпляр карты Leaflet и управляйте им через действие Svelte.
«Карты Leaflet с действиями Svelte» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Зачем нужен Leaflet
Leaflet — небольшая зрелая библиотека карт с открытым исходным кодом, которая хорошо работает с Svelte.
Установка
Добавьте Leaflet и его CSS.
npm install leaflet
@import "leaflet/dist/leaflet.css";Шаблон действия
Оберните инициализацию Leaflet в действие 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(); } };
}Использование в компоненте
Примените действие к элементу div.
<div use:leafletMap={{ center: [40, 30], zoom: 12 }} style="height: 400px;" />Обновление
Верните функцию обновления, чтобы реагировать на изменения параметров.
update(newOptions) { map.setView(newOptions.center, newOptions.zoom); }Маркеры
Добавляйте маркеры программно или во внутреннем компоненте Svelte, использующем общий контекст.
Очистка
Всегда вызывайте map.remove() при уничтожении, чтобы освободить ресурсы.
Особенности SSR
Leaflet использует window и document. Защитите обращение с ними с помощью onMount или задайте ssr = false.
Поставщики тайлов
Выбирайте таких поставщиков тайлов, как OpenStreetMap, Mapbox или Stadia.
Производительность
При большом количестве маркеров используйте плагины кластеризации.
Обертка компонента
Оберните действие в компонент для создания повторно используемых карт с параметрами.
Быстрая проверка
Зачем использовать действие для Leaflet?
Итоги
Оберните Leaflet в действие Svelte: инициализируйте при монтировании, реагируйте через update и очищайте ресурсы при уничтожении. Избегайте SSR при обращении к window.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «Карты Leaflet с действиями Svelte» бесплатный?
Да — полный текст урока «Карты Leaflet с действиями Svelte» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Карты Leaflet с действиями Svelte»?
Инициализируйте экземпляр карты Leaflet и управляйте им через действие Svelte. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Карты Leaflet с действиями Svelte»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Использование Tailwind CSS с SvelteKit
- Графики D3.js в Svelte
- Карты Leaflet с действиями Svelte
- Редакторы форматированного текста: Tiptap