WMS Layer provide by Map Sever rendering incorrectly in ol3

Question

I have created a map using OpenLayers3 which contains two layers. First layer is Open Street Map Layer and the second one is WMS layer provided by the Map Server.

Problem- When i'm rendering first layer it is rendering properly no issue. but when i'm rendering the second layer(provide by map server) it renders incorrectly means it does not fit to its container and it is out of sync with the first layer in terms of location. See this snapshot of the maps for more clarification. In the snapshot top layer is wms layer provide by map server.

Also when i'm zooming or moving the map then both layers work correctly but after a delay of few seconds the second layer(wms layer from map server) again switches back to its initial position(Position that is shown in above attached snapshot).

This is the code that i'm using to consume wms service.

var layer = new ol.layer.Image({
    source: new ol.source.ImageWMS({
          url: 'http://localhost:19090/rasters/world/wms',
          params: {
               'LAYERS': 'world',
               'mode': 'map',
          },
          serverType: 'mapserver'
     })
});

This is my map file.

MAP
  NAME   "world"
  CONFIG "MS_ERRORFILE" "/home/neelesh/Projects/georbis/data/logs/mapservice_errors.log"
  CONFIG "PROJ_LIB" "/home/neelesh/Projects/georbis/deps/proj.4-master/share/proj"
  CONFIG "ON_MISSING_DATA" "LOG"
  DEBUG 5
  EXTENT -180.000 -90.000 180.000 90.000
  SHAPEPATH "/home/neelesh/Projects/georbis/data/service_data/data/wms"
  IMAGECOLOR 255 255 255
  SIZE 1350 675

  WEB
    METADATA
      "wms_title" "Georbis WMS Server"
      "wms_author" "VizExperts"
      "wms_onlineresource" "http://192.168.1.36:19090/rasters/world/wms?"
      "wms_enable_request" "*"
      "wms_srs" "EPSG:4326 EPSG:3857"
      "wms_feature_info_mime_type" "text/html"
      "wms_format" "image/jpg"
    END
  END

  PROJECTION
    "init=epsg:4326"
  END

  LAYER
    NAME world
    TYPE RASTER
    DATA "world.tif"
    METADATA
      "wms_title" "BlueWorld Map"
      "wms_srs" "epsg:4326"
      "wms_server_version" "1.1.1"
    END
    PROJECTION
      "init=epsg:4326"
    END
  END
END

I tried ol.view.fit method to fit the layer to its container but the value of layer.getExtent() for the layer is undefined.

Pleas help me to find out what is wrong. is there any problem with wms request format or the map file?

Answer 1

It's because you configured your MapServer to support only EPSG 4326. It should support EPSG 3857 (the OSM tiles). You should change "wms_srs" "epsg:4326" to "wms_srs" "EPSG:4326 EPSG:3857" (see the official WMS server doc ). You can confirm it works doing a GetCapabilities request .

When you use GeoServer, by default, it supports all projections for WMS (so it works because your WMS images are requested with EPSG 3857)

You should be aware that now you can also do raster reprojection on client in OpenLayers. For some demos, go to http://openlayers.org/en/v3.11.0/examples/ and search with keyword "reprojection"