javascript - 将 Tile Layer 的中心与 Leaflet 上的 map 中心匹配

Question

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

我已设置好一切并开始工作，但我需要我的 Tile Layer 中心与 map 中心相匹配。无论我做什么，Tile Layer 的左上角总是从 map 的 (0,0) 坐标开始。

例如，在缩放级别 3 时，我的图像是 1536x1280 像素，因此在谈论绝对像素坐标时，左上角应该位于 map 的坐标 (-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 中，图 block 坐标与内部机制 - 像素坐标紧密绑定(bind)。

对于每个缩放级别，坐标在 LatLng 中投影到 CRS 坐标(地球 map 为 EPSG:4326→EPSG:3857，L.CRS.Simple map 为垂直翻转)，然后 CRS 坐标根据缩放级别按比例缩放以给出像素坐标。使用这些像素坐标绘制图层(图 block 、标记等)。

对于“普通”图 block (GridLayer 和 TileLayer )，{x}和 {y} tile 模板 URL 上的字段只是像素坐标除以 tile 大小。像素 [0, 0] 处的 256 像素图 block 将有平铺坐标 [0, 0] ，像素 [512, 256] 处的图 block 会有[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基于 L.CRS.Simple它应用翻译 转换在 LatLng 之间进行转换s 和 CRS 坐标。如果src/geo/crs/CRS.Simple.js中的代码和 src/geometry/Transformation.js在 Leaflet 存储库中对你有意义，我建议你尝试这种方法。