How to overlay a TIF image in openlayers 6?

Question

I am using openlayers 6 for rendering map. My map has some layers and I want to add a TIF image dynamically to the map as an overlay. I am using mapnik & mappoxy for tile caching. I tried this https://gis.stackexchange.com/questions/97943/how-to-open-geotiff-as-base-layer-on-openlayers but didn't work. My code is:

var map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      title: 'OSM',
      source: new OSM(),
      opacity: 0.5,
    }),
    new TileLayer({
       title: 'District',
       source: new XYZ({
           url: "http://127.0.0.1:8080/tms/1.0.0/dist/distgrid" + "/{z}/{x}/{-y}.png",
           crossOrigin: "anonymous",
           projection:projection,
           tileGrid: createXYZ({
                  extent: extent,
                  maxResolution: 2605.2421875,
                  tileSize: [256, 256],
                  maxZoom: 13,
                }),
       }),
    }),
  ],
view: new View({
    projection: projection,
    units:"metric",
    extent: extent,
    zoom:0,
    maxZoom:13,
    minZoom:0,
    maxResolution:2605.2421875,
    center:[654496.136597752,1155181.26900064],
    numZoomLevels:13,
  })
});

I have a tif image of name analysis_result.tif which I want to overlay to the map. When I add this using qgis it overlay in the right place.

Answer 1

You could host it in geoserver, then use URL to show it.

 tiffRaster = new ol.layer.Image({
        title: 'anyName',
        source: new ol.source.ImageWMS({
            url: 'http://urlOrLocalHost:8080/geoserver/faml/wms',
            params: {
                'LAYERS': 'faml:' + f
            },
            ratio: 1,
            serverType: 'geoserver'
        })
    });

In LAYERS compare your name layer with name tiff hosted in Openlayers