[GIS] Display GeoTIFF layer from GeoServer in OpenLayers

Question

I have a number of GeoTIFF files to be published in GeoServer and consume in OpenLayers.

I have published vector data and I was able to consume them in OpenLayers. However, I am not able to show a sample GeoTIFF layer on OpenLayers (I created by placing the tiff file in GeoServer directory and published from there).

I used TileWMS source with Tile layer and ImageWMS source with Image layer, either way nothing gets rendered in OpenLayers. How can I display the GeoTIFF layer in OpenLayers?

code :

var url = 'http://localhost:8080/geoserver/localhost/wms'

var multipleSrc = new ol.source.ImageWMS({
    projection: 'EPSG:32643',
    url: url,
    params: {
        //'FORMAT': 'image/png',
        'LAYERS': 'localhost:Tiff',//getCommaSeperatedLayersFromHT(),
        //'TRANSPARENT': 'TRUE',
        //'CQL_FILTER': 'INCLUDE'//getCommaSeperatedLayersFromCQL() //"INCLUDE;INCLUDE;INCLUDE;INCLUDE;INCLUDE;INCLUDE;INCLUDE;tehsil='Jatara'" // Working
    },
    serverType: 'geoserver',
    //transition: 0,
    //transparent: true,
    //opacity: 0.5,
});

 var layers = [
    EsriLayer,
    //OSMLayer,
    multipleLayer,
    vector
  ];

  var view = new ol.View({
      center: washingtonWebMercator,
      zoom: 5,
      maxZoom: 19.9
  })
  var map = new ol.Map({
    layers: layers,
    target: 'map',
    view: view
  });

Answer 1

I would go into the Layer Preview tab of the GeoServer admin console and select OpenLayers 3 (OL3) in the All Formats column. Then you can use the browser's devtools to see the network request and the parameters used to successfully display the image.

You can also do a View Page Source in your browser to take a look at the exact OL3 code used to display the image successfully by GeoServer in OL3.