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

openlayers

I have an ol.source.ServerVector with several polygons drawn as features. I'd like for the map to zoom to the extent of the selected polygon upon selection, but I'm hitting a wall.

I was able to find this post that helped with zooming to all of the features in the source, but not the selected feature specifically

https://stackoverflow.com/questions/23682286/zoomtoextent-openlayers-3

var extent = source.getExtent();
map.getView().fitExtent(extent,map.getSize());

That works great to zoom to all of my polygons, but I can't seem to find any way to only use the selected feature's extent.

Best Answer

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.

Related Solutions

[GIS] Remove selected feature Openlayers 3

Yes, you can remove selected feature.

var draw;
var featureID = 0;
var singleClick;
var selectedFeatureID;

// First some change in this function.

function addInteraction() {
   map.removeInteraction(singleClick);

      draw = new ol.interaction.Draw({
      source: source,
      type: ("LineString")
  });

 // Create drawend event of feature and set ID to feature

  draw.on('drawend', function (event) {
    featureID = featureID + 1;
    event.feature.setProperties({
        'id': featureID
    })
 })
   map.addInteraction(draw);
 }

Then Change in select Function as follow:

 function addSelect() {
    map.removeInteraction(draw);
    singleClick = new ol.interaction.Select();
    map.addInteraction(singleClick);

     singleClick .getFeatures().on('add', function (event) {
     var properties = event.element.getProperties();
     selectedFeatureID = properties.id;       
    });
 }

Then call this function on REMOVE button click

 function removeSelectedFeature() {
   var features = source.getFeatures();
     if (features != null && features.length > 0) {
         for (x in features) {
            var properties = features[x].getProperties();
            console.log(properties);
            var id = properties.id;
            if (id == selectedFeatureID) {
              source.removeFeature(features[x]);
               break;
            }
          }
        }
      }

With this code you can remove any selected feature. If it is Line,Point, Polygon etc.

[GIS] Openlayers 3 Cluster Strategy not projecting properly

Here's an example using OpenLayers version 3.6.0 http://jsfiddle.net/t3n55fzq/

This is the part that allows you to reproject features during read.

var originalSource = new ol.source.Vector({
    features: (
        new ol.format.GeoJSON()).readFeatures(geojsonObject,{
            dataProjection:'EPSG:4326',
            featureProjection:'EPSG:3857'
        }          
    )
});

You should also look at defining your projections inside the GeoJSON. e.g.

'crs': {
    'type': 'name',
    'properties': {
      'name': 'EPSG:4326'
    }
  }

If you're loading in from a external source try:

var originalSource = new ol.source.Vector({
    url: 'test.geojson',
      format: new ol.format.GeoJSON({
         defaultDataProjection :'EPSG:4326', 
         projection: 'EPSG:3857'
   })
});

Best Answer

Related Solutions

[GIS] Remove selected feature Openlayers 3

[GIS] Openlayers 3 Cluster Strategy not projecting properly

Related Question