LeafletJS — взаимодействие с картами с помощью JavaScript

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

Одним из способов добавления карт в веб-приложение является использование Leaflet JS. Leaflet JS — это библиотека JavaScript с открытым исходным кодом для добавления простых и интерактивных веб-карт. Он может добавлять данные карты к слоям карты и имеет такие функции, как панорамирование, масштабирование и т. д., которые требуются большинству приложений. Несмотря на то, что брошюра предоставляет некоторые основные функции, необходимые в любом картографическом приложении, простой способ расширить функциональность карт — это использовать сторонние плагины. Поскольку листовка является библиотекой с открытым исходным кодом, т. е. ее исходный код доступен на GitHub, было сделано много вкладов и доступно множество плагинов. Вы можете получить список плагинов здесь.

Итак, Leaflet — это API карты, и он помогает нам взаимодействовать с данными карты, но не предоставляет никаких данных. Он также не предоставляет саму карту, поскольку не является картографическим сервисом. Итак, как нам получить карту? Ответ заключается в том, что Leaflet зависит от третьих лиц, предоставляющих базовую карту, т.е. Leaflet построен таким образом, что его можно использовать с несколькими слоями базовой карты. Как правило, Leaflet используется с OpenStreetMaps, но мы можем использовать и других поставщиков карт, таких как Mapbox, Ersi, Bing Map Layers и т. д. Вы можете проверить различных поставщиков базовых карт здесь.

Итак, давайте пошагово разберемся, как можно использовать листовку для взаимодействия с картами:

1. Структура каталогов

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

2. Шаблон HTML и добавление ссылок на листовки

Чтобы добавить карту на нашу веб-страницу, необходимы простые веб-технологии, такие как HTML, CSS и JavaScript. Чтобы использовать Leaflet в своем коде, вам нужно добавить Leaflet CSS и Leaflet JS. Вы можете скачать их или использовать, включив их CDN (см. пример кода выше).

3. Создайте контейнер карты и создайте объект карты.

<div id="mymap"> </div>

Сначала мы определяем элемент контейнера, в который мы хотим загрузить карту, и предоставляем ему идентификатор «mymap».

let map = L.map("mymap").setView([19.5937, 78.9629], 5);

Теперь мы создаем объект карты, с помощью которого мы будем создавать карту и управлять ею. Мы создаем экземпляр объекта карты с идентификатором элемента контейнера, созданного выше, т.е. «mymap». Метод setview используется для установки центра карты и уровня масштабирования.

4. Добавьте фрагменты карты с помощью TileLayer

Чтобы загрузить и отобразить нашу карту, мы используем класс TileLayer для создания слоя и указания URL фрагментов карты. Карта разделена на несколько фрагментов, и мы используем OpenStreetMap для отображения фрагментов карты. Вы можете получить список поставщиков тайлов здесь. Мы указываем некоторые дополнительные параметры, такие как минимальный уровень масштабирования, максимальный уровень масштабирования, размер плитки. Поскольку мы используем фрагменты карты OpenStreetMap, нам необходимо предоставить надлежащую атрибуцию (или кредиты) OpenStreetMap (или любому поставщику фрагментов карты, которого вы используете) для использования их фрагментов карты. Чтобы добавить этот слой на нашу карту, мы используем метод addTo().

5. Создание нашего набора данных для включения маркеров

https://github.com/OptimalLearner/Leaflet-JS-Example-Code/blob/master/assets/location-data.json

Теперь нам нужно добавить на карту несколько маркеров, указывающих на какое-то место. Мы сохранили данные в другом файле с именем «location-data.json». Этот файл содержит сведения о маркере, такие как координаты широты и долготы и т. д. Вы можете получить доступ к данным по приведенной выше ссылке и сохранить их вместе с кодом. Если вы хотите сохранить данные в самом файле JS, вы можете создать переменную и присвоить ее вышеуказанным данным.

6. Создание маркера, привязка всплывающих окон и обработка событий

Маркер используется для идентификации и выделения местоположения на карте. Чтобы добавить маркер в Leaflet, мы инициализируем класс маркера и передаем координаты местоположения, на которое должен указывать маркер. Вы можете добавить столько маркеров, сколько хотите. Теперь, чтобы определить, какое местоположение отмечено маркером, мы можем добавить всплывающее окно к маркеру, которое сообщит нам информацию о местоположении. Мы добавляем всплывающее окно с помощью метода bindPopup для отображения названия местоположения и небольшого описания местоположения.

Листовка также имеет возможность реагировать на генерируемые нами события. Мы можем добавить прослушиватель событий, используя функцию «on» для определенного события (в нашем случае «щелчок»), который прослушивает функцию, содержащую некоторый набор операций. В конце мы добавляем этот маркер на нашу карту.

7. Настройка значка маркера

Не все хотели бы использовать один и тот же значок маркера по умолчанию. Итак, на помощь приходит функция пользовательских значков маркеров. Вам нужно использовать класс Icon и передать URL-адрес значка, который вы хотите использовать в качестве маркера, и добавить размер значка [ширина, высота] в пикселях (px). Теперь нам нужно добавить иконку к маркеру. В классе Marker после добавления координат мы можем передать пользовательский значок маркера для рендеринга маркера.

8. Что лучше для вас: flyTo или setView?

Оба выполняют одну и ту же работу по изменению местоположения на определенные координаты, но метод flyTo() обеспечивает некоторую анимацию, которая будет лететь в местоположение, указанное с использованием координат. Если вам нужна анимация, вы можете использовать метод flyTo(), иначе setView() также работает для изменения местоположения.

Существует еще один метод, называемый panTo([широта, долгота]), который просто вызывает setView(), сохраняя уровень масштабирования на текущем уровне масштабирования карты. Метод setView() позволяет вам даже установить уровень масштабирования, но это не относится к panTo().

9. Полный код и результат