拼貼圖層的中心與傳單上地圖的中心位置

我正在嘗試使用地點的平面圖像製作分配中心的地圖。我需要能夠放大和縮小圖像的質量。到目前爲止，我一直在使用Leaflet來繪製Map和MapTiler來創建一個tile方案，使得可以進行縮放而沒有任何質量損失和良好的性能。拼貼圖層的中心與傳單上地圖的中心位置

我有一切設置和工作，但我需要我的瓷磚層中心與地圖中心匹配。無論我做什麼，Tile Layer左上角總是從Map的（0,0）座標開始。

例如，在縮放級別爲3時，我的圖像爲1536x1280像素，因此在討論絕對像素座標時，左上角應位於地圖的座標（-768,640）處。

這裏是我的主腳本：

var map = L.map('map',{ 
    crs: L.CRS.Simple, 
    center:[0,0] 
}).setView([0,0],3); 

//mapHeight and mapWidth are the pixel dimensions of the flat image at max zoom level. 
//In this case it's 6144x4608px. By default the tiles size is 256x256px. 

var southWest = map.unproject([ 0, mapHeight], getMaxZoom()); 
var northEast = map.unproject([ mapWidth, 0 ], getMaxZoom()); 
var mapBounds = new L.LatLngBounds(southWest, northEast); 

L.tileLayer('tile/{z}/{x}/{y}.png',{ 
    minZoom: 2, 
    maxZoom: 5, 
    noWrap:true,   
    bounds:mapBounds 
}).addTo(map);

我與中心的setView迅猛，但在使瓷磚層中移動沒有成功搞砸。

傳單的文檔可以在這裏找到http://leafletjs.com/reference.html

，如果你能幫幫我。謝謝。

來源

2016-07-13 Herbert Souza Silva

在Leaflet中，瓦片座標緊緊地與內部機制 - 像素座標綁定。

對於每一個縮放級別，座標LatLng得到投射到CRS座標（這是EPSG：4326→EPSG：3857地球地圖和L.CRS.Simple圖垂直翻轉），則CRS座標得到由依賴於因子縮放縮放級別給出一個像素座標。圖層（瓦片，標記等）使用這些像素座標繪製。

對於（均GridLayer和TileLayer的）「正常」的磚，在瓦片模板URL的{x}和{y}字段是簡單地將像素座標按圖塊大小劃分。像素爲[0, 0]的256px瓦片將具有瓦片座標[0, 0]，像素[512, 256]的瓦片將具有[2, 1]等等。

但是，如果您閱讀L.TileLayer.WMS的代碼，則會注意到圖塊URL並不一定取決於圖塊座標。

回到你的問題。您可以通過使用L.TileLayer.WMS同樣的策略克服它：重寫getTileUrl方法，喜歡的東西：

var t = L.tileLayer(…); 

t.getTileUrl = function(coords) { 
    var myZ = coords.z; 
    var myX = coords.x + (8 * Math.pow(2, myZ - 3)); 
    var myY = coords.y + (6 * Math.pow(2, myZ - 3)); 

    return '/tile/' + myZ + '/' + myX + '/' + myY + '.png'; 
}

的代碼是簡單的（我一直懶得做數學題，這樣的東西適合他們應該），但那應該讓你走上正軌。

一種不同的方式來達到同樣的是創建基於L.CRS.Simple定製L.CRS其應用於一個翻譯改造LatLng S和CRS座標之間的轉換。如果Leaflet回購中的代碼src/geo/crs/CRS.Simple.js和src/geometry/Transformation.js對您有意義，我建議您嘗試這種方法。

來源

2016-07-13 14:43:15 IvanSanchez

謝謝！第一個解決方案解決了我的問題。我只需要改變一些小問題，但是重寫方法的想法是解決方案的核心。我應該發佈最終的代碼和注意事項嗎？如果是，我應該在哪裏？不能投票，因爲我沒有足夠的聲望，但我祝你一切順利。 –

如果你願意，你可以附加它作爲你的原始問題的附錄，有一些人這樣做。確保不要修改原始問題，爲未來的讀者提供背景。 – IvanSanchez

拼貼圖層的中心與傳單上地圖的中心位置

回答

相關問題