Начало работы с Leaflet

Запуск

Перед началом работы вы должны запустить TileLite. Он находится в меню Geospatial\Spatial Tools\Start Mapnik & TileLite на диске OSGeo-Live. Это обеспечит работу тайлов, которые будут использоваться в данной демонстрации.

Посмотрите пример.

Tip

Если вы читаете данное руководство не на диске OSGeo Live, то, возможно, вам лучше прочитать оригинальную статью http://leafletjs.com/examples/quick-start.html, так как в данном руководстве акцент сделан на тайлы TileLite c DVD-диска.

Начальная подготовка вашей страницы

Перед тем как начать писать код для карты, вам следует выполнить ряд действий для подготовки вашей страницы:

  • Добавьте ссылку на файлы стилей Leaflet (CSS) в блоке “head” вашей страницы
<link rel="stylesheet" href="/leaflet/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="/leaflet/leaflet.ie.css" />
<![endif]-->
  • Добавьте ссылку на JavaScript-файл Leaflet:
<script src="/leaflet/leaflet.js"></script>
  • Вставьте div-элемент с указанием конкретного id там, где вы хотите разместить карту:
<div id="map"></div>
  • Убедитесь, что контейнер карты имеет определенную высоту, например, установив ее в CSS:
#map { height: 180px; }

Теперь всё готово для инициализации карты и выполнения некоторых действия с ней.

Настройка карты

Давайте создадим карту Европы с указанием на ней места проведения конференции FOSS4G 2013. Во-первых, мы должны инициализировать карту и установить отображение на ней наших географических координат и масштаба:

var map = L.map('map').setView([45.52875, -122.6632], 5);

По умолчанию (даже если мы не задаем какие-либо опции при создании экземпляра карты), все действия мыши и касаний на карте включены, она имеет зум и атрибуты управления.

Обратите внимание, что вызов setView, также как и большинство других методов Leaflet, которые не возвращают явное значение, возвращает объект map, что позволяет строить цепочки методов, похожие на JQuery.

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

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

L.tileLayer('http://localhost:8012/{z}/{x}/{y}.png,{}).addTo(map);

Если у вас есть доступ в Интернет, то вы можете использовать и другие тайловые сервисы карт в качестве картографической подложки:

L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);

Убедитесь, что весь JavaScript-код вызывается после div и включения файла leaflet.js. Вот и всё! У вас есть работающая карта на Leaflet.

Стоит отметить, что Leaflet не привязан к конкретным поставщикам тайловых карт, а также не содержит специфичного кода для кого-то конкретного из них, так что вы свободны в выборе других поставщиков, если есть такая необходимость.

Маркеры, круги и полигоны

Помимо тайловых слоёв, вы можете легко добавить и другие объекты на карту, в том числе маркеры, полилинии, полигоны, круги и всплывающие окна. Давайте добавим маркер:

var marker = L.marker([45.52875, -122.6632]).addTo(map);

Добавление круга то же самое (за исключением указания размера радиуса в метрах в качестве второго аргумента), но позволяет вам настраивать вид отображения объекта, передавая дополнительные параметры в качестве последнего аргумента при создании объекта:

var circle = L.circle([44.056287, -123.07572], 25000, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

Добавить полигон тоже несложно:

var polygon = L.polygon([
    [46.01, -130.01],
    [40.81, -128.76],
    [44.15, -133.23]
]).addTo(map);

Работа со всплывающими окнами

Всплывающие окна, как правило, используются, когда вы хотите прикрепить некоторую информацию к конкретному объекту на карте. Для этого в Leaflet есть очень удобный инструмент:

var popup = L.popup()
    .setLatLng([45.52875, -122.6632])
    .setContent("I am a standalone popup.")
    .openOn(map);

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

Обработка событий

Каждый раз, когда что-то происходит в Leaflet, например, пользователь нажимает на маркер или изменяет масштаб карты, соответствующий объект передает событие, которое вы можете отслеживать с помощью функции. Это позволяет реагировать на действия пользователя:

function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

Каждый объект имеет свой собственный набор событий (подробности в разделе документация). Первый аргумент функции — это событие объекта. Оно содержит полезную информацию о событии, которое произошло. Например, событие объекта по клику на карте (e в приведенном выше примере) обладает параметром latlng, который содержит данные о координатах этого места.

Давайте усовершенствуем наш пример с использованием всплывающего окна вместо предупреждения:

var popup = L.popup();

function onMapClick(e) {
    popup
         .setLatLng(e.latlng)
         .setContent("You clicked the map at " + e.latlng.toString())
          .openOn(map);
}

map.on('click', onMapClick);

Попробуйте нажать на карту, и вы увидите координаты во всплывающем окне. Посмотрите полный пример.

Итак, вы изучили базовые возможности Leaflet, и можете начать создание своего картографического приложения прямо сейчас! Не забудьте заглянуть в раздел документация и посмотреть другие примеры.