使用 EPSG:25832 投影在 Leaflet 中垂直对齐 TMS 图块

我使用 Leaflet 和 Proj4Leaflet 来处理 25832 中的图块。该应用程序相当简单：我尝试将 EPSG:25832 中的图块叠加到全比例底图上。我已从瓷砖地图元信息中复制了各个分辨率和来源。我面临的问题是地图未对齐，一旦我放大，图块就不会按正确的顺序放置。我很感激这里的任何形式的支持（顺便说一下，this https://www.bmvi.de/DE/Themen/Digitales/Breitbandausbau/Breitbandatlas-Karte/start.html是一个使用 openlayers 的工作示例）。

我想我在这里做错了什么：

// Set resolutions
var resolutions = [156367.7919628329,78183.89598141646,39091.94799070823,19545.973995354114,9772.986997677057,4886.4934988385285,2443.2467494192642,1221.6233747096321,610.8116873548161,305.40584367740803,152.70292183870401,76.35146091935201,38.175730459676004,19.087865229838002,9.543932614919001,4.7719663074595005,2.3859831537297502,1.1929915768648751];

// Define CRS
var rs25832 = new L.Proj.CRS(
    'EPSG:25832',
    proj4rs25832def, 
    {
        origin: [ 273211.2532533697, 6111822.37943825 ],
        resolutions: resolutions
    }
);

...使用来自的瓷砖信息https://mapproxy.bba.atenekom.eu/tms/1.0.0/privat_alle_50_mbit/germany https://mapproxy.bba.atenekom.eu/tms/1.0.0/privat_alle_50_mbit/germany .

然后我添加一个平铺层

var url = 'https://mapproxy.bba.atenekom.eu/tms/1.0.0/privat_alle_50_mbit/germany/{z}/{x}/{y}.png';  

var tileLayer = L.tileLayer(
    url, 
    {
        tms: true,
        crs: rs25832,
        continuousWorld: true,
        maxZoom: resolutions.length
    }
);

并将它们添加到地图中..

// Setup map
var map = L.map('map', {
    crs: rs25832,
    center: [ 50.8805, 7.3389 ],
    zoom:5,
    maxZoom: resolutions.length,
    layers: [ baseWms, tileLayer ]
});

最少的代码可以在这里找到：https://jsfiddle.net/6gcam7w5/8/ https://jsfiddle.net/6gcam7w5/8/

这归结为 Y 坐标如何TMS https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification瓷砖是倒置的（向北时它会变得更高，而不是默认的TileLayers，其中Y坐标向南变大）。

看看处理此特定功能的传单代码 https://github.com/Leaflet/Leaflet/blob/master/src/layer/tile/TileLayer.js#L177-L183将阐明这个问题：

    if (this._map && !this._map.options.crs.infinite) {
        var invertedY = this._globalTileRange.max.y - coords.y;
        if (this.options.tms) {
            data['y'] = invertedY;
        }
        data['-y'] = invertedY;
    }

这里有两件事对于计算图块的正确 Y 坐标至关重要：

• CRS 必须是有限的（它必须有界限）
• 必须有一个有限的全局图块范围（在 Leaflet 中是最终定义 https://github.com/Leaflet/Leaflet/blob/e8c28b996179373447dde1df479898576a508579/src/layer/tile/GridLayer.js#L609受 CRS 限制，而不是TileLayer bounds)

长话短说，您的 CRS 应该以已知的界限来定义。对于这种特殊情况，从TMS 能力文档 https://mapproxy.bba.atenekom.eu/tms/1.0.0/privat_alle_50_mbit/germany...

<BoundingBox minx="273211.2532533697" miny="5200000.0" maxx="961083.6232988155" maxy="6111822.37943825"/>

……然后变成了L.Bounds定义Leaflet CRS时的定义，例如...

// Define CRS
var rs25832 = new L.Proj.CRS(
    'EPSG:25832',
    proj4rs25832def, 
    {
        origin: [ 273211.2532533697, 6111822.37943825 ],
        resolutions: resolutions,
        bounds: [[273211.2532533697, 5200000],[961083.6232988155, 6111822.37943825]]
    }
);

东西应该可以正常工作（不需要将 CRS 传递给tilelayers，因为它们都会使用地图），如下所示工作示例 https://jsfiddle.net/qzLhax5r/.