Anleitung zur Integration von Polygonen in Leaflet-Karten: Schritt-für-Schritt-Anleitung für Einsteiger
Das Hinzufügen eines Polygons zu einer Leaflet-Karte erfordert grundlegende Kenntnisse in HTML, JavaScript und der Leaflet-Bibliothek. Hier ist eine einfache Anleitung, wie du das machen kannst:
Schritt 1: Vorbereitung Stelle sicher, dass du die Leaflet-Bibliothek in deinem Projekt verwendest. Du kannst sie von der offiziellen Leaflet-Website herunterladen oder über einen CDN einbinden.
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="your-script.js"></script>
</body>
</html>Schritt 2: Erstelle das Kartenobjekt In deiner JavaScript-Datei (your-script.js oder wie auch immer du sie nennen möchtest), erstelle das Kartenobjekt und füge es zur HTML-Div hinzu:
// your-script.js
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);Stelle sicher, dass du die Koordinaten (Latitude und Longitude) in der setView-Methode anpasst, um die Karte auf den gewünschten Ort zu zentrieren.
Schritt 3: Füge das Polygon hinzu Füge das Polygon zur Karte hinzu, indem du die L.polygon-Funktion verwendest:
// your-script.js
const polygonPoints = [
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
];
const polygon = L.polygon(polygonPoints, { color: 'blue' }).addTo(map);Ersetze die polygonPoints-Array-Einträge durch die Koordinaten deines Polygons. Du kannst auch die Optionen wie Farbe, Füllung usw. nach deinen Wünschen anpassen.
Schritt 4: Zusätzliche Anpassungen (optional) Du kannst weitere Anpassungen vornehmen, um die Darstellung des Polygons und der Karte zu verbessern. Dies könnte die Hinzufügung von Popup-Informationen, Stilen und mehr umfassen.
// your-script.js
polygon.bindPopup('Dies ist ein Polygon.');
polygon.setStyle({
color: 'red',
fillColor: 'orange',
fillOpacity: 0.5
});Das war's! Wenn du nun deine HTML-Datei in einem Webbrowser öffnest, solltest du eine Leaflet-Karte mit dem hinzugefügten Polygon sehen. Denke daran, dass dies nur eine einfache Einführung ist. Du kannst die Funktionalität und das Erscheinungsbild weiter anpassen, je nach deinen Anforderungen.
Standort Hannover
newcubator GmbH
Bödekerstraße 22
30161 Hannover
Standort Dortmund
newcubator GmbH
Westenhellweg 85-89
44137 Dortmund