首页 文章

将图块层的中心与Leaflet上的Map的中心匹配

提问于
浏览 次
1

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

我已经完成了所有设置和工作，但我需要我的Tile Layer中心与 Map 中心相匹配 . 无论我做什么，Tile Layer左上角总是从Map的（0,0）坐标开始 .

例如，在缩放级别3，我的图像是1536x1280px，因此在谈论绝对像素坐标时，左上角应该是 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和bounds，但没有成功地使Tile Layer移动 .

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

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

javascript jsp maps leaflet coordinates

1 回答

  • 2

    在Leaflet中，tile坐标与内部机制紧密绑定 - 像素坐标 .

    对于每个缩放级别， LatLng 中的坐标被投影到CRS坐标（对于地球 Map 为EPSG：4326→EPSG：3857，对于 L.CRS.Simple Map 为垂直翻转），然后CRS坐标将根据缩放级别的比例缩放到给出一个像素坐标 . 使用这些像素坐标绘制图层（图块，标记等） .

    对于"normal" tiles（ GridLayer 和 TileLayer ），tile模板URL上的 {x} 和 {y} 字段只是像素坐标除以tile大小 . 像素 [0, 0] 处的256px图块将具有图块坐标 [0, 0] ，像素 [512, 256] 处的图块将具有 [2, 1] ，依此类推 .

    但是，如果您读取 L.TileLayer.WMS 的代码，则必须依赖于切片坐标 .

    回到你的问题 . 您可以使用 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 ，它应用转换变换以在 LatLng 和CRS坐标之间进行转换 . 如果Leaflet回购中的 src/geo/crs/CRS.Simple.js 和 src/geometry/Transformation.js 中的代码对您有意义，我建议您尝试这种方法 .

    回复于

相关问题