0

I have a function where I calculate the coordinates of the bounding box:

    map.on('moveend', function (evt) {

        let bbox = map.getView().calculateExtent(map.getSize());
        console.log(bbox);

        let bbox28992 = bbox.ol.proj.transform('EPSG:3857', 'EPSG:28992');
        console.log(bbox28992);

    });

The first part works fine and gives the following array in the console:

[480243.8079264377, 6722365.677977535, 491537.37885557255, 6739353.807513916]

Then I want to transform these coordinates to the EPSG:28992 coordinate system but I cannot get it to work.

How can I fix this?

1 Answer 1

1

Try

ol.proj.transformExtent(bbox, 'EPSG:3857', 'EPSG:28992')

The above answer supposes you already loaded proj4js and corresponding proj4js declaration for 'EPSG:28992'.

We also don't know how you load the OpenLayers and other JavaScript libraries: via a bundler like webpack or just using something like a <script src="..."></script>

Edit: a complete working sample

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.2/proj4.min.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      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'); 
      ol.proj.proj4.register(proj4);

      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([0.1757812, 52.4292222]),
          zoom: 9
        })
      });
      map.on('moveend', function (evt) {

          let bbox = map.getView().calculateExtent();
          console.log(bbox);

          let bbox28992 = ol.proj.transformExtent(bbox, 'EPSG:3857', 'EPSG:28992')
          console.log(bbox28992);
      });

    </script>
  </body>
</html>
4
  • ... and tthat does not necessarily transform just the bottom left and top right coordinates supplied, if the projections are not parallel it returns an extent in which all 4 corners of the EPSG:3857 bbox will fit (which is probably what was wanted).
    – Mike
    Jun 2, 2021 at 12:19
  • I load openlayers via scripts. The standard coordinate system is 3857. When i try the following code: map.on('moveend', function (evt) { let bbox = map.getView().calculateExtent(map.getSize()); console.log(bbox); let bbox28992 = ol.proj.transformExtent(bbox, 'EPSG:3857', 'EPSG:28992') console.log(bbox28992); });, It gives the following error: Uncaught TypeError: Cannot read property 'getCode' of null Jun 2, 2021 at 12:32
  • You can find the full code via: github.com/HASUniversity/BO_gem_Steenbergen.git Jun 2, 2021 at 12:33
  • You will need to include the proj4js library (see github.com/proj4js/proj4js). Then add the definition of EPSG:28992 from epsg.io/28992 and (as you have ol.js version 6.5.0) register it: 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'); ol.proj.proj4.register(proj4);
    – Mike
    Jun 2, 2021 at 13:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.