将Leaflet LatLng投影到图块像素坐标 [英] Project Leaflet LatLng to tile pixel coordinates

问题描述

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

For canvas layers, how can I access the clicked pixel of a specific tile? Given a LatLng like { lat: 37.68816, lng: -119.76196 }, how can I: #1, retrieve the correct tile clicked, and #2, the pixel coordinates within the tile? Both of these should consider maxNativeZoom.

推荐答案

需要像 L.CRS.EPSG3857 这样的CRS.可以通过 map.options.crs 访问地图的CRS.需要真实的缩放，图块大小(例如256，但关于 maxNativeZoom 可能是512或更大)和像素原点(例如 map.getPixelOrigin()):

A CRS like L.CRS.EPSG3857 is required. The map's CRS is accessible by map.options.crs. The true zoom, tile size (like 256, but could be 512 or higher about maxNativeZoom) and a pixel origin like map.getPixelOrigin() are required:

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 转换为图层点.现在所有单位都以像素为单位.

First, convert the latlng to a layer point. Now all units are in pixels.

第二，除以 tileSize 并四舍五入.这样就可以得到图块的滑动"坐标.

Second, divide by tileSize and round down. This gives the tile "slippy" coordinates.

第三，再乘以 tileSize 以获取平铺角的像素坐标，并针对 pixelOrigin 进行了调整.

Third, multiply back by tileSize to get the pixel coordinates of the tile corner, adjusted for pixelOrigin.

最后，要获取图块像素，请从原点和图块角中减去图层点.

Finally, to get the tile pixels, subtract the layer point from origin and tile corner.

这篇关于将Leaflet LatLng投影到图块像素坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！