TypeScript 中的地理定位与地图：库与实战示例

TypeScript 中的地理定位与地图：工具概述与代码示例

现代 Web 应用越来越频繁地需要处理地理数据：从简单的用户位置显示到复杂的路线规划和聚类。TypeScript 凭借其严格的类型化，使此类功能的开发更加可靠和便捷。本文将介绍流行的地图和地理定位库，展示与 TypeScript 集成的示例，并提供实用建议。

1. 浏览器中的地理定位基础

在接入地图之前，需要获取用户的坐标。内置的地理定位 API (navigator.geolocation) 在 TypeScript 中具有良好的类型化支持。

interface Position {  latitude: number;  longitude: number;  accuracy?: number;}

function getCurrentPosition(): Promise<Position> {  return new Promise((resolve, reject) => {    navigator.geolocation.getCurrentPosition(      (pos) => {        resolve({          latitude: pos.coords.latitude,          longitude: pos.coords.longitude,          accuracy: pos.coords.accuracy        });      },      (error) => reject(error)    );  });}

// 使用getCurrentPosition()  .then((pos) => console.log(`纬度: ${pos.latitude}, 经度: ${pos.longitude}`))  .catch((err) => console.error('地理定位错误:', err));

2. Leaflet — 轻量且流行的库

Leaflet 是用于显示地图的最简单、最快速的库之一。TypeScript 有对应的 @types/leaflet 包。

安装

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

示例：带标记的地图

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

// 类型化的初始化函数function initMap(containerId: string, coords: [number, number]): L.Map {  const map = L.map(containerId).setView(coords, 13);

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

  L.marker(coords)    .addTo(map)    .bindPopup('您在这里！');

  return map;}

// 使用const map = initMap('map', [55.7558, 37.6173]); // 莫斯科

高级事件类型化

map.on('click', (e: L.LeafletMouseEvent) => {  const { lat, lng } = e.latlng;  console.log(`点击: ${lat}, ${lng}`);});

3. OpenLayers — 用于复杂任务的强大工具

OpenLayers 支持大量格式（GeoJSON、KML、WMS），适用于专业地理信息系统。类型随包一起提供。

安装

npm install ol

示例：带标记和弹出提示的地图

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';import VectorLayer from 'ol/layer/Vector';import VectorSource from 'ol/source/Vector';import Style from 'ol/style/Style';import Icon from 'ol/style/Icon';import Overlay from 'ol/Overlay';

function createMap(containerId: string, lon: number, lat: number): void {  const container = document.getElementById(containerId) as HTMLElement;

  // 创建标记  const marker = new Feature({    geometry: new Point(fromLonLat([lon, lat]))  });

  marker.setStyle(new Style({    image: new Icon({      anchor: [0.5, 1],      src: 'https://openlayers.org/en/latest/examples/data/icon.png'    })  }));

  // 矢量图层  const vectorLayer = new VectorLayer({    source: new VectorSource({      features: [marker]    })  });

  // 地图  const map = new Map({    target: container,    layers: [