How do Bounds work in OpenLayers 3?

Question

Does the concept of OpenLayers.Bounds from OpenLayers 2.x still exist in OpenLayers 3? How has it changed, and what is its new name?

Maxine

var mapExtent = map.getView().calculateExtent(map.getSize()); – Affiant

Answer 1

UPDATE: OL4: https://openlayers.org/en/latest/apidoc/ol.html#.Extent

It seems that the new word for 'bounds' or 'bounding box' (BBOX) is 'extent'. See:

• http://openlayers.org/en/v3.20.1/apidoc/ol.extent.html
• http://openlayers.org/en/v3.20.1/apidoc/ol.View.html#fitExtent
• http://openlayers.org/en/v3.20.1/apidoc/ol.source.Vector.html#getExtent

One way to find out things at the moment is to run searches in the OL3 repo, for example: https://github.com/openlayers/ol3/search?p=3&q=BBOX&type=Code

Fran

I can give you some rep for those questions :), that new tag will prove quite useful as OL3 is not compatible with OL3, for the moment both must be used otherwise no one will see those questions. – Fran

I mean 'as OL3 is not compatible with OL2' – Fran

Answer 2

Did'nt found any documentation about this feature but Extent seems to work :

var vectorSources = new ol.source.Vector();
var map = new ol.Map({
  target: map_id,
  layers: [
    new ol.layer.Tile({
      source: ol.source.OSM()
    }),
    new ol.layer.Vector({
      source: vectorSources
    })
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 12
  })
});

var feature1 = new ol.Feature({
  geometry: new ol.geom.Point(coords)
});
vectorSources.addFeature(feature1);
var feature2 = new ol.Feature({
  geometry: new ol.geom.Point(coords)
});
vectorSources.addFeature(feature2);
map.getView().fitExtent(vectorSources.getExtent(), map.getSize());

The method vectorSources.getExtent() can also be replaced by any Extent object, like this :

map.getView().fitExtent([1,43,8,45], map.getSize());

Since OpenLayer 3.9, the method has changed :

map.getView().fit(vectorSources.getExtent(), map.getSize());

Chesterfield

Thanks. This seems to be the extent of the documentation right now: openlayers.org/en/v3.0.0/apidoc/ol.extent.html – Maxine

Answer 3

Just to add a little example to the answer: Bounds is now called "extent" and it's not a sophisticated Object/Class anymore, but merely an array of four numbers. There're a bunch of helper functions for transformation and so on in "ol.extent". Just a little example on how to to a transformation:

var tfn = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
var textent = ol.extent.applyTransform([6, 43, 16, 50], tfn);

var textent = ol.proj.transformExtent([6, 43, 16, 50], 'EPSG:4326', 'EPSG:3857');

I could not find an API-Doc so far in http://ol3js.org/en/master/apidoc so you have to read the source to get information.

The API-Docs have been completed since the BETA. So you'll find it now.

As mentioned in the comments, the correct API-function is ol.proj.transformExtent() now.

Shatterproof

I think ol.extent.transform has been renamed to ol.extent.applyTransform – Theophany

The function to use for transforming an extent is ol.proj.transformExtent. – Pew

Thank you. At the time of writing this function did not exist. :-) – Shatterproof

Answer 4

On OpenLayers 3.17.1 and after trying various thing I was able to set the bounds in two different ways:

A) As @Grmpfhmbl mentioned, using ol.proj.transformExtent function like below:

var extent = ol.proj.transformExtent(
    [-0.6860987, 50.9395474, -0.2833177, 50.7948214],
    "EPSG:4326", "EPSG:3857"
);

map.getView().fit( extent, map.getSize() );

B) A little bit unusual, using ol.geom.Polygon like this:

// EPSG:3857 is optional as it is the default value
var a = ol.proj.fromLonLat( [-0.6860987, 50.9395474], "EPSG:3857" ),
    b = ol.proj.fromLonLat( [-0.2833177, 50.7948214], "EPSG:3857" ),
    extent = new ol.geom.Polygon([[a, b]]);

map.getView().fit( extent, map.getSize() );

Anneliese