leafletPierwsze kroki z ulotką


Uwagi

Logo ulotki

Ulotka jest biblioteką JavaScript typu open source do tworzenia interaktywnych map.

Wersje

Wersja Data wydania
1.0.3 23.01.2017
1.0.2 21.11.2016
1.0.1 30.09.2016
1.0 27.09.2016
0,7 18.11.2013
0,6 26.06.2013
0,5 17.01.2013
0,4 2012-07-30
0,3 13.02.2012
0.2 2011-06-17
0,1 2011-05-16

Implementacja Leaflet.js z HTML i JavaScript

Aby użyć Ulotki, załaduj jej arkusz stylów i plik JavaScript na swoją stronę:

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

Te zasoby można pobrać z różnych lokalizacji, takich jak strona główna Leaflet lub repozytorium Leaflet Github , lub można bezpośrednio użyć CDN jako,

<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>
 

Potrzebujesz pojemnika na mapę. Programiści często używają do tego div z identyfikatorem „map”. Upewnij się, aby dać mapa div wysokość oraz czy mapa nie może pokazać się.

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

Inicjowanie mapy odbywa się poprzez utworzenie obiektu mapy za pomocą metody Leaflet.map(mapContainerId) . W poniższym przykładzie szerokość i długość geograficzna są ustawione domyślnie z domyślnym poziomem powiększenia 13.

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

Spowoduje to utworzenie naszej pustej mapy. Powinniśmy teraz udostępnić warstwę kafelków, która będzie działać jako nasza mapa podstawowa. Warstwa warstwowa to usługa, która zapewnia obrazy map w kafelkach, małe obrazy, do których dostęp mają parametry x, y i z w określonej kolejności (patrz poniżej).

Adres URL warstwy kafelków może wyglądać następująco, gdzie {s} , {z} , {x} i {y} są symbolami zastępczymi, które Ulotka automatycznie zmieni podczas pracy:

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

Możemy teraz dodać naszą warstwę warstwową wraz z informacjami o atrybucji i maksymalnym możliwym poziomie powiększenia oraz dodać ją do mapy:

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);
 

Uwaga: Inicjalizacja mapy i ładowanie warstwy kafelków musi nastąpić po dołączeniu leaflet.js i elementu div kontenera mapy.

Ulotka Szybki start

<!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>