Геолокация и карты в TypeScript: библиотеки и инструменты для веб-приложений

Геолокация и карты в TypeScript: полный обзор инструментов

Современные веб-приложения всё чаще требуют интеграции географических данных и интерактивных карт. TypeScript, как строго типизированное расширение JavaScript, предоставляет отличные возможности для работы с геолокацией благодаря статической типизации и поддержке современных стандартов. В этой статье мы рассмотрим ключевые библиотеки и инструменты для работы с картами и геоданными на TypeScript, их особенности и примеры использования.

1. Встроенная Geolocation API

Браузерная Geolocation API — базовый инструмент для получения координат пользователя. TypeScript добавляет типовую безопасность при работе с этим API.

// Типизированная функция получения геопозиции
interface 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
    );
  });
}

// Использование
(async () => {
  try {
    const position = await getCurrentPosition({ timeout: 5000 });
    const { latitude, longitude } = position.coords;
    console.log(`Координаты: ${latitude}, ${longitude}`);
  } catch (error) {
    console.error('Ошибка получения позиции:', error);
  }
})();

2. Leaflet — легковесная картографическая библиотека

Leaflet — одна из самых популярных open-source библиотек для интерактивных карт. Она имеет отличную поддержку TypeScript через пакет @types/leaflet.

Установка и настройка

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

Пример базовой карты

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

// Использование
const map = new MapManager('map', [55.751244, 37.618423]);
map.addMarker(55.751244, 37.618423, 'Москва');

3. Mapbox GL JS — профессиональное решение

Mapbox предлагает мощную платформу с векторными тайлами и продвинутой стилизацией. TypeScript SDK доступен через пакет mapbox-gl.

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

// Типизация для конфигурации
interface 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'
      }
    });
  }
}

// Пример использования
const mapboxMap = new MapboxMap({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [37.618423, 55.751244],
  zoom: 10,
  accessToken: process.env.MAPBOX_TOKEN || ''
});

4. OpenLayers — гибкая open-source альтернатива

OpenLayers предоставляет богатый функционал для работы с различными источниками данных и форматами (WMS, WMTS, GeoJSON).

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';

// Создание карты с TypeScript
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: fromLonLat([37.618423, 55.751244]),
    zoom: 10
  })
});

// Функция для добавления маркера с типизацией
interface MarkerOptions {
  coordinates: [number