[GIS] MapServer and OpenLayers 3 – map not displaying properly

mapserveropenlayers

After literally 20 hours of banging my head against the wall without success, I'm hoping that my issue is a trivial syntax error or perhaps something obvious to somebody who knows more than myself about MapServer/openlayers3.

MapServer is installed, as is Apache and I have an OpenLayers 3 example running fine. I made a map file with a TIFF that has been re-projected to espg:3857. I know it's possible (and easy) for MapServer to reproject on the fly but I've been trying everything I can think of.

The openlayers example works, and my raster shows on the map but it is always the same size/zoom and located on the same spot on the map… it's like MapServer is not responding to the bounds that are send to it… or the bounds are not being sent properly.

Here's my map file:

MAP
  PROJECTION
    "init=epsg:3857"
  END

  NAME "hist"
   EXTENT 412597.209 5648364.758 419748.205 5655209.911 
  SIZE 800 500

  WEB
    METADATA
      wms_title           "server"
      wms_onlineresource  "http://localhost/cgi-bin/mapserv?map=path2map/r.map?"
      wms_srs             "EPSG:3857"
      wms_version         "1.3.0"
      wms_enable_request  "*"
    END
  END

  LAYER
    PROJECTION
      "init=epsg:3857"
    END
    NAME         "historic"
    DATA         "path2tif/im_hist.tif"
    STATUS       ON
    TYPE         RASTER
    PROCESSING   "BANDS=1,2,3"
  END 
END

And my HTML/js OpenLayers…

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
<style>
  #map {
     height: 500px;
     width:800px; 
  }
</style>
<script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
<title>example</title>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">

var wms_layer = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        url: 'http://localhost/cgi-bin/mapserv',
        params: {'LAYERS': 'historic', 
           'mode': 'map', 
           'CRS': 'EPSG:3857',
           'map':'/var/www/mapserver_maps/r.map', 
           'FORMAT': 'image/png',
        },
        serverType: 'mapserver',
        extent: [412597.209, 5648364.758, 419748.205, 5655209.911]
    }),
})


var map = new ol.Map({
    target: 'map',
    layers: [
       new ol.layer.Tile({
          visible: true,
          preload: Infinity,
          source: new ol.source.BingMaps({
              key: 'keythatworkds',
              imagerySet: 'AerialWithLabels'
             })
        }),
      wms_layer
    ],

    view: new ol.View({
        center: ol.proj.transform([ -118.198140, 50.994744], 'EPSG:4326', 'EPSG:3857'),
        zoom: 12,
     })
});
</script>
</body>
</html>

and here is the output of "gdalinfo im_hist.tif"

Driver: GTiff/GeoTIFF
Files: im_hist.tif
Size is 13982, 13384
Coordinate System is:
PROJCS["WGS 84 / Pseudo-Mercator",
    GEOGCS["WGS 84",
        DATUM["WGS_1984",
            SPHEROID["WGS 84",6378137,298.257223563,
                AUTHORITY["EPSG","7030"]],
            AUTHORITY["EPSG","6326"]],
        PRIMEM["Greenwich",0],
        UNIT["degree",0.0174532925199433],
        AUTHORITY["EPSG","4326"]],
    PROJECTION["Mercator_1SP"],
    PARAMETER["central_meridian",0],
    PARAMETER["scale_factor",1],
    PARAMETER["false_easting",0],
    PARAMETER["false_northing",0],
    UNIT["metre",1,
        AUTHORITY["EPSG","9001"]],
    EXTENSION["PROJ4","+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs"],
    AUTHORITY["EPSG","3857"]]
Origin = (412597.208572349045426,5655209.910897526890039)
Pixel Size = (0.511443000000000,-0.511443000000000)
Metadata:
  AREA_OR_POINT=Area
Image Structure Metadata:
  INTERLEAVE=PIXEL
Corner Coordinates:
Upper Left  (  412597.209, 5655209.911) (  3d42'23.13"E, 45d12'48.93"N)
Lower Left  (  412597.209, 5648364.758) (  3d42'23.13"E, 45d10'12.92"N)
Upper Right (  419748.205, 5655209.911) (  3d46'14.38"E, 45d12'48.93"N)
Lower Right (  419748.205, 5648364.758) (  3d46'14.38"E, 45d10'12.92"N)
Center      (  416172.707, 5651787.334) (  3d44'18.75"E, 45d11'30.94"N)

I really hope this is a simple fix.

Best Answer

If you want your MapServer WMS to reproject as part of a WMS request you will need to configure your map file to say which projections are supported.

You set the default map projection for your service in the MAP > PROJECTION block, like:

MAP
  CONFIG "PROJ_LIB" "C:/apps/gisinternals/bin/proj/SHARE"
  DEBUG 3
  NAME "Your_root_layer_name"
  #==========================================================#
  # EXTENT
  # Change to appropriate min-x,min-y,max-x,max-y coordinates 
  # for all your data
  #==========================================================#
  EXTENT -8.6476 49.8639 1.76943 60.8622  
  PROJECTION
     #Default service projection
     "init=epsg:4326"
  END

You set the projection that the data is in within the LAYER > PROJECTION block, like: 

LAYER
  DATA "Calabria_Reggio_Calabria3_TF_PS_TS"
  EXTENT 15.6304628873 37.9166095352 16.2989955741 38.4207238629
  NAME "ITA_Calabria_Reggio_Calabria3_ESA_EN_5k_psi_TS"
  PROJECTION
    #Projection of the data itself
    "init=epsg:4258"
  END

You use the METADATA block either at the root layer to specify projections supported by the whole service, or in the individual layers to specify projections supported by that layer, like:

METADATA
    "OWS_EXTENT" "15.6304628873 37.9166095352 16.2989955741 38.4207238629"
    "WMS_SRS" "EPSG:4258 EPSG:3034 EPSG:3035 EPSG:3857 EPSG:4326"
END
Related Question