Map компоненты

Компоненты карты в SvelteKit UI предоставляют гибкий и мощный способ визуализации географических данных и интеграции интерактивных карт в приложения на JavaScript. Они позволяют отображать маркеры, полигоны, маршруты и управлять событиями пользователя с минимальными усилиями, благодаря полной интеграции с реактивной системой Svelte.

Подключение и установка

Для работы с картами необходимо установить библиотеку SvelteKit UI и дополнительные модули, если требуется интеграция с популярными картографическими сервисами, например, Leaflet или Mapbox.

npm install @sveltekit-ui/core @sveltekit-ui/maps

Импорт базового компонента карты:

<script>
  import { Map, Marker, TileLayer, Popup } from '@sveltekit-ui/maps';
</script>

Основной компонент Map

Компонент Map отвечает за создание контейнера карты и управление её состоянием. Основные свойства:

  • center – начальные координаты центра карты [широта, долгота].
  • zoom – уровень масштабирования (целое число, обычно от 1 до 20).
  • style – CSS-стили для контейнера карты.
  • scrollWheelZoom – включение/отключение масштабирования колесом мыши.

Пример базовой карты:

<Map center={[55.751244, 37.618423]} zoom={10} style="height: 500px; width: 100%;">
  <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
</Map>

Ключевой момент: TileLayer отвечает за визуализацию тайлов карты, и его URL может быть любым совместимым с выбранным картографическим провайдером.

Маркеры и всплывающие подсказки

Компонент Marker используется для отображения точек на карте. Его основные свойства:

  • position – координаты маркера [широта, долгота].
  • icon – настройка иконки маркера.
  • draggable – возможность перетаскивания маркера.

Добавление всплывающей подсказки через компонент Popup:

<Marker position={[55.751244, 37.618423]} draggable={true}>
  <Popup>
    <p>Центр Москвы</p>
  </Popup>
</Marker>

Mаркер автоматически реагирует на события перетаскивания и клика, которые можно обработать через on:event:

<Marker position={[55.751244, 37.618423]} on:dragend={handleDragEnd}>
  <Popup>Перетаскиваемый маркер</Popup>
</Marker>

<script>
  function handleDragEnd(event) {
    console.log('Новые координаты маркера:', event.detail.latlng);
  }
</script>

Полилинии и полигоны

Для отображения маршрутов или границ используется компонент Polyline или Polygon. Основные свойства:

  • positions – массив координат для линий или вершин полигона.
  • color – цвет линии или заливки.
  • weight – толщина линии.
  • fillOpacity – прозрачность заливки (для полигонов).

Пример создания полигона:

<Polygon positions={[[55.75, 37.61], [55.76, 37.62], [55.77, 37.63]]} color="blue" fillOpacity={0.3} />

Для полилиний можно добавлять стрелки и подсказки, что делает их удобными для отображения маршрутов движения или трекинга.

События карты

Компонент Map поддерживает множество событий:

  • click – клик на карте.
  • move – перемещение карты.
  • zoom – изменение масштаба.
  • contextmenu – правый клик для вызова контекстного меню.

Пример подписки на события:

<Map on:click={handleClick} on:zoom={handleZoom} center={[55.751244, 37.618423]} zoom={10}>
  <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
</Map>

<script>
  function handleClick(event) {
    console.log('Клик по карте:', event.detail.latlng);
  }
  function handleZoom(event) {
    console.log('Масштаб карты изменён:', event.detail.zoom);
  }
</script>

Интерактивные слои и кастомизация

SvelteKit UI поддерживает добавление слоев и пользовательских оверлеев:

  • LayerGroup – объединение маркеров и линий в группы.
  • GeoJSON – загрузка и визуализация данных в формате GeoJSON.
  • CustomOverlay – размещение HTML или компонентов Svelte поверх карты.

Пример использования GeoJSON:

<GeoJSON data={geoData} style={{ color: 'green', weight: 2 }} />

Ключевой момент: GeoJSON полностью интегрируется с реактивными данными, поэтому любые изменения в geoData автоматически обновляют карту.

Реактивность и интеграция с состоянием Svelte

Все компоненты карты полностью совместимы с реактивными переменными Svelte. Например, обновление центра карты по изменению переменной center:

<script>
  let center = [55.751244, 37.618423];

  function moveToNewLocation() {
    center = [59.934280, 30.335099]; // Санкт-Петербург
  }
</script>

<Map {center} zoom={10} style="height: 500px;">
  <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
</Map>

<button on:click={moveToNewLocation}>Переместить карту</button>

Система реактивности позволяет динамически добавлять и удалять маркеры, линии и полигоны без перезагрузки компонента карты.

Поддержка кастомных иконок и стилей

Компоненты Marker и Popup позволяют использовать собственные SVG, PNG или даже HTML-контент для отображения уникальных маркеров и подсказок. Это упрощает создание интерактивных интерфейсов и визуализацию нестандартных данных.

<Marker position={[55.751244, 37.618423]} icon="<div class='custom-marker'>?</div>">
  <Popup><strong>Пользовательская иконка</strong></Popup>
</Marker>

Заключение по возможностям компонентов карты

Компоненты карты в SvelteKit UI объединяют простоту использования и мощный набор функций: от базовых маркеров и линий до сложных GeoJSON слоев и пользовательских оверлеев. Полная интеграция с реактивной системой Svelte обеспечивает высокую динамичность интерфейсов и легкость работы с интерактивными геоданными, делая разработку картографических приложений быстрой и удобной.

Оглавление