OpenLayers: image distorted on rotated projection

Question

What I have: OSM map of an area in US, and floor map of a building on that map. The building is tilted between 10 and 45 degrees from vertical. I also have the correct Lat/Lon coordinates for the building. The project uses ReactJS.

What I want: to rotate the floor map so that it fits correctly on the map. The floor map is incorporated into an image layer thus (code that I inherited)

   const floorMapLayer = new ImageLayer({
        source: new Static({
            url: floorPlanUrl,
            projection: rotateProjection("EPSG:4326", angle, extent),
            imageExtent: extent
        })
    })

where rotateProjection() was copied from https://codesandbox.io/s/reprojection-image-z0uit, changing the British "EPSG:27700" to "EPSG:4326"

What is happening: the rotated image is being distorted. At non-90 angles, the image is a parallelogram. At 90, it is rectangular, but the original N/S (becoming E/W) is reduced, and original E/W (becoming N/S) is increased. Empirically, it seems that these changes correlate to cos(latitude), almost as though it is maintaining degree measurements, e.g., something that was 4 deg lat by 6 deg long rotates to 4 deg long by 6 deg lat.

What I've looked at:

The last reference above links to the above-mentioned rotateProjection(). It also links to https://codepen.io/mike-000/pen/qBapaBa, which had similar code.

I am new to OpenLayers, and am a bit frustrated because the code is not documented well enough so that a newbie can understand what is happening, why it works, and what I should do if it doesn't work - which is my situation.

Perhaps I am not understanding how to use one of the above links properly. As I said, I am new at this, and documenting code helps a lot.

I'm not clear on which code you are using. Is it possible to include your version of the code to help [demonstrate](https://stackoverflow.com/help/minimal-reproducible-example) the problem? — showdev, Jun 01 '23 at 03:34
It is unlikely your image is EPSG:4326 as that would be distorted even without rotation as in https://openlayers.org/en/latest/examples/projection-and-scale.html — Mike, Jun 01 '23 at 08:41
@Mike Image is like a Base64-encoded PNG of a floor plan. At the small scale being used (< 1000 ft), the OSM map of the building is indistinguishable from a rectangle, so it should match if it's just rotated. I supply the extents for the projection and the imageExtent (affects length/width, but does not prevent distortion). — TheBick, Jun 01 '23 at 19:51
I do not think anyone would supply an image in a non-conformal projection such as EPSG:4326 where the x and y axis scales are different. Try transforming the extent to EPSG:3857 and rotating that `projection: rotateProjection("EPSG:3857", angle, transformExtent(extent, "EPSG:4326", "EPSG:3857"), imageExtent: transformExtent(extent, "EPSG:4326", "EPSG:3857")` — Mike, Jun 01 '23 at 23:00
@Mike - Brilliant! I already marked it as useful. If you want to put it as an Answer, I will up-vote and Accept it! Since your two calls to transformExtent() had identical args, I wrote a single ``` xformedExtent = transformExtent(...) ``` and used that. Thank you!! — TheBick, Jun 02 '23 at 00:39

score 0 · Answer 1 · answered Jun 01 '23 at 08:41

What you are doing is too complicated and there is no reason to do in run-time. Instead use GDAL to warp the image to a correct projection offline - this way you will get better quality and avoid any runtime transformations.

Take your image, use

gdal_translate \
  -gcp <pixel_ul> <pixel_lr> <easting> <northing> [four times for each corner] \
  input.png output.tiff

And then warp it to your final projection with gdalwarp.

OpenLayers: image distorted on rotated projection

1 Answers1