javascript - 将 Leaflet LatLng 投影到平铺像素坐标

Question

对于 Canvas 图层，如何访问特定图 block 的点击像素？给定像 { lat: 37.68816, lng: -119.76196 } 这样的 LatLng，我如何:#1，检索正确的点击 block ，#2， block 内的像素坐标？这两个都应该考虑 maxNativeZoom。

Answer 1

需要像 L.CRS.EPSG3857 这样的 CRS。 map 的 CRS 可通过 map.options.crs 访问。需要真正的缩放、图 block 大小(如 256，但可能为 512 或更高 maxNativeZoom)和像素原点，如 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 得到瓦片 Angular 的像素坐标，根据 pixelOrigin 进行调整。

最后，要获得瓦片像素，从原点和瓦片 Angular 减去图层点。