如何将基于EPSG:27700的Leaflet地图重构为React-Leaflet

问题背景 #

已有可运行的原生Leaflet代码，通过Proj4实现EPSG:27700（英国国家网格）坐标转换，加载Ordnance Survey（OS）的Leisure_27700切片图层，并集成了路由控件。需要将该地图重构为React-Leaflet实现，核心难点是在React环境中集成投影转换逻辑。

解决方案步骤 #

1. 安装必要依赖 #

首先安装Leaflet投影、坐标转换及React-Leaflet相关包：

npm install leaflet proj4 leaflet-proj react-leaflet
# 或使用yarn
yarn add leaflet proj4 leaflet-proj react-leaflet

2. 重构Map.js组件 #

替换原有src/Map.js内容，集成投影配置、坐标转换、OS切片图层及路由控件：

import React, { useEffect } from 'react';
import { MapContainer, TileLayer, useMap } from 'react-leaflet';
import L from 'leaflet';
import proj4 from 'proj4';
import 'leaflet-proj'; // 导入leaflet-proj扩展
import 'leaflet/dist/leaflet.css';
import 'leaflet-routing-machine/dist/leaflet-routing-machine.css'; // 路由控件样式
import 'leaflet-routing-machine'; // 导入路由控件

// OS MAPS API KEY
const apiKey = 'MY API KEY';

// 配置EPSG:27700投影
const crs = new L.Proj.CRS('EPSG:27700', 
  '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs',
  {
    resolutions: [896.0, 448.0, 224.0, 112.0, 56.0, 28.0, 14.0, 7.0, 3.5, 1.75],
    origin: [-238375.0, 1376256.0]
  }
);

// 坐标转换函数：EPSG:27700 → EPSG:4326
const transformCoords = (arr) => {
  return proj4('EPSG:27700', 'EPSG:4326', arr).reverse();
};

// 自定义路由控件组件
const RoutingControl = () => {
  const map = useMap();

  useEffect(() => {
    if (!map) return;

    // 创建路由控件
    const routingControl = L.Routing.control({
      show: false,
      createMarker: () => null,
      waypoints: [
        L.latLng(51.150572381981256, -1.8110790497172475),
        L.latLng(51.09703864177901, -1.7331746181837577)
      ]
    }).addTo(map);

    // 清理函数：组件卸载时移除控件
    return () => {
      map.removeControl(routingControl);
    };
  }, [map]);

  return null; // 无需渲染DOM元素
};

const Map = () => {
  const initialPosition = [51.178839, -1.82593];
  const maxBounds = [
    transformCoords([-238375.0, 0.0]),
    transformCoords([900000.0, 1376256.0])
  ];

  return (
    <MapContainer
      center={initialPosition}
      zoom={8}
      minZoom={0}
      maxZoom={9}
      crs={crs}
      maxBounds={maxBounds}
      attributionControl={false}
      style={{ height: '100vh', width: '100%' }}
    >
      {/* OS Leisure_27700切片图层 */}
      <TileLayer
        url={`https://api.os.uk/maps/raster/v1/zxy/Leisure_27700/{z}/{x}/{y}.png?key=${apiKey}`}
      />
      {/* 路由控件 */}
      <RoutingControl />
    </MapContainer>
  );
};

export default Map;

关键细节说明 #

• 投影配置：直接复用原生Leaflet的EPSG:27700配置，通过leaflet-proj扩展创建CRS实例，传给MapContainer的crs属性，确保地图使用正确的投影系统。
• 坐标转换：保留原生的transformCoords函数，用于将EPSG:27700坐标转换为Leaflet默认的EPSG:4326（WGS84）坐标，适配maxBounds等需要经纬度的配置项。
• 路由控件集成：通过React-Leaflet的useMap钩子获取地图实例，在useEffect中初始化并添加路由控件，同时添加清理函数避免内存泄漏，符合React组件生命周期规范。

内容的提问来源于stack exchange，提问作者Berto