Openlayers 3 connecting to a wms feed with a different projection

Question

I am trying to incorporate a wms feed in the British national grid projection (EPSG:27700) into a openlayers 3 project. I initially had used this wms layer in an openlayers 2 application using the following syntax:

new OpenLayers.Layer.WMS(
        "ukimage",
        "http://www.linktowms",
        {
            "LAYERS": 'ukimage',
            "STYLES": '',
            format: state.image_format
        },
{
    buffer: 0,
    displayOutsideMaxExtent: true,
    isBaseLayer: true
}
);

But I am having trouble converting this over to openlayers 3. I first tried setting the map projection to British national grid (view: new ol.View({ projection: 'EPSG:27700'}) as I had in the openlayers 2 app, but this produced the error

TypeError: h.B is not a function 

and a white map.

When I try and use proj4 to convert the projection to EPSG:3857 as described here: http://openlayers.org/en/v3.15.1/doc/tutorials/raster-reprojection.html I get the same error:

TypeError: h.B is not a function 

and again a white map.

my wms request is generally a varient of:

new ol.layer.Image({
      source: new ol.source.TileWMS({
        url: 'http://www.linktowms',
        params: {'LAYERS': 'ukimage'},
      })
    }),

(I tried adding projection but that didn't help)

I am trying to work out if the image is even getting loaded from the WMS feed, but the syntax seems to have changed significantly from openlayers 2, instead of the properties and functions that have rather descriptive names, there are a now lots of short functions with names like Ua and Ig, which leaves me a bit in the dark as to what's actually going on when I try and inspect the layer with firebug.

I don't mind what projection the application is in, as I can re-project my other layers to match the basemap, so basically any way of using this EPSG 27700 WMS layer in openlayers 3 would be great.

Answer 1

You can see a demo in action to illustrate.

The thing to keep in mind are:

• load Proj4js library and the local EPSG code proj4js declaration from http://epsg.io website

• get the ol.proj.projection object and set it extent (for managing map resolution)

  var extent = ol.proj.transformExtent([-8.74, 49.81, 1.84, 60.9], 'EPSG:4326', 'EPSG:27700');
  var projection = ol.proj.get('EPSG:27700');
  projection.setExtent(extent);
  

• set the layer extent

• set view center using local projection admitting your map is using the same local projection as your layer, extent in map is optional here.

  new ol.View({
    projection: projection,
    center: ol.proj.fromLonLat([-2.24347, 54.88787], projection),
    extent: extent,
    zoom: 1
  })
  

Answer 2

I usually use a function to create WMS Layers to avoid redundances.

function Tile(options){
    return new ol.layer.Tile({
        name: options.name || 'Layer',
        visible: options.visible === false ? false : true,
        source: new ol.source.TileWMS({
            crossOrigin: 'anonymous',
            url: options.url,
            params: {
                FORMAT : options.format || 'image/png', 
                VERSION : options.version || '1.1.0',
                tiled : options.tiled === false ? false : true,
                LAYERS : options.layers || '',
                STYLES : options.styles || '',
            }
        })
    });
}

And you can use it like that :

var myLayer = Tile({
    name : 'myWMSLayer',
    layers : 'myLayer',
    url : 'myWMSURL',
});