javascript - 将图块图层的中心与传单上的 map 中心匹配

我正在尝试使用该地点的平面图像制作配送中心地图。我需要能够放大和缩小以保持良好的图像质量。到目前为止，我一直在使用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

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

最佳答案

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

对于每个缩放级别，LatLng中的坐标都投影到CRS坐标（对于地球地图，这是EPSG：4326→EPSG：3857；对于L.CRS.Simple地图，它是垂直翻转），然后，CRS坐标将根据与缩放级别以给出像素坐标。使用这些像素坐标绘制图层（平铺，标记等）。

对于“普通”图块（同时包含GridLayer和TileLayer），图块模板URL上的{x}和{y}字段只是像素坐标除以图块大小。像素[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创建自定义L.CRS.Simple，该自定义LatLng应用转换转换在src/geo/crs/CRS.Simple.js和CRS坐标之间进行转换。如果Leaflet存储库中src/geometry/Transformation.js和中的代码对您有意义，我建议您尝试这种方法。

关于javascript - 将图块图层的中心与传单上的 map 中心匹配，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38351570/