Geoman.io mit ngx-leaflet zur Kartenzeichnung integrieren

Mit GeoMan.io und ngx-leaflet kannst du in deiner 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 du GeoMan.io und ngx-leaflet kombinieren kannst:

Schritt 1: Projekt einrichten Stelle sicher, dass du ein Angular-Projekt eingerichtet hast. Falls nicht, installiere Angular CLI global mit npm install -g @angular/cli.

Schritt 2: ngx-leaflet und Geoman.io installieren Füge ngx-leaflet und GeoMan.io zu deinem Projekt hinzu:

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

Schritt 3: Kartenkomponente erstellen Erstelle eine Kartenkomponente, in der du die Karte und die Zeichenfunktionalität einbindest. Hier kannst du das onMapReady-Ereignis nutzen, um die Zeichenfunktionalität zu aktivieren.

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
import 'leaflet-geoman-free';

@Component({
  selector: 'app-map',
  template: '<div id="map"></div>',
  styleUrls: ['./map.component.css']
})
export class MapComponent {

  onMapReady(map: L.Map) {
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    
    // Aktiviere die Zeichenfunktionalität von GeoMan.io
    map.pm.addControls();
  }
}

Schritt 4: Kartenkomponente verwenden Verwende die onMapReady-Ereignisfunktion im HTML-Template der Kartenkomponente:

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

Schritt 5: Kartenoptionen konfigurieren Passe die Kartenoptionen nach deinen Bedürfnissen an. Hier kannst du das Aussehen und die Anfangsansicht deiner Karte festlegen:

options = {
  layers: [
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: 'OpenStreetMap'
    })
  ],
  zoom: 13,
  center: L.latLng(51.505, -0.09)
};

Schritt 6: Styling anpassen Gestalte deine Karte durch Anpassung der CSS-Klassen für die Kartenkomponente.

Mit dieser Anleitung kannst du Geoman.io und ngx-leaflet nutzen, um eine interaktive Zeichenkarte in deiner Angular-Anwendung zu erstellen. Vergiss nicht, die Dokumentationen von ngx-leaflet und Geoman.io für detailliertere Informationen zu konsultieren und deine Anwendung nach deinen Anforderungen anzupassen.