2

I am working with OpenLayers 3. I used a dropdown menu to select a feature and I would like to zoom to the extent of the selected feature. At the moment, it is possible to select by the dropdown menu but not to zoom. Is there any way to fix this?

    function selectByDivision(){ 
            var divisionUser = document.getElementById('division-select').options[document.getElementById('division-select').selectedIndex].text;


            var selectedFeatures = select.getFeatures();                                
            selectedFeatures.clear();               
            var features = lyr_divisions3857.getSource().getFeatures();

            if(features){
                  for(i=0;i<features.length;i++){
                                            if(features[i].get('DIVISION')==divisionUser){                                              

                                                        feature= features[i];                                                                                                                   
                                                        selectedFeatures.push(feature);                                                             
                                                                                                                                                                                //map.zoomToExtent(features[i].getDataExtent());

                                                        var polygon = selectedFeatures.getFeatures();
                                                        var extent = polygon.getGeometry();

                                                        var size = (map.getSize());
                                                        view.fit(
                                                        extent,
                                                        size
                                                        );

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

First thing first, let's make the concept clear:

I assume, your select variable holds a reference to an instance of ol.interaction.Select. If you call its getFeatures method, you will get an ol.Collection object holding your selected features internally. It is absolutely valid to call methods on it like clear, or push.

However, collection objects do not have a getFeatures method. To get the internal array the collection is holding, you have to call its getArray method instead:

var polygon = selectedFeatures.getArray();

Which returns a simple array. Now I assume, your function makes sure, this collection can only hold one member at the time you access it. An array though is an array with only one member, too, therefore you must access it with an index value:

var extent = polygon[0].getGeometry();

Now that you grabbed a reference to a geometry object correctly, it is still an instance of ol.geom.Geometry, not an extent (an array with four coordinates). As the method fit needs an extent, you can calculate it from the geometry with its getExtent method. Thus, you have to modify your line like this:

var extent = polygon[0].getGeometry().getExtent();

UPDATE:

You can call fit with a geometry object, therefore calculating the geometry's extent is not necessary.

  • What should be done in case of multiple features inside select interaction? So there are 10 features selected on the map, then how should we suppose to zoom to that extent? – Suraj Sep 16 '17 at 7:01
  • found solution to zoom to extent of features as well. This is how its done var extent = features[0].getGeometry().getExtent().slice(0); features.forEach(function(feature){ ol.extent.extend(extent,feature.getGeometry().getExtent())}); source:stackoverflow.com/questions/30018786/… – Suraj Sep 16 '17 at 7:30
5

Using fit will set the view of the map to fit the geometry being used.

map.getView().fit(feature.getGeometry(), map.getSize())

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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