将 Tile Layer 的中心与 Leaflet 上的地图中心匹配

Question

我正在尝试使用该地点的平面图像制作配送中心地图。我需要能够放大和缩小以保持良好的图像质量。到目前为止，我一直在使用 Leaflet 来绘制 Map 和 MapTiler 来创建一个平铺模式，该模式可以在没有任何质量损失和良好性能的情况下进行缩放。

我已经完成了所有设置并且可以正常工作，但是我需要我的 Tile Layer 中心与地图中心相匹配。无论我做什么，Tile Layer 的左上角总是从地图的 (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 和边界，但没有成功让 Tile Layer 移动。

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] 的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，该L.CRS 应用translation 转换以在LatLngs 和CRS 坐标之间进行转换。如果 Leaflet repo 中 src/geo/crs/CRS.Simple.js 和 src/geometry/Transformation.js 中的代码对您有意义，我建议您尝试这种方法。