3

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

不正确的对齐

4

1 回答 1

3

这归结为TMS瓦片的 Y 坐标如何反转(向北时它变得更高,而不是默认TileLayers,在向南时 Y 坐标变得更大)。

查看处理此特定功能的 Leaflet 代码将对问题有所了解:

    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 边界而不是TileLayer边界定义)

长话短说,你的 CRS 应该用已知的界限来定义。对于这种特殊情况,从TMS 功能文档中获取信息......

<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,因为它们都将使用地图),就像在这个工作示例中一样。

于 2020-06-28T16:42:33.487 回答