Geolokalisierung und Karten in TypeScript: Bibliotheken…

Geolokalisierung und Karten in TypeScript: vollständiger Überblick über Werkzeuge

Moderne Webanwendungen erfordern zunehmend die Integration von Geodaten und interaktiven Karten. TypeScript, als streng typisierte Erweiterung von JavaScript, bietet hervorragende Möglichkeiten für die Arbeit mit Geolokalisierung dank statischer Typisierung und Unterstützung moderner Standards. In diesem Artikel betrachten wir die wichtigsten Bibliotheken und Werkzeuge für die Arbeit mit Karten und Geodaten in TypeScript, ihre Besonderheiten und Anwendungsbeispiele.

1. Integrierte Geolocation API

Die browserbasierte Geolocation API ist ein grundlegendes Werkzeug zum Abrufen der Koordinaten des Benutzers. TypeScript fügt Typsicherheit bei der Arbeit mit dieser API hinzu.

// Typisierte Funktion zum Abrufen der Geopositioninterface PositionOptions {  enableHighAccuracy?: boolean;  timeout?: number;  maximumAge?: number;}

async function getCurrentPosition(  options?: PositionOptions): Promise<GeolocationPosition> {  return new Promise((resolve, reject) => {    navigator.geolocation.getCurrentPosition(      resolve,      reject,      options    );  });}

// Verwendung(async () => {  try {    const position = await getCurrentPosition({ timeout: 5000 });    const { latitude, longitude } = position.coords;    console.log(`Koordinaten: ${latitude}, ${longitude}`);  } catch (error) {    console.error('Fehler beim Abrufen der Position:', error);  }})();

2. Leaflet — leichtgewichtige Kartierungsbibliothek

Leaflet ist eine der beliebtesten Open-Source-Bibliotheken für interaktive Karten. Sie bietet eine hervorragende TypeScript-Unterstützung über das Paket @types/leaflet.

Installation und Einrichtung

npm install leafletnpm install --save-dev @types/leaflet

Beispiel einer Basiskarte

import L from 'leaflet';import 'leaflet/dist/leaflet.css';

class MapManager {  private map: L.Map;

  constructor(containerId: string, center: [number, number]) {    this.map = L.map(containerId).setView(center, 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {      attribution: '© OpenStreetMap contributors'    }).addTo(this.map);  }

  addMarker(lat: number, lng: number, title?: string): void {    const marker = L.marker([lat, lng]).addTo(this.map);    if (title) {      marker.bindPopup(`<b>${title}</b>`).openPopup();    }  }

  setView(center: [number, number], zoom?: number): void {    this.map.setView(center, zoom || 13);  }}

// Verwendungconst map = new MapManager('map', [55.751244, 37.618423]);map.addMarker(55.751244, 37.618423, 'Moskau');

3. Mapbox GL JS — professionelle Lösung

Mapbox bietet eine leistungsstarke Plattform mit Vektorkacheln und erweiterter Stilisierung. Das TypeScript SDK ist über das Paket mapbox-gl verfügbar.

import mapboxgl from 'mapbox-gl';import 'mapbox-gl/dist/mapbox-gl.css';

// Typisierung für die Konfigurationinterface MapConfig {  container: string;  style: string;  center: [number, number];  zoom: number;  accessToken: string;}

class MapboxMap {  private map: mapboxgl.Map;

  constructor(config: MapConfig) {    mapboxgl.accessToken = config.accessToken;    this.map = new mapboxgl.Map(config);  }

  addGeoJSONLayer(data: GeoJSON.FeatureCollection): void {    this.map.addSource('geojson-data', {      type: 'geojson',      data    });

    this.map.addLayer({      id: 'geojson-layer',      type: 'circle',      source: 'geojson-data',      paint: {        'circle-radius': 6,        'circle-color': '#007cbf'      }    });  }}

// Beispiel zur Verwendungconst mapboxMap = new MapboxMap({  container: 'map',  style: 'mapbox://styles/mapbox/streets-v12',  center: [37.618423, 55.751244],  zoom: 10,  accessToken: process.env.MAPBOX_TOKEN || ''});