Початок роботи з leaflet - osgeo-live 9
Перед початком роботи ви повинні запустити TileLite. Він знаходиться в меню Geospatial \ Spatial Tools \ Start Mapnik TileLite на диску OSGeo-Live. Це забезпечить роботу тайлів, які будуть використовуватися в даній демонстрації.
Початкова підготовка вашої страніци¶
Перед тим як почати писати код для карти, вам слід виконати ряд дій для підготовки вашої сторінки:
- Додайте посилання на файли стилів Leaflet (CSS) в блоці "head" вашої сторінки
- Вставте div -Елемент із зазначенням конкретного id там, де ви хочете розмістити карту:
- Переконайтеся, що контейнер карти має певну висоту, наприклад, встановивши її в CSS:
Тепер все готово для ініціалізації карти і виконання деяких дії з нею.
Налаштування карти¶
За замовчуванням (навіть якщо ми не ставимо будь-які опції при створенні екземпляра карти), всі дії миші і торкань на мапі включені, вона має зум і атрибути управління.
Зверніть увагу, що виклик setView. також як і більшість інших методів Leaflet, які не повертають явне значення, повертає об'єкт map. що дозволяє будувати ланцюжки методів, схожі на JQuery.
Далі ми додамо тайловий шар на карту. Для цього ми будемо використовувати тайловие зображення з TileLite з даного Live DVD. Відзначимо, що використання таких карт як OpenStreetMap в якості картографічної підкладки дасть більше практичного досвіду.
Створення тайлового шару, як правило, включає в себе установку шаблону URL для тайлових зображень, тексту копірайту і максимального рівня масштабування шару:
Якщо у вас є доступ в Інтернет, то ви можете використовувати і інші тайловие сервіси карт в якості картографічної підкладки:
Варто відзначити, що Leaflet не прив'язаний до конкретних постачальникам тайлових карт, а також не містить специфічного коду для кого-то конкретного з них, так що ви вільні у виборі інших постачальників, якщо є така необхідність.
Маркери, кола і полігони¶
Крім тайлових шарів, ви можете легко додати і інші об'єкти на карту, в тому числі маркери, полілінії, полігони, кола і спливаючі вікна. Давайте додамо маркер:
Додавання кола те ж саме (за винятком вказівки розміру радіуса в метрах в якості другого аргументу), але дозволяє вам налаштовувати вигляд відображення об'єкта, передаючи додаткові параметри в якості останнього аргументу при створенні об'єкта:
Додати полігон теж нескладно:
Спливаючі вікна, як правило, використовуються, коли ви хочете прикріпити деяку інформацію до конкретного об'єкта на карті. Для цього в Leaflet є дуже зручний інструмент:
Тут ми використовуємо openOn замість AddTo. тому що він виконує автоматичне закриття раніше відкритого спливаючого вікна при відкритті нового, що додає зручність використання.
Обробка собитій¶
Кожен раз, коли щось відбувається в Leaflet, наприклад, користувач натискає на маркер або змінює масштаб карти, відповідний об'єкт передає подія, яке ви можете відстежувати за допомогою функції. Це дозволяє реагувати на дії користувача:
Кожен об'єкт має свій власний набір подій (подробиці в розділі документація). Перший аргумент функції - це подія об'єкта. Воно містить корисну інформацію про подію, що сталася. Наприклад, подія об'єкта при натисканні на карті (e в наведеному вище прикладі) володіє параметром latlng, який містить дані про координати цього місця.
Давайте вдосконалюємо наш приклад з використанням спливаючого вікна замість попередження:
Спробуйте натиснути на карту, і ви побачите координати у спливаючому вікні. Подивіться повний приклад.
Отже, ви вивчили базові можливості Leaflet, і можете почати створення свого картографічного додатка прямо зараз! Не забудьте заглянути в розділ документація і подивитися інші приклади.