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?

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

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());

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.

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() );