项目传单LatLng以平铺像素坐标

nat*_*ill 5 javascript leaflet

对于画布图层,如何访问特定图块的单击像素?给定LatLng之类的{ lat: 37.68816, lng: -119.76196 },我怎么能:#1,检索点击的正确拼贴,#2,拼贴中的像素坐标?这两个都应该考虑maxNativeZoom.

nat*_*ill 6

需要CRS之类L.CRS.EPSG3857的.地图的CRS可以通过map.options.crs.真正的缩放,平铺大小(如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]
}
Run Code Online (Sandbox Code Playgroud)

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

第二,分开tileSize和向下舍入.这给瓦片"滑动"坐标.

第三,再乘以tileSize得到瓷砖角的像素坐标,调整为pixelOrigin.

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