How to use OpenLayers 3 with Proj4js

Question

I'm working on a map viewer project and used openlayers 2 before this. Now I have to use OpenLayers 3 and map viewer app should support many different projections because I have wms and wfs layers from different sources and projections. I've found examples that use openlayers2 and proj4js. But I couldn't find explicit example for using ol3 and proj4js. What is your suggestion?

Answer 1

It seems that sometimes, like when using OpenLayers 3 and proj4 in Angular 2 using webpack, one needs to explicitly tell OL3 where to find it:

import * as proj4 from "proj4";
import * as ol from "openlayers";
...
ol.proj.setProj4(proj4);

When all is fine, then after defining a projection, ol.proj.get should return it:

proj4.defs("EPSG:28992", "...");
if (!ol.proj.get('EPSG:28992')) {
    console.error("Failed to register projection in OpenLayers");
    ...
}

Answer 2

This example demonstrates how to use proj4js with ol3: http://openlayers.org/en/v3.3.0/examples/wms-image-custom-proj.html

Basically using proj4js in OpenLayers 3 works transparently. You need to throw the srs definition at proj4js first, and then you can use the projection right away:

proj4.defs("EPSG:21781","+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel +towgs84=660.077,13.551,369.344,2.484,1.783,2.939,5.66 +units=m +no_defs");
var zurich = ol.proj.transform([8.55, 47.366667], 'EPSG:4326', 'EPSG:21781');