1

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

|improve this question
1

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.

|improve this answer
  • This answers the format of the question above, however, I realised it's easier just to get the extent of the feature directly from Openlayers using getExtent(). Is there an advantage for using gdalinfo over proj4? Thanks – Alex Jul 3 '18 at 8:58
  • If the feature extent matches the geo-referencing information of your image, that's probably a better solution. The GDAL utilities and Proj4 are meant for different purposes. Proj4 is basically a spatial coordinate transformation package whereas GDAL can perform various spatial operations on raster and vector types of data as well as provide geospatial information on the data. Over the years, had to rely on GDAL utilities to warp the image to the display projection until OL3 came along which could do that too if needed, but also came at a cost in the browser rather than pre-generated. – teknocreator Jul 3 '18 at 10:58
  • Ok thanks for the run down, I will check it out further, still fairly new to ol and gis, so much appreciated! – Alex Jul 3 '18 at 14:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.