[GIS] OpenLayers 3 – zoom to a selected feature

openlayers

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

Best Answer

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

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

Related Solutions

[GIS] Disable selection of clusters OpenLayers 3

It's been a while but I stumbled upon the same problem. Your code helped me a lot, this is the solution I came up with (not that I'm using typescript, to convert it to JS remove the types after the variables):

Here is my code:

// create the select interaction
var select = new ol.interaction.Select({
    style: styleClick,
    condition: function (mapBrowserEvent) {
        // check if it is a click event
        if (!ol.events.condition.singleClick(mapBrowserEvent))
            return false;

        // collect all the features at the click event
        var features = [];
        self.map.forEachFeatureAtPixel(mapBrowserEvent.pixel, function (feature_, layer) {
            var features_ = feature_.get('features');
            // get all the features in that place
            for (let i = 0; i < features_.length; i++)
                features.push(features_[i]);
        });
        // check if one or more featres on this place (a cluster always contains multiple features!)
        if (features !== null && features.length > 1) {
            return false;
        } else if (features.length === 1) {
            // trigger the callback for the selected feature (best place I found, since the  ol.interaction.Select doesn't seem to have a change event)
            // YOURCALLBACK FKT (e.g. callback(features[0])
            return true;
        }

        // default exit rout
        return false;
    }
});
this.map.addInteraction(select);

[GIS] Openlayers 3 – Zoom to Selected Feature (Polygon)

if(this.array_.length){
    var extent = this.array_[0].getGeometry().getExtent();
    map.getView().fitExtent(extent,map.getSize());
}

This is inside of an on.('change:length') function, so the 'this' is the selected collection. It might not be the "correct" way to do it, but it seems to be working as desired, so hopefully this helps someone out down the line.

Best Answer

Related Solutions

[GIS] Disable selection of clusters OpenLayers 3

[GIS] Openlayers 3 – Zoom to Selected Feature (Polygon)

Related Question