Leaflet — это библиотека JavaScript, используемая для создания картографических веб -приложений . Она позволяет разработчикам без опыта работы с ГИС отображать мозаичные веб-карты, размещенные на публичном сервере, с дополнительными мозаичными наложениями. Она может загружать данные объектов из файлов GeoJSON , стилизовать их и создавать интерактивные слои, такие как маркеры с всплывающими окнами при щелчке.
Впервые выпущенный в 2011 году, [3] он поддерживает большинство мобильных и настольных платформ, поддерживая HTML5 и CSS3 . Среди его пользователей FourSquare , Pinterest , Flickr и USGS .
Leaflet — проект с открытым исходным кодом , разработанный Владимиром Агафонкиным, который присоединился к Mapbox в 2013 году. [4]
Leaflet — это библиотека с открытым исходным кодом на основе JavaScript для создания интерактивных карт. Она была создана в 2011 году гражданином Украины Владимиром Агафонкиным. [5] Она охватывает широкий спектр функций, которые могут понадобиться разработчику при создании интерактивных карт. Она поддерживается многими браузерами, такими как Chrome, Firefox, Safari 5+, Opera 12+, Internet Explorer 9 или более поздними версиями, а также Edge. [6] Она поддерживает множество сторонних плагинов, что позволяет разработчику интегрировать различные виды функций, такие как наложение плиток и изображений, наложение дисплеев и различные взаимодействия на карту; эти плагины помогают разработчику создавать превосходные карты. [7]
Будучи легким (около 42 КБ JS) [8] , как и предполагалось, Leaflet пользуется фантастическим сообществом участников, помогающих его поддерживать. Он создан с простотой; одна хорошая вещь в Leaflet — это его читаемый, простой для понимания исходный код с богатой документацией API. Leaflet все еще новый; больше усилий можно было бы направить на предоставление подробных примеров исходного кода, таких как пошаговое руководство по внедрению сторонних плагинов. Большинство его ресурсов закреплены на GitHub и могут быть легко загружены и изменены по вашему желанию, а исходные коды полностью открыты. [9]
На данный момент выпущено три версии Leaflet, самая стабильная из которых (Leaflet 1.9.4) вышла 18 мая 2023 года. Предыдущая версия (Leaflet 1.8.0) была выпущена 18 апреля 2022 года. Новая версия (Leaflet 2.0) находится в разработке, дата ее выпуска пока не назначена. [10]
Типичное использование Leaflet включает привязку элемента «карты» Leaflet к элементу HTML, такому как div . Затем к элементу карты добавляются слои и маркеры.
< html > < head > < title > Пример карты Leaflet < / title> <!-- Ссылка на CSS- файл Leaflet --> < link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/leaflet.css" /> <!-- Ссылка на JavaScript- файл Leaflet --> < script src = "https://unpkg.com/[email protected]/dist/leaflet.js" >< / script> < style > # map { height : 250 px ; width : 400 px ; border : 1 px solid gray ; } < / style> < / head> < body > < div id = "map" >< / div> < script > // Инициализация карты var map = L . map ( 'map' ). setView ( [ 51.505 , - 0.09 ], 13 ); // Добавьте слой плитки (вы можете выбрать другой стиль карты, изменив URL) L . tileLayer ( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , { attribution : '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors' }). addTo ( map ); // Добавить наложение круга с определенным радиусом и цветом var circle = L . circle ([ 51.508 , - 0.11 ], { color : 'red' , radius : 500 // Радиус в метрах }). addTo ( map ); // Добавляем маркер с всплывающим окном var marker = L . marker ([ 51.5 , - 0.09 ]). addTo ( map ) .bindPopup ( '<b> Привет , мир!</b><br/> Я всплывающее окно.' ); < /скрипт> < /тело> < /html>В этом примере кода сама библиотека Leaflet доступна через переменную L.
Leaflet поддерживает слои Web Map Service (WMS), слои GeoJSON , векторные слои и слои Tile изначально. Многие другие типы слоев поддерживаются через плагины .
Как и в других библиотеках веб-карт, базовая модель отображения, реализованная в Leaflet, представляет собой одну базовую карту, а также ноль или более полупрозрачных наложений с нолем или более векторных объектов, отображаемых поверх.
Основные типы объектов Leaflet: [11]
Также существует множество служебных классов, таких как интерфейсы для управления проекциями, преобразованиями и взаимодействием с DOM .
В Leaflet реализована базовая поддержка нескольких стандартных форматов ГИС, а также поддержка других форматов в плагинах.
Leaflet 0.7 поддерживает Chrome, Firefox, Safari 5+, Opera 12+ и IE 7–11. [17]
OnEachFeature от Leaflet очень удобен при работе, например, с данными geojson. Функция содержит два параметра: "feature" и "layer". "feature" позволяет нам получить доступ к каждому объекту внутри geojson, а "layer" позволяет нам добавлять всплывающие окна, подсказки и т. д.
Пример на JavaScript приведен ниже:
let geoJson = L.geoJSON ( geoJsonData , { weight : 2 , onEachFeature : getFeature , style : getStyle } ) . addTo ( map ) ; const getFeature = ( feature , layer ) = > { if ( ! feature.properties.name ) return layer.bindTooltip ( feature.properties.cityName ) ; layer.bindPopup ( ` <ul> <li> Имя : $ { feature.properties.cityName } </li> <li> Население : $ { feature.properties.population } </li> </ul> ` ) Также можно добавить ключевое слово "async" к функции getFeature, чтобы использовать обещания, такие как fetch(). Мы можем использовать свойства в каждом объекте geojson для создания настраиваемых jsonqueries и получения, например, информации о городе и отображения ее с помощью layer.bindTooltip, layer.bindPopup и т. д.
Leaflet напрямую сопоставим с OpenLayers , так как обе являются библиотеками JavaScript с открытым исходным кодом, работающими только на стороне клиента. Библиотека в целом намного меньше, около 7000 строк кода по сравнению с 230 000 строк кода OpenLayers (по состоянию на 2015 год). [18] Она имеет меньший объем кода, чем OpenLayers (около 123 КБ [19] против 423 КБ [20] ) отчасти из-за своей модульной структуры. Кодовая база новее и использует преимущества последних функций JavaScript, а также HTML5 и CSS3. Однако в Leaflet отсутствуют функции, поддерживаемые OpenLayers, такие как Web Feature Service (WFS) [21] и встроенная поддержка проекций, отличных от Google Web Mercator (EPSG 3857). [22]
Он также сопоставим с закрытым исходным кодом Google Maps API (дебютировавшим в 2005 году) и Bing Maps API, оба из которых включают значительный компонент на стороне сервера для предоставления таких услуг, как геокодирование , маршрутизация , поиск и интеграция с такими функциями, как Google Earth . [ требуется ссылка ] Google Maps API обеспечивает скорость и простоту, но не является гибким и может использоваться только для доступа к службам Google Maps. Однако новая часть DataLayer API Google позволяет отображать внешние источники данных. [23]
Leaflet начал свою жизнь в 2010 году как "Web Maps API", библиотека JavaScript для картографического провайдера CloudMade, где в то время работал Агафонкин. В мае 2011 года CloudMade анонсировал первый релиз Leaflet, созданный с нуля, но с использованием частей старого кода API. [24]
В марте 2022 года разработчик призвал к действиям в ответ на российское вторжение в Украину на сайте Leaflet. [31]