leafletErste Schritte mit der Broschüre


Bemerkungen

Merkblatt Logo

Leaflet ist eine Open-Source-JavaScript-Bibliothek zum Erstellen interaktiver Karten.

Versionen

Ausführung Veröffentlichungsdatum
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

Implementierung von Leaflet.js mit HTML und JavaScript

Laden Sie zur Verwendung des Merkblatts das Stylesheet und die JavaScript-Datei auf Ihre Seite:

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

Diese Ressourcen können von verschiedenen Standorten heruntergeladen werden, z. B. von der Leaflet-Homepage oder dem Leaflet-Github-Repository , oder Sie können CDN direkt als

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

Sie benötigen einen Container für Ihre Karte. Für Entwickler ist es üblich, hierfür ein div mit einer id von "map" zu verwenden. Stellen Sie sicher , dass Ihre Karte geben div eine Höhe als auch oder die Karte unter Umständen nicht angezeigt.

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

Das Initialisieren der Karte erfolgt durch Erstellen eines Kartenobjekts mit der Leaflet.map(mapContainerId) Methode Leaflet.map(mapContainerId) . Im folgenden Beispiel werden Breitengrad und Längengrad als Standardeinstellung mit einer Standardzoomstufe von 13 festgelegt.

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

Dadurch wird unsere leere Map erstellt. Wir sollten jetzt eine Kachelebene als Basiskarte bereitstellen. Ein Tilelayer ist ein Dienst, der Kartenbilder in Kacheln bereitstellt, kleine Bilder, auf die mit den Parametern x, y und z in einer bestimmten Reihenfolge zugegriffen wird (siehe unten).

Eine Kachelebenen-URL könnte wie folgt aussehen: {s} , {z} , {x} und {y} sind Platzhalter, die das Merkblatt während des Betriebs automatisch ändert:

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

Wir können nun unseren Tilelayer zusammen mit den Attributionsinformationen und der maximal möglichen Zoomstufe hinzufügen und der Karte hinzufügen:

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

Hinweis: Die leaflet.js und das Laden des Kachel-Layers müssen nach dem leaflet.js von leaflet.js und dem div Element des Map-Containers erfolgen.

Broschüre Schnellstart

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