In my react application, I have geotagged images with the center latitude-longitude, height and width. When clicked on the image I'm getting x-y co-ordinates(pixels of image) where clicked.
I want to calculate the possible lat-lon co-ordinates from center lat-lon and x,y pixels of image.
Is there any way to do this ? Someone please help .
Thanks in advance !
CodePudding user response:
Based on the comments above, if you have a scale of 1 pixel = 1cm ( which seems to be very small, if you have a 4000x2100px image, means you are about 40meters x 21meters )
To then calculate the lat-lon on click or hover of the x-y position of the cursor:
const R = 6378160; // Earth Radius in meters
const scale = 0.01; ( in meters 1cm = 0.01m per pixel )
const midX = imageWidth / 2;
const midY = imageHeight / 2;
const dX = x - midX; // Difference for x position in pixel;
const dY = y - midY; // Difference for y position in pixel;
// Get the difference in meters
const dXScaled = dX * scale;
const dYScaled = dY * scale;
// Convert the difference in latitude, longitude
const dLat = ( dXScaled / R ) * Math.PI / 180;
const dLon = ( dYScaled / (R*Cos(Math.PI *lat/180))) * Math.PI / 180;
// Return new position
return {
lon: lon dLon,
lat: lat dLat,
}
You can verify the above answer with this https://scienceweb.whoi.edu/marine/ndsf/cgi-bin/NDSFutility.cgi?form=0&from=XY&to=LatLon ( if something is incorrect above, let me know I'll correct )