Zeichnen auf Leaflet Karten mit Angular und Geoman.io

Mit GeoMan.io und ngx-leaflet können Sie in Ihrer Angular-Anwendung eine interaktive Karte erstellen und Zeichenfunktionalitäten hinzufügen. Dies ermöglicht es den Benutzern, Linien, Polygone und weitere Geometrien auf der Karte zu zeichnen. Hier ist eine Schritt-für-Schritt-Anleitung, wie Sie GeoMan.io und ngx-leaflet kombinieren können:

Schritt 1: Projekt einrichten

Stellen Sie sicher, dass Sie ein Angular-Projekt eingerichtet haben. Falls nicht, installieren Sie Angular CLI global mit: npm install -g @angular/cli.

Schritt 2: ngx-leaflet und Geoman.io installieren

So fügen Sie ngx-leaflet und Geoman.io Ihrem Projekt hinzu:

1npm install ngx-leaflet leaflet @geoman-io/leaflet-geoman-free

Schritt 3: Kartenkomponente erstellen

Erstellen Sie eine Kartenkomponente, in der Sie die Karte und die Zeichenfunktionalität einbinden können. Hier können Sie das onMapReady-Ereignis nutzen, um die Zeichenfunktionalität zu aktivieren.

1import { Component, OnInit } from '@angular/core';
2import * as L from 'leaflet';
3import 'leaflet-geoman-free';
4
5@Component({
6  selector: 'app-map',
7  template: '<div id="map"></div>',
8  styleUrls: ['./map.component.css']
9})
10export class MapComponent {
11
12  onMapReady(map: L.Map) {
13    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
14    
15    // Activate the drawing functionality of Geoman.io
16    map.pm.addControls();
17  }
18}

Schritt 4: Kartenkomponente verwenden

Verwenden Sie die onMapReady - Ereignisfunktion einfach im HTLM-Template der Kartenkomponente:

1<div id="map" leaflet [leafletOptions]="options" (leafletMapReady)="onMapReady($event)"></div>

Schritt 5: Kartenoptionen konfigurieren

Sie können die Kartenoptionen nach Ihren Bedürfnissen anpassen. So können Sie das Aussehen und die Anfangsansicht Ihrer Karte festlegen:

1options = {
2  layers: [
3    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
4      maxZoom: 19,
5      attribution: 'OpenStreetMap'
6    })
7  ],
8  zoom: 13,
9  center: L.latLng(51.505, -0.09)
10};

Schritt 6: Styling anpassen

Durch Anpassung der CSS-Klassen für die Kartenkomponente können Sie sie nach Belieben gestalten.

Mit dieser Anleitung können Sie Geoman.io und ngx-leaflet nutzen, um eine interaktive Zeichenkarte in Ihrer Angular-Anwendung zu erstellen. Vergessen Sie nicht, die Dokumentationen von ngx-leaflet und Geoman.io für detailliertere Informationen zu konsultieren und Ihre eigens entwickelte Webanwendung nach Ihren Anforderungen anzupassen.