Openlayers 3 zoom in aggregate

Question

I use openlayers 3 to create a map with vector features on top. So far, so good.

I have several vector layers grouped into a variable called projecten.

var projecten = new ol.layer.Group({ title: 'Projecten', layers: [ new ol.layer.Vector({ title: 'EVZ Den Dungen', source: new ol.source.GeoJSON( /** @type {olx.source.GeoJSONOptions} */ ({ object: EVZDenDungen, projection: 'EPSG:3857' })), style: function(feature, resolution) { return lookup[feature.get('landschapselement')]; } }), new ol.layer.Vector({ title: 'EVZ Croy', source: new ol.source.GeoJSON( /** @type {olx.source.GeoJSONOptions} */ ({ object: EVZCroy, projection: 'EPSG:3857' })), style: function(feature, resolution) { return lookup[feature.get('landschapselement')]; } }), new ol.layer.Vector({ title: 'Natuurcompensatie Gasselsbroek', source: new ol.source.GeoJSON( /** @type {olx.source.GeoJSONOptions} */ ({ object: NatuurcompensatieGasselsbroek, projection: 'EPSG:3857' })), style: function(feature, resolution) { return lookup[feature.get('landschapselement')]; } }), new ol.layer.Vector({ title: 'Ebben', source: new ol.source.GeoJSON( /** @type {olx.source.GeoJSONOptions} */ ({ object: Ebben, projection: 'EPSG:3857' })), style: function(feature, resolution) { return lookup[feature.get('landschapselement')]; } }), new ol.layer.Vector({ title: 'Zionsburg', source: new ol.source.GeoJSON( /** @type {olx.source.GeoJSONOptions} */ ({ object: Zionsburg, projection: 'EPSG:3857' })), style: function(feature, resolution) { return lookup[feature.get('landschapselement')]; } }) ] }) 

Now I want to somehow scroll through the projection variables, scroll through their layers one by one, get the size of each function layer and stop when the last level is reached. Then I want to zoom in to this extent.

This is my main setup (I am not good at javascript and loops):

 projecten.getLayers() for (var i = 0, ii = layers.length; i < ii; ++i) { layer = layers[i]; ol.extent.boundingExtend(extent, layer.getBounds()); } map.getView().fitExtent(extent,map.getSize()); 

Any ideas on how I can make this work?

Answer 1

You should be able to do this:

 var extent = ol.extent.createEmpty(); projecten.getLayers().forEach(function(layer) { ol.extent.extend(extent, layer.getSource().getExtent()); }); map.getView().fitExtent(extent, map.getSize()); 

Use the ol.extent.createEmpty() function to initialize your degree. Then scroll through the layer collection and use ol.extent.extend() to create a volume that includes all the functions in all of your vector sources. Finally, come to this kind of map.

There are a few things here. The group.getLayers() method returns ol.Collection layers. This is similar to regular JavaScript Array , except that it is observable. You can use the collection.forEach() method to repeat each layer in the collection.

Also note that you must call source.getExtent() to get the amount of all currently loaded objects in the source.

Finally, the links above apply to version 3.5.0 and higher. You will need to adapt your code to work with ol.source.Vector objects instead of the experimental (and now deleted) ol.source.GeoJSON objects. See release notes for 3.5.0 for details on upgrading to the new vector API.