プロジェクトリーフレット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で割り、小数点以下を切り捨てます。これは、タイル "滑りやすい"座標を与える。

第3に、tileSizeを掛けて、タイルコーナーのピクセル座標を取得し、pixelOriginに調整します。

最後に、タイルピクセルを取得するには、原点とタイルコーナーからレイヤーポイントを減算します。