OpenLayers 4 adding a georeferenced image

Question

I'm trying to add a georeferenced image layer to my map object. I'm using Node, with the v4.2.0 Openlayers module.

My code to add the georefenced image is as follows. Within the layers array of the map object (there is another OSM WMS background layer):

new ol.layer.Image({ source: new ol.source.ImageStatic({ attributions: '© some note', url: __dirname + '/image.tiff', projection: 'EPSG:3857', imageExtend: [486303.9778100852272473, 800886.4222691040486097, 486822.4427326705190353, 6801434.6447209259495139] }) })

Using the ol-debug.js library I get the following error:

Uncaught TypeError: Cannot read property '2' of undefined at Object.ol.extent.intersects > at ol.source.ImageStatic.getImageInternal > at ol.source.ImageStatic.ol.source.Image.getImage > at ol.renderer.canvas.ImageLayer.prepareFrame > at ol.renderer.canvas.Map.renderFrame > at ol.Map.renderFrame_ > at ol.Map.<anonymous>.

What could be wrong here? Meanwhile I have used a workaround by creating a tiled XYZ image which works, but I would still like to know what is going wrong here.

Answer 1

Unfortunately, I don't believe it's possible to display GeoTiff raster files with OpenLayers directly. What you will need to do is to transform the GeoTiff to PNG, GIF, or JPEG format. I've used GDAL for that for years now. BTW, there's a typo in your code...should be imageExtent instead. Code snippet that I've used in one of my projects:

source: new ol.source.ImageStatic({
    url: "images/conus/mercator/maxt_2016020200.png",
    imageSize: [3328, 2048],
    imageExtent: [-15028131.257, 1878516.407,-6887893.493, 6887893.493],
    projection: ovProj

}),

Another option would be to use OL's ImageWMS as an image source with GeoServer or MapServer. The data source for either of those would be your GeoTiff and you would get back a single, untiled image in those formats which you can style using either of those WMSs.