如何使用Leaflet API从纬度和经度坐标中检索LayerPoint(X,Y)

12

如果我使用以下代码从指定的纬度/经度获取 LayerPoint

var latLng = new L.latLng(-37.81303878836989, 144.97421264648438);
var point = map.latLngToLayerPoint(latLng);

输出结果如下:

o.Point
  x: 86042
  y: 77065

当我尝试使用以下URL访问图层瓦片时:

http://a.tile.osm.org/10/86042/77065.png

我收到了404错误,因为这是一个无效的X、Y坐标。

如果我使用以下代码:

map.on("click", function (e) {
    console.log(e);
});

我可以在控制台中获取LayerPoint,同时还能获取纬度和经度。

latlng: o.LatLng
  lat: -37.81303878836989
  lng: 144.97421264648438
layerPoint: o.Point
  x: 950
  y: 303

访问以下URL将返回此图块:

http://a.tile.osm.org/10/950/303.png

enter image description here

问题是这似乎甚至不是该纬度经度的正确图块,而且我的原始代码将纬度和经度转换为LayerPoint的代码实际上根本没有返回有效的X、Y。

我非常困惑为什么会得到这些结果。任何帮助都将非常感激。也许我做错了什么。

我不确定是否有另一种基于经纬度列表检索图块层的方法?

我之所以这样做是因为我想能够为离线应用程序使用缓存的瓦片数据,而我唯一拥有的数据是通过为客户端应用程序生成的GeoJSON有效载荷获得的几何/坐标。

更新:

最终采用了此功能(感谢@scai)。

根据此链接

var getSlippyTileLayerPoints = function (lat_deg, lng_deg, zoom) {
    var x = (Math.floor((lng_deg + 180) / 360 * Math.pow(2, zoom)));
    var y = (Math.floor((1 - Math.log(Math.tan(lat_deg * Math.PI / 180) + 1 / Math.cos(lat_deg * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)));

    var layerPoint = {
        x: x,
        y: y
    };

    return layerPoint;
};

输出:

Object {x: 924, y: 628}

http://a.tile.osm.org/10/924/628.png

图片描述

UPDATE 2:

进一步调查后,发现我需要的是下面这个函数:

var layerPoint = map.project(latlng).divideBy(256).floor();
console.log(layerPoint.x, layerPoint.y);
2个回答

9

经过进一步研究,我需要的是以下功能:

var layerPoint = map.project(latlng).divideBy(256).floor();
console.log(layerPoint.x, layerPoint.y);

2

OSM瓦片的URL基于不同的方案。您应该阅读OSM Wiki中有关滑动地图瓦片名称的内容。其中包含了各种编程/脚本语言的经纬度转换为瓦片编号以及相反方向的实现。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接