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

Question

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

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

可以在此处找到 Leaflet 的文档http://leafletjs.com/reference.html

如果可以，请帮助我。谢谢。

Answer 1

在 Leaflet 中，图块坐标与内部机制 - 像素坐标紧密绑定。

对于每个缩放级别，LatLng 中的坐标会投影到 CRS 坐标（即地球地图的 EPSG:4326→EPSG:3857 和 L.CRS.Simple 地图的垂直翻转），然后 CRS 坐标根据缩放级别缩放一个因子以给出像素坐标。使用这些像素坐标绘制图层（图块、标记等）。

对于 "normal" 个图块（GridLayer 和 TileLayer），图块模板上的 {x} 和 {y} 字段 URL只是像素坐标除以图块大小。像素 [0, 0] 处的 256 像素图块将具有图块坐标 [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，它应用 translation 转换在 LatLngs 和 CRS 坐标。如果 Leaflet 存储库中 src/geo/crs/CRS.Simple.js 和 src/geometry/Transformation.js 中的代码对您有意义，我建议您尝试这种方法。

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

Match center of a Tile Layer with center of the Map on Leaflet

javascript

maps

jsp

coordinates

leaflet