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

Posted 2023-02-16

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

【英文标题】：How to retrieve LayerPoint (X, Y) from Latitude and Longitude coordinates using Leaflet API

【发布时间】：2014-03-28 17:49:45

【问题描述】：

如果我使用以下代码从指定的纬度/经度获取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

问题在于，它甚至似乎不是该纬度经度的正确图块，我将 lat lng 转换为 LayerPoint 的原始代码实际上首先返回了有效的 X、Y。

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

我不确定是否有其他方法可以根据经纬度列表检索切片图层？

我之所以这样做，是因为我希望能够将缓存的切片数据用于离线应用程序，而我拥有的唯一数据是通过为客户端应用程序生成的 GeoJSON 有效负载的几何/坐标.

更新：

最终使用了这个函数（感谢@scai）。

根据this link.

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

更新 2：

经过进一步研究，原来我所追求的是以下功能：

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

【参考方案1】：

OSM 的磁贴 URL 基于不同的方案。您应该在 OSM wiki 中阅读有关 slippy map tile names 的信息。它包含 lon/lat 到平铺数字的实现，反之亦然，适用于各种编程/脚本语言。

【参考方案2】：

经过进一步研究，原来我所追求的是以下功能：

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