使用 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 传递给 tilelayers，因为它们都会使用地图），如此 working example。

使用 EPSG:25832 投影在 Leaflet 中垂直对齐 TMS 磁贴

Vertical alignment of TMS tiles in Leaflet using EPSG:25832 projection

javascript

gis

proj4js

leaflet