問題描述
我正在使用帶有 Proj4Leaflet 的 Leaflet 來處理 25832 中的圖塊.該應用程序非常簡單:我正在嘗試將 EPSG:25832 中的圖塊疊加到全尺寸底圖上.我已經從 tilemap 元信息中復制了各個分辨率和來源.我面臨的問題是地圖沒有對齊，一旦我放大圖塊，就沒有按正確的順序放置.我很感激這里的任何支持(順便說一下，
這歸結為 TMS 瓦片是倒置的(向北時它會變高，而默認的 TileLayers 會在向南時 Y 坐標變大).
看看 處理此特定功能的傳單代碼將闡明該問題:
if (this._map && !this._map.options.crs.infinite) {var reverseY = this._globalTileRange.max.y - coords.y;如果(this.options.tms){數據['y'] = 倒置 Y；}數據['-y'] = 倒置 Y；}在此處計算圖塊的正確 Y 坐標有兩點至關重要:
- CRS 必須是有限的(它必須有邊界)
- 必須有一個有限的全局圖塊范圍(在 Leaflet 中為 最終由 CRS 邊界定義，而不是
TileLayer邊界)
長話短說，您的 CRS 應該用已知的界限來定義.對于這種特殊情況，請從 TMS 功能文檔中獲取信息...
...在定義Leaflet CRS時變成了一個L.Bounds定義，比如...
//定義 CRSvar rs25832 = 新 L.Proj.CRS('EPSG:25832',proj4rs25832def,{來源:[273211.2532533697, 6111822.37943825],決議:決議，界限:[[273211.2532533697, 5200000],[961083.6232988155, 6111822.37943825]]});東西應該可以正常工作(無需將 CRS 傳遞給 tilelayer，因為它們都會使用地圖)，如 工作示例.
I am using Leaflet with Proj4Leaflet to work with tiles in 25832. The application is fairly simple: I am trying to overlay tiles in EPSG:25832 onto a omniscale basemap. I have copied the individual resolutions and origin from the tilemap meta information. The problem I am facing is that the map is not aligned and once I zoom in the tiles are not placed in the correct order. I'd appreciate any kind of support here (by the way, this is a working example which is using openlayers).
I guess I am doing something wrong here:
// 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
}
);
...using the tiles information from https://mapproxy.bba.atenekom.eu/tms/1.0.0/privat_alle_50_mbit/germany .
Afterwards I add a tile layer
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
}
);
And add them to the map..
// Setup map
var map = L.map('map', {
crs: rs25832,
center: [ 50.8805, 7.3389 ],
zoom:5,
maxZoom: resolutions.length,
layers: [ baseWms, tileLayer ]
});
The bare minimum of code can be found here: https://jsfiddle.net/6gcam7w5/8/
This boils down to how the Y coordinate of TMS tiles is inverted (it becomes higher when going north, as opposed to default TileLayers, in which the Y coordinate becomes larger when going south).
Having a look on the Leaflet code that takes care of this specific feature will shed some light on the issue:
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;
}
There are two things critical to calculating the right Y coordinate for your tiles here:
- The CRS must be finite (it must have bounds)
- There must be a finite global tile range (which in Leaflet is ultimately defined by the CRS bounds and not the
TileLayerbounds)
Long story short, your CRS should be defined with known bounds. For this particular case, taking information from the TMS capabilities document...
<BoundingBox minx="273211.2532533697" miny="5200000.0" maxx="961083.6232988155" maxy="6111822.37943825"/>
...and turned into a L.Bounds definition when defining the Leaflet CRS, like...
// 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]]
}
);
Stuff should just work (with no need to pass the CRS to the tilelayers, since they will all use the map's), as in this working example.
這篇關于使用 EPSG:25832 投影在 Leaflet 中垂直對齊 TMS 瓷磚的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！