Leaflet加载OSM底图与EPSG:27700叠加层遇投影错误求助

核心结论 #

• Leaflet不支持单个地图实例动态切换CRS，地图的CRS在初始化时就已确定，无法中途更改。
• 若要同时展示不同CRS的图层，有两种可行方案：
  1. 使用L.Proj.TileLayer（而非普通L.tileLayer）加载非地图原生CRS的瓦片，让Proj4Leaflet自动完成投影转换
  2. 创建两个独立的地图div，通过监听事件实现视图同步

你的代码问题分析 #

当前投影错误的原因是：直接用普通L.tileLayer加载EPSG:27700的瓦片，但地图本身采用EPSG:3857坐标系，Leaflet不会自动做跨CRS的投影转换，导致瓦片位置偏移。

修正方案一：用Proj4Leaflet加载跨CRS瓦片 #

修改osLayer的定义，使用L.Proj.TileLayer并指定对应的CRS，Leaflet会自动将EPSG:27700的瓦片投影转换到地图的EPSG:3857坐标系：

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Map with EPSG:27700 Overlay</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.2/proj4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 600px;"></div>
<script>
    // 初始化地图为EPSG:3857
    var map = L.map('map').setView([51.505, -0.09], 10);

    // 添加OSM底图（EPSG:3857）
    var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    // 定义EPSG:27700投影
    proj4.defs("EPSG:27700", "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs");

    // 创建EPSG:27700的CRS对象
    var crs27700 = new L.Proj.CRS('EPSG:27700',
        proj4.defs("EPSG:27700"),
        {
            resolutions: [896, 448, 224, 112, 56, 28, 14, 7, 3.5, 1.75],
            origin: [-238375.0, 1376256.0],
            bounds: L.bounds([0, 0], [700000, 1300000])
        }
    );

    // 关键：用L.Proj.TileLayer加载EPSG:27700瓦片，指定对应的CRS
    var osLayer = new L.Proj.TileLayer(
        'https://api.os.uk/maps/raster/v1/zxy/Leisure_27700/{z}/{x}/{y}.png?key=API_KEY',
        {
            attribution: '&copy; Ordnance Survey',
            tms: true,
            continuousWorld: true,
            crs: crs27700 // 指定瓦片的CRS
        }
    );

    // 图层控制器
    var baseMaps = {
        "OpenStreetMap (EPSG:3857)": osmLayer
    };

    var overlayMaps = {
        "Ordnance Survey (EPSG:27700)": osLayer
    };

    L.control.layers(baseMaps, overlayMaps).addTo(map);

    // 瓦片加载状态监听
    osLayer.on('tileload', function() {
        console.log('OS Layer loaded');
    });

    osLayer.on('tileerror', function(error) {
        console.log('Error loading OS Layer: ', error);
    });

    osLayer.addTo(map);
</script>
</body>
</html>

方案二：双地图同步 #

如果需要原生CRS下的最佳性能（避免投影转换开销），可以创建两个地图div，分别使用EPSG:3857和EPSG:27700，然后通过事件监听同步视图：

1. 页面添加两个地图容器：

<div id="map3857" style="width: 50%; height: 600px; float: left;"></div>
<div id="map27700" style="width: 50%; height: 600px; float: left;"></div>

2. 初始化两个地图并添加对应图层，实现视图同步：

// 初始化EPSG:3857地图
var map3857 = L.map('map3857').setView([51.505, -0.09], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap contributors'
}).addTo(map3857);

// 初始化EPSG:27700地图
var map27700 = L.map('map27700', {
    crs: crs27700,
    center: [51.505, -0.09], // Leaflet自动转换坐标到对应CRS格式
    zoom: 10
});
L.tileLayer('https://api.os.uk/maps/raster/v1/zxy/Leisure_27700/{z}/{x}/{y}.png?key=API_KEY', {
    attribution: '© Ordnance Survey',
    tms: true
}).addTo(map27700);

// 同步视图：监听地图移动事件，更新另一地图的视图
map3857.on('moveend', function() {
    var center = map3857.getCenter();
    var zoom = map3857.getZoom();
    map27700.setView(center, zoom);
});

map27700.on('moveend', function() {
    var center = map27700.getCenter();
    var zoom = map27700.getZoom();
    map3857.setView(center, zoom);
});

注意事项 #

• 使用L.Proj.TileLayer时，需确保瓦片的resolutions、origin、bounds参数与瓦片服务规格完全匹配，否则会出现偏移或瓦片加载错误。
• 双地图同步时，Leaflet会自动处理不同CRS之间的坐标转换，无需手动计算。

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