Leaflet自定义图层点击事件：如何获取瓦片坐标X/Y及缩放级别？

完全可行！Leaflet内置了专门的方法帮你把点击的经纬度转换成对应缩放级别的瓦片坐标，不用手动计算复杂的投影公式，省事儿多了😉

核心思路 #

Leaflet的L.Map对象提供了project()方法，能将经纬度（L.LatLng）转换为指定缩放级别下的全局像素坐标，再结合瓦片尺寸就能算出瓦片的X、Y值：

1. 获取点击位置的经纬度和当前缩放级别
2. 用map.project()将经纬度转为像素坐标
3. 像素坐标除以瓦片尺寸（默认256px），取整数部分就是瓦片X/Y

代码示例 #

假设你已经有了地图点击事件的监听，只需要添加几行代码就能拿到瓦片坐标：

// 监听地图点击事件
map.on('click', function(e) {
    // 你已经能获取的信息
    const clickLat = e.latlng.lat;
    const clickLng = e.latlng.lng;
    const currentZoom = e.getZoom();

    // 计算瓦片坐标
    const tileSize = map.getTileSize(); // 获取当前地图的瓦片尺寸（默认256x256）
    const pixelCoords = map.project(e.latlng, currentZoom); // 转成指定缩放级别的像素坐标
    const tileX = Math.floor(pixelCoords.x / tileSize.x);
    const tileY = Math.floor(pixelCoords.y / tileSize.y);

    // 输出结果到控制台（或者用在你的业务逻辑里）
    console.log(`点击位置的瓦片信息：X=${tileX}, Y=${tileY}, 缩放级别=${currentZoom}`);
});

关键细节说明 #

• 关于瓦片尺寸：如果你的自定义图层使用了非标准尺寸（比如512x512），一定要用map.getTileSize()获取实际尺寸，不要硬写256，这样代码兼容性更强。
• project()方法的作用：它会根据Leaflet的墨卡托投影规则，把经纬度转换成对应缩放级别的全局像素位置（以地图左上角为原点），再除以瓦片尺寸就能得到该像素所在的瓦片编号。
• 如果是自定义图层：如果你是基于L.TileLayer开发的自定义图层，其实在getTileUrl()方法里本来就会接收tileX、tileY、zoom参数，但在点击事件里获取的话，上面的方法就完全够用。

内容的提问来源于stack exchange，提问作者Safari