I'm creating a Leaflet map with an WebGL overlay (using L.CanvasOverlay) which renders a street network on the GPU.
Let's assume I have a point (2253845, 1375308) in EPSG:3857 and want to transform it to a pixel coordinate on a 256x256 raster, similar to a google maps tile at zoom level 0 (compare: this and that).
I can convert the same point (52.51904, 13.44907) to EPSG:4326 and use the following JavaScript code to do the reprojection to the 256x256 tile raster:
/** * Converts Lat/Lon to tile pixel X/Y at zoom level 0 * for 256x256 tile size and inverts y coordinates. * * @param {float} lat Latitude * @param {float} lon Longitued * @return Point with x and y corrdinates. */function latLonToPixels(lat, lon) { var sinLat = Math.sin(lat * Math.PI / 180.0); var pixelX = ((lon + 180) / 360) * 256; var pixelY = (0.5 - Math.log((1 + sinLat) / (1 - sinLat)) / (Math.PI * 4)) * 256; return { x: pixelX, y: pixelY };}... which leaves me with the desired point (137.56378, 83.94214) on the raster.
So, using leaflet I could transform my point from 3857 to 4326 and afterwards calculate the pixel coordinates using the formula above. But as I understand the forumlas, this would require two spherical reprojections which is jus too much computing for large geometries.
I suspect there is a much more simple and efficient approach for this transformation. But I couldnt figure it out yet. Any idea?
In addition, searching the internet I can't figure out what the EPSG:3857 coordinates actually denote. This and that answer try to explain it a bit but it is still unclear how to programmatically solve this.
أكثر...
Let's assume I have a point (2253845, 1375308) in EPSG:3857 and want to transform it to a pixel coordinate on a 256x256 raster, similar to a google maps tile at zoom level 0 (compare: this and that).
I can convert the same point (52.51904, 13.44907) to EPSG:4326 and use the following JavaScript code to do the reprojection to the 256x256 tile raster:
/** * Converts Lat/Lon to tile pixel X/Y at zoom level 0 * for 256x256 tile size and inverts y coordinates. * * @param {float} lat Latitude * @param {float} lon Longitued * @return Point with x and y corrdinates. */function latLonToPixels(lat, lon) { var sinLat = Math.sin(lat * Math.PI / 180.0); var pixelX = ((lon + 180) / 360) * 256; var pixelY = (0.5 - Math.log((1 + sinLat) / (1 - sinLat)) / (Math.PI * 4)) * 256; return { x: pixelX, y: pixelY };}... which leaves me with the desired point (137.56378, 83.94214) on the raster.
So, using leaflet I could transform my point from 3857 to 4326 and afterwards calculate the pixel coordinates using the formula above. But as I understand the forumlas, this would require two spherical reprojections which is jus too much computing for large geometries.
I suspect there is a much more simple and efficient approach for this transformation. But I couldnt figure it out yet. Any idea?
In addition, searching the internet I can't figure out what the EPSG:3857 coordinates actually denote. This and that answer try to explain it a bit but it is still unclear how to programmatically solve this.
أكثر...