使用 EPSG:25832 投影在 Leaflet 中垂直对齐 TMS 瓷砖

Question

我正在使用带有 Proj4Leaflet 的 Leaflet 来处理 25832 中的图块。该应用程序非常简单：我正在尝试将 EPSG:25832 中的图块叠加到全尺寸底图上。我已经从 tilemap 元信息中复制了各个分辨率和来源。我面临的问题是地图没有对齐，一旦我放大图块，就没有按正确的顺序放置。我很感激这里的任何形式的支持（顺便说一下，this 是一个使用 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 的图块信息。

然后我添加一个平铺层

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/

Answer 1

这归结为 TMS 瓦片的 Y 坐标如何反转（向北时它会变高，而不是默认的 TileLayers，在向南时 Y 坐标会变大）。

查看Leaflet code that takes care of this specific feature 将会对这个问题有所了解：

    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 中，CRS 边界为 ultimately defined，而不是 TileLayer 边界）

长话短说，您的 CRS 应该用已知的界限来定义。对于这种特殊情况，从TMS capabilities document...获取信息...

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

...在定义 Leaflet CRS 时变成了L.Bounds 定义，比如...

// 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 传递给切片图层，因为它们都将使用地图），如 working example。