Proj4Leaflet 自定义投影答案

【问题标题】：Proj4Leaflet orign on custom projectionProj4Leaflet 自定义投影
【发布时间】：2016-02-18 09:00:31
【问题描述】：

我已经使用出色的 Proj4Leaflet 插件设置了传单地图。在我的地图中，我使用了自定义参考系统 (EPSG:28533)。地图瓦片 (WMTSCapabilities) 被提取和渲染。但是我遇到了瓷砖被转换到错误的位置。偏移量约为 +9° lat 和 +7° lng。我希望，我在参考系统 (fiddle) 的定义中设置了错误的origin。

var rs25832 = new L.Proj.CRS(
    'EPSG:25832',
    '+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs', {
        origin: [
            // I suppose the error is here!
            265948.8191,
            7288831.7014
        ],
        resolutions: [
            // TileMatrixScaleDenominator * OGC_PixelWidth
            17471320.7509   * 0.00028,
            8735660.37545   * 0.00028,
            4367830.18772   * 0.00028,
            2183915.09386   * 0.00028,
            1091957.54693   * 0.00028,
            545978.773466   * 0.00028,
            272989.386733   * 0.00028,
            136494.693366   * 0.00028,
            68247.3466832   * 0.00028,
            34123.6733416   * 0.00028,
            17061.8366708   * 0.00028,
            8530.9183354    * 0.00028,
            4265.4591677    * 0.00028,
            2132.72958385   * 0.00028
        ]
    }
);

var url = 'http://sg.geodatenzentrum.de/wmts_webatlasde/tile/1.0.0/webatlasde/default/DE_EPSG_25832_ADV/{z}/{y}/{x}.png';      
var layer = L.tileLayer(url, {
        maxZoom: rs25832.options.resolutions.length,
        continuousWorld: true
    }
);

var map = L.map('map', {
    crs: rs25832,
    center: [ 50.5881112, 7.2676084 ],
    zoom: 0,
    maxZoom: rs25832.options.resolutions.length,
    layers: [ layer ]
});

map.on('click', function(e) {
    alert('lat: ' + e.latlng.lat + ' lng: ' + e.latlng.lng)
});

据我了解，origin 设置定义了参考系统投影边界的左上角。根据spatialreference.org 定义，这个特定参考系统的边界是：

265948.8191, 6421521.2254, 677786.3629, 7288831.7014

我是否使用错误的方法来确定 CRS origin？

【问题讨论】：

您的地图图块（例如 sg.geodatenzentrum.de/wmts_webatlasde/tile/1.0.0/webatlasde/… ）返回 NOACCESS_METHOD GetTile 错误，这意味着我们无法正确看到您的 codepen。
如果我弄错了，请纠正我，但我想这是因为服务器无法为此扩展提供图块。 0/1/0超出了服务器的最大怒气。
我看到的唯一解决方案是设置图层的边界。但由于偏移，这将导致瓷砖完全不可见。

标签： javascript leaflet gis proj4js

【解决方案1】：

我已经解决了这个问题！正如预期的那样，问题是origin 属性的分层方法。我认为参考系统的origin 应该等于参考系统投影边界的左上角。但是我错了。正确的做法是使用图层左上角的 BBox。基于服务器的 WMTSCapabilities，我能够使用 proj4js 计算预计的origin。这是我更新的代码（fiddle）：

// Proj4js EPSG:25832 definition
var proj4rs25832def = '+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs';

// Calc origin
var orign = proj4(
    proj4rs25832def,
    // Upper left corner of the tile orign based on the WMTSCapabilities layer BBox
    [ 0.105946948013, 56.8478734515 ]
);

// Set resolutions
var resolutions = [ 17471320.7509, 8735660.37545, 4367830.18772, 2183915.09386, 1091957.54693, 545978.773466, 272989.386733, 136494.693366, 68247.3466832, 34123.6733416, 17061.8366708, 8530.9183354, 4265.4591677, 2132.72958385 ];

// Define CRS
var rs25832 = new L.Proj.CRS(
    'EPSG:25832',
    proj4rs25832def, 
    {
        origin: [ orign[0], orign[1] ],
        resolutions: resolutions.map(function (value) {
            return value * 0.00028;
        })
    }
);

// Create layer
var url = 'http://sg.geodatenzentrum.de/wmts_webatlasde/tile/1.0.0/webatlasde/default/DE_EPSG_25832_ADV/{z}/{y}/{x}.png';      
var layer = L.tileLayer(
    url, 
    {
        continuousWorld: true,
        bounds: [[ 45.2375, 0.1059 ],[ 56.8478, 20.4488 ]],
        maxZoom: resolutions.length
    }
);

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

// Setup click hander
map.on('click', function(e) {
  alert('lat: ' + e.latlng.lat + ' lng: ' + e.latlng.lng);
  console.log(e.latlng);
});

【讨论】：