Project Leaflet LatLng平铺像素坐标

Question

对于画布图层，如何访问特定图块的点击像素？给定像{ lat: 37.68816, lng: -119.76196 }之类的LatLng，我怎样才能：＃1，检索点击的正确图块，＃2，图块中的像素坐标？这两个都应该考虑maxNativeZoom。

Answer 1

需要L.CRS.EPSG3857之类的CRS。地图的CRS可由map.options.crs访问。需要真正的缩放，平铺大小（如256，但可能是大约maxNativeZoom的512或更高）和像map.getPixelOrigin()这样的像素来源：

const latlngToTilePixel = (latlng, crs, zoom, tileSize, pixelOrigin) => {
    const layerPoint = crs.latLngToPoint(latlng, zoom).floor()
    const tile = layerPoint.divideBy(tileSize).floor()
    const tileCorner = tile.multiplyBy(tileSize).subtract(pixelOrigin)
    const tilePixel = layerPoint.subtract(pixelOrigin).subtract(tileCorner)

    return [tile, tilePixel]
}

首先，将latlng转换为图层点。现在所有单位都是像素。

其次，除以tileSize并向下舍入。这使得瓷砖“滑动”坐标。

第三，再乘以tileSize以获取拼贴角的像素坐标，并调整为pixelOrigin。

最后，要获取切片像素，请从原点和切片边角减去图层点。