leafletНачало работы с брошюрой


замечания

Логотип листовки

Листовка - это библиотека JavaScript с открытым исходным кодом для создания интерактивных карт.

Версии

Версия Дата выхода
1.0.3 2017-01-23
1.0.2 2016-11-21
1.0.1 2016-09-30
1,0 2016-09-27
0.7 2013-11-18
0.6 2013-06-26
0,5 2013-01-17
0,4 2012-07-30
0,3 2012-02-13
0.2 2011-06-17
0,1 2011-05-16

Реализация Leaflet.js с HTML и JavaScript

Чтобы использовать Листовку, загрузите ее таблицу стилей и файл JavaScript на свою страницу:

<link rel="stylesheet" href="/css/leaflet.css" />
<script src="/js/leaflet.js"></script>
 

Эти ресурсы можно загружать из разных мест, таких как домашняя страница Leaflet или репозиторий Leaflet Github , или вы можете напрямую использовать CDN,

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" ></script>
 

Вам нужен контейнер для вашей карты. Разработчики обычно используют div с идентификатором «map» для этого. Удостоверьтесь, что ваша карта div тоже высока, или карта может не отображаться.

<div id="map" style="height: 200px;"></div>
 

Инициализация карты выполняется путем создания объекта карты с использованием Leaflet.map(mapContainerId) . В приведенном ниже примере широта и долгота установлены по умолчанию с уровнем масштабирования по умолчанию 13.

var map = L.map('map').setView([42.35, -71.08], 13);
 

Это создает нашу пустую карту, теперь мы должны предоставить слой плитки, чтобы действовать как наша базовая карта. Tilelayer - это служба, которая предоставляет изображения карт в виде плиток, небольшие изображения, к которым обращаются параметры x, y и z в определенном порядке (см. Ниже).

URL-адрес слоя плитки может выглядеть так, где {s} , {z} , {x} и {y} являются заполнителями, которые лифлет автоматически изменяет во время работы:

"http://{s}.domain.com/foo/{z}/{x}/{y}.png"
 

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

L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
  attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
  maxZoom: 17,
  minZoom: 5
}).addTo(map);
 

Примечание. Инициализация карты и загрузка слоя плитки должны возникать после включения leaflet.js и элемента div контейнера карты.

Быстрый старт листа

<!DOCTYPE html>
<html>

  <head>
    <title>My Leaflet Map</title>
    <link rel="stylesheet" href="//unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <style type="text/css">
      #map { 
        height: 500px; 
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script src="//unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>    
    <script>
      var map = L.map('map').setView([51.505, -0.09], 13);

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
      
      L.marker([51.5, -0.09]).addTo(map)
          .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
          .openPopup();
    </script>
  </body>

</html>