Project Leaflet LatLng for pixel coordinates

Question

For canvas layers, how can I access the clicked pixel of a specific tile? Given the value of LatLng { lat: 37.68816, lng: -119.76196 }, how can I: # 1, get the correct click label and # 2, the pixel coordinates inside the tile? Both must be considered maxNativeZoom.

Answer 1

CRS required, for example L.CRS.EPSG3857. CRS card is available at map.options.crs. True scale, tile size (e.g. 256, but maybe 512 or higher around maxNativeZoom), and pixel generation is required, for example 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]
}

First convert latlngto the point of the layer. Now all units are in pixels.

-, tileSize . "" .

-, tileSize, , pixelOrigin.

, , .