LeafletJS - Начало работы

Leaflet.js — это библиотека с открытым исходным кодом, с помощью которой мы можем развертывать простые, интерактивные и легкие веб-карты.

Библиотека JavaScript листовки позволяет использовать такие слои, как слои листов, WMS, маркеры, всплывающие окна, векторные слои (полилинии, многоугольники, круги и т. Д.), Наложения изображений и GeoJSON.
Вы можете взаимодействовать с картами Leaflet, перетаскивая карту, увеличивая масштаб (двойным щелчком или, прокручивая колесико), используя клавиатуру, используя обработку событий и перетаскивая маркеры.
Leaflet поддерживает такие браузеры, как Chrome, Firefox, Safari 5+, Opera 12+, IE 7–11 на рабочем столе и такие браузеры, как Safari, Android, Chrome, Firefox для мобильных устройств.

Библиотека JavaScript листовки позволяет использовать такие слои, как слои листов, WMS, маркеры, всплывающие окна, векторные слои (полилинии, многоугольники, круги и т. Д.), Наложения изображений и GeoJSON.

Вы можете взаимодействовать с картами Leaflet, перетаскивая карту, увеличивая масштаб (двойным щелчком или, прокручивая колесико), используя клавиатуру, используя обработку событий и перетаскивая маркеры.

Leaflet поддерживает такие браузеры, как Chrome, Firefox, Safari 5+, Opera 12+, IE 7–11 на рабочем столе и такие браузеры, как Safari, Android, Chrome, Firefox для мобильных устройств.

Действия по загрузке карты на веб-страницу

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

Шаг 1. Создайте HTML-страницу

Создайте базовую HTML-страницу с тегами head и body, как показано ниже —

<!DOCTYPE html>
<html>
   <head>
   </head>
   
   <body>
      ...........
   </body>
</html>

Шаг 2: Загрузите CSS-скрипт Leaflet

Включите CSS-скрипт Leaflet в пример —

<head>
   <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>

Шаг 3: Загрузите скрипт листовки

Загрузите или включите Leaflet API с помощью тега script —

<head>
   <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>

Шаг 4. Создайте контейнер

Чтобы удержать карту, мы должны создать элемент контейнера. Как правило, тег <div> (универсальный контейнер) используется для этой цели.

Создайте элемент контейнера и определите его размеры.

<div id = "sample" style = "width:900px; height:580px;"></div>

Шаг 5: Параметры карты

В брошюре предусмотрено несколько параметров, таких как параметры «Типы управления», «Параметры взаимодействия», «Параметры состояния карты», «Параметры анимации» и т. Д. Задавая их значения, мы можем настроить карту по своему усмотрению.

Создайте объект mapOptions (он создается как литерал) и установите значения для центра параметров и масштабирования, где

center — в качестве значения этой опции вам нужно передать объект LatLng, указывающий место, где мы хотим центрировать карту. (Просто укажите значения широты и долготы в фигурных скобках [] )
zoom — в качестве значения этой опции вам нужно передать целое число, представляющее уровень масштабирования карты, как показано ниже.

center — в качестве значения этой опции вам нужно передать объект LatLng, указывающий место, где мы хотим центрировать карту. (Просто укажите значения широты и долготы в фигурных скобках [] )

zoom — в качестве значения этой опции вам нужно передать целое число, представляющее уровень масштабирования карты, как показано ниже.

var mapOptions = {
   center: [17.385044, 78.486671],
   zoom: 10
}

Шаг 6: Создайте объект карты

Используя API-интерфейс листовки класса Map , вы можете создать карту на странице. Вы можете создать объект карты, создав экземпляр вызываемой Карты API Листовки. При создании экземпляра этого класса вам нужно передать два параметра:

В качестве параметра этой опции вам нужно передать переменную String, представляющую идентификатор DOM или экземпляр элемента <div>. Здесь элемент <div> является HTML-контейнером для хранения карты.
Необязательный литерал объекта с параметрами карты.

В качестве параметра этой опции вам нужно передать переменную String, представляющую идентификатор DOM или экземпляр элемента <div>. Здесь элемент <div> является HTML-контейнером для хранения карты.

Необязательный литерал объекта с параметрами карты.

Создайте объект Map, передав идентификатор элемента <div> и объект mapOptions, созданные на предыдущем шаге.

var map = new L.map('map', mapOptions);

Шаг 7: Создание объекта Layer

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

Создайте объект слоя плитки, как показано ниже.

var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

Здесь мы использовали openstreetmap .

Шаг 8: Добавить слой на карту

Наконец, добавьте слой, созданный на предыдущем шаге, к объекту карты, используя метод addlayer (), как показано ниже.

map.addLayer(layer);

пример

В следующем примере показано, как загрузить открытую карту улиц города Хайдарабад со значением масштаба 10.

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet sample</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>

   <body>
      <div id = "map" style = "width: 900px; height: 580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
         
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         
         // Adding layer to the map
         map.addLayer(layer);
      </script>
   </body>
   
</html>

Он генерирует следующий вывод —

Поставщики листовок

Как и в случае с открытой картой улиц , вы можете загружать слои различных поставщиков услуг, таких как Open Topo, Thunder Forest, Hydda, ESRI, Open weather, NASA GIBS и т. Д. Для этого вам нужно передать соответствующий URL при создании TileLayer. объект

var layer = new L.TileLayer('URL of the required map');

В следующей таблице перечислены URL-адреса и соответствующие им примеры карт слоев, предоставляемых Openstreetmap.

HTTP: // {s} .tile.openstreetmap.org / {г} / {х} / {у} .png

HTTP: // {s} .tiles.wmflabs.org / мт-Mapnik / {г} / {х} / {у} .png

http: // {s} .tile.openstreetmap.de /iles / osmde / {z} / {x} / {y} .png

HTTP: // {s} .tile.openstreetmap.fr / osmfr / {г} / {х} / {у} .png

HTTP: // {s} .tile.openstreetmap.fr / горячей / {г} / {х} / {у} .png

http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png

LeafletJS — Начало работы