自定义投影上的 Proj4Leaflet 原点

Question

我已经使用神奇的 Proj4Leaflet plugin. Within my map I'm using a custom reference system (EPSG:28533). The map tiles (WMTSCapabilities) are fetched and rendered. But I have encountered that the tiles are transformed to the wrong location. The offset is approximately +9° lat and +7° lng. I expect, that I've set the wrong origin within the definition of the reference system (fiddle) 设置了传单地图。

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？

Answer 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);
});

自定义投影上的 Proj4Leaflet 原点

Proj4Leaflet orign on custom projection

javascript

leaflet

gis

proj4js