將圖塊圖層的中心與傳單上的地圖中心匹配

Question

我正在嘗試使用該地點的平面圖像制作配送中心地圖。 我需要能夠放大和縮小以保持良好的圖像質量。 到目前為止，我一直在使用Leaflet繪制Map和MapTiler來創建一個切片模式，該模式可以進行縮放而不會造成質量損失和良好的性能。

我已經完成所有工作，但是我需要我的“圖塊圖層”中心與“地圖”中心匹配。 無論我做什么，“平鋪層”的左上角總是從地圖的（0,0）坐標開始。

例如，在縮放級別3上，我的圖像為1536x1280px，因此在談論絕對像素坐標時，左上角應位於地圖的坐標（-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和邊界，但是在移動平鋪層方面​​沒有成功。

可以在以下位置找到Leaflet的文檔： http：//leafletjs.com/reference.html

如果可以，請你幫助我。 謝謝。

Answer 1

在Leaflet中，圖塊坐標與內部機制（像素坐標）緊密綁定。

對於每個縮放級別，將LatLng坐標投影到CRS坐標（對於地球地圖，這是EPSG：4326→EPSG：3857；對於L.CRS.Simple地圖，是垂直翻轉），然后，CRS坐標將根據與縮放級別以給出像素坐標。 使用這些像素坐標繪制圖層（平鋪，標記等）。

對於GridLayer和TileLayer “常規”圖塊，圖塊模板URL上的{x}和{y}字段只是像素坐標除以圖塊大小。 像素[0, 0]處的[512, 256]像素圖塊將具有圖塊坐標[0, 0] ，像素[0, 0] 512，256 [0, 0]的圖塊將具有[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該自定義L.CRS應用平移轉換在LatLng和CRS坐標之間進行轉換。 如果src/geo/crs/CRS.Simple.js中的src/geo/crs/CRS.Simple.js和src/geometry/Transformation.js中的代碼對您有意義，建議您嘗試這種方法。