Геолокация и карты в TypeScript: библиотеки, API и примеры кода

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

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

1. Получение геолокации: Navigator Geolocation API

Встроенный API браузера navigator.geolocation — это основа для получения координат пользователя. TypeScript предоставляет типы для этого API, что делает работу безопасной и удобной.

// Типизированная функция для получения текущей позиции
function getCurrentPosition(): Promise<GeolocationPosition> {
    return new Promise((resolve, reject) => {
        if (!navigator.geolocation) {
            reject(new Error('Геолокация не поддерживается браузером'));
            return;
        }
        
        navigator.geolocation.getCurrentPosition(
            (position: GeolocationPosition) => {
                resolve(position);
            },
            (error: GeolocationPositionError) => {
                reject(error);
            },
            {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 0
            }
        );
    });
}

// Пример использования
async function showUserLocation(): Promise<void> {
    try {
        const position = await getCurrentPosition();
        const { latitude, longitude } = position.coords;
        console.log(`Широта: ${latitude}, Долгота: ${longitude}`);
    } catch (error) {
        console.error('Ошибка получения геолокации:', error);
    }
}

2. Отображение карт: сравнение популярных библиотек

Для работы с картами в TypeScript доступно несколько мощных библиотек. Рассмотрим три наиболее популярных варианта.

2.1 Leaflet с TypeScript

Leaflet — лёгкая, open-source библиотека для интерактивных карт. Она имеет официальные типы (@types/leaflet), что обеспечивает полную поддержку TypeScript.

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

// Создание карты с типизацией
const map: L.Map = L.map('map', {
    center: [55.751244, 37.618423], // Москва
    zoom: 10,
    zoomControl: true
});

// Добавление тайлов OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

// Маркер с типизированными опциями
const marker: L.Marker = L.marker([55.751244, 37.618423], {
    draggable: true,
    title: 'Москва'
}).addTo(map);

// Обработка события с типизацией
marker.on('dragend', (event: L.LeafletMouseEvent) => {
    const coords: L.LatLng = event.target.getLatLng();
    console.log(`Новые координаты: ${coords.lat}, ${coords.lng}`);
});

2.2 Mapbox GL JS

Mapbox предлагает высокопроизводительные векторные карты с богатыми возможностями стилизации. TypeScript SDK доступен через mapbox-gl.

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

// Установка токена доступа
mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';

// Создание карты с типизированными параметрами
const map: mapboxgl.Map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v11',
    center: [37.618423, 55.751244],
    zoom: 12,
    pitch: 45 // наклон карты
});

// Добавление маркера с пользовательским HTML
const marker: mapboxgl.Marker = new mapboxgl.Marker({
    color: '#FF0000',
    draggable: true,
    rotation: 45
})
    .setLngLat([37.618423, 55.751244])
    .setPopup(new mapboxgl.Popup().setHTML('<h3>Москва</h3>'))
    .addTo(map);

// Событие при перемещении маркера
marker.on('dragend', () => {
    const lngLat: mapboxgl.LngLat = marker.getLngLat();
    console.log(`Долгота: ${lngLat.lng}, Широта: ${lngLat.lat}`);
});

2.3 OpenLayers

OpenLayers — мощная библиотека для сложных геопространственных приложений. Поддерживает множество форматов данных и проекций.

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';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point