OpenLayers – Transform Coordinates to Custom Projection

coordinate systemopenlayers

I am trying to convert WGS84 coordinates (EPSG:4326) to Amersfoort RD New (EPSG:28992) with OpenLayers 3.

I declared EPSG28992:

Proj4js.defs["EPSG:28992"] = "+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +no_defs";

Got the projection from OL:

var EPSG28992 = new ol.proj.Projection('EPSG:28992');

Now I defined my transform function as:

function transformLatLong(lattitude, longitude)
{
    var coordinates = ol.proj.transform([longitude, lattitude], 'EPSG:4326', EPSG28992);
    console.log(coordinates);
}

The problem is that ol.proj.transform returns just the same long lat coordinates (i.e. did not transform anything).

What am I missing here?

Best Answer

You are using Proj4js 1.x series declaration whereas now OpenLayers 3 is using Proj4js 2.x series. For this reason, your projection is never registered within OpenLayers 3 and your coordinates reprojection fails.

More an addition that a direct answer but I'm wondering why you want to create a function for a one liner in OpenLayers 3 (but I don't know your context) whereas you can use ol.proj.fromLonLat function.

You will find below a sample including two approaches in one (through <script> tag or with a code declaration at the top of your own code)

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>Proj4 demo</title>
  <meta name=description content="">
  <meta name=viewport content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">
  <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
  <script src="https://epsg.io/28992.js"></script>
</head>
<body>
<script type="text/javascript">
  // Below code is optional if you use above url https://epsg.io/28992.js in script tag
  proj4.defs("EPSG:28992","+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.417,50.3319,465.552,-0.398957,0.343988,-1.8774,4.0725 +units=m +no_defs");
  console.log(ol.proj.fromLonLat([5.2, 52.25], 'EPSG:28992'));
</script>

</body>
</html>
Related Question