OpenLayers – How to Project New Image to Coordinates

javascriptopenlayers

I am attempting to add a new image to the map which I have gotten working with the following code:

                const extent = [-30, -50, 10, 90];

                const projection = new Projection({
                    units: 'pixels',
                    extent: extent
                });


                let imageLayer = new ImageLayer({
                    source: new Static({
                        url: 'https://imgs.xkcd.com/comics/online_communities.png',
                        projection: 'EPSG:4326',
                        imageExtent: extent
                    })
                });

                this.props.map.addLayer(imageLayer)

However I need to project the image so it lines up with the latlong of feature on the map as the below images illustrate. Could someone point me in the right direction?

Latlong coordinates:

[
  [
    -65.169777,
    59.11845
  ],
  [
    -72.442551,
    59.865898
  ],
  [
    -71.30043,
    63.440392
  ],
  [
    -63.176235,
    62.648335
  ],
  [
    -65.169777,
    59.11845
  ]
]

Feature:
enter image description here

Projected image:
enter image description here

Best Answer

Your image extents should match the extents in lon/lat instead of pixels [min lon, min lat, max lon, max lat]. So looks like [-63.176235, 59.11845, -72.442551, 63.440392], but you may need to confirm that. If the image is geo-referenced, I use gdalinfo to get the lower left and upper right coordinates to use for the extent. You may also need to specify imageSize in pixels, though this should be auto detected.

Related Question