Polygon Selection Openlayers 3

How can you select features with a polygon draw? It can be done with a square box select as per the examples. I'm wondering if there's a way to trigger an event after creating the

Solution 1:

For such actions you need to use either JSTS topology library or TURF.js lib. In my personal opinion JSTS is much more complete and elegand solution. Get some info here. For the time being, author is making changes and is about to release an official ol3 compatitable version so keep informed.

I ll give you an example using an older version of JSTS which does the job. (check the external sources of the provided fiddle to verify the JSTS lib files you need to load). If you have the time check if there are any new links for the latest JSTS version and let us know if you have any news.

here is the logic:

1. Create 3 vector layers. One for the layer you want to query from, one for placing your free hand drawing and one more to place your highlights.

2. Create a draw interaction and attach a 'drawend' event on it.

3. Use the JSTS to find geometries intersecting with the digitised geometry.

So here is your code and a fiddle to make your life easier.

varwaterAreasVecSource=newol.source.Vector({
    loader: function (extent) {
        $.ajax('http://demo.opengeo.org/geoserver/wfs', {
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.1.0',
                request: 'GetFeature',
                typename: 'water_areas',
                srsname: 'EPSG:3857',
                bbox: extent.join(',') + ',EPSG:3857'
            }
        }).done(loadFeatures)
            .fail(function () {
        alert("fail loading layer!!!")
        });
    },
    strategy: ol.loadingstrategy.bbox
});

function loadFeatures(response) {
    formatWFS = newol.format.WFS(),
    waterAreasVecSource.addFeatures(formatWFS.readFeatures(response));
}

varwaterAreasVector=newol.layer.Vector({
    source: waterAreasVecSource,
    style: newol.style.Style({
        stroke: newol.style.Stroke({
            color: 'rgba(0, 0, 255, 1.0)',
            width: 2
        })
    })
});
varraster=newol.layer.Tile({
  source: newol.source.OSM({})
});

varmyDrawSource=newol.source.Vector({wrapX: false});

varmyDrawVector=newol.layer.Vector({
  source: myDrawSource,
  style: newol.style.Style({
    fill: newol.style.Fill({
      color: 'rgba(255, 255, 255, 0.5)'
    }),
    stroke: newol.style.Stroke({
      color: '#ffcc33',
      width: 2
    }),
    image: newol.style.Circle({
      radius: 7,
      fill: newol.style.Fill({
        color: '#ffcc33'
      })
    })
  })
});

varmySelectionsSource=newol.source.Vector({wrapX: false});

varmySelectionsVector=newol.layer.Vector({
  source: mySelectionsSource,
  style: newol.style.Style({
    fill: newol.style.Fill({
      color: 'rgba(255, 0, 0, 0.5)'
    }),
    stroke: newol.style.Stroke({
      color: 'rgba(255, 0, 0, 1)',
      width: 2
    }),
    image: newol.style.Circle({
      radius: 7,
      fill: newol.style.Fill({
        color: '#ffcc33'
      })
    })
  })
});

varmap=newol.Map({
  layers: [raster, myDrawVector,waterAreasVector,mySelectionsVector],
  target: 'map',
  view: newol.View({
    center: [-8908887.277395891, 5381918.072437216],
    maxZoom: 19,
    zoom: 12
  })
});


vardraw=newol.interaction.Draw({
      source: myDrawSource,
      type: "Polygon",
    });

map.addInteraction(draw);

draw.on('drawend',function(e){
myDrawSource.clear();
mySelectionsSource.clear();
varextent= e.feature.getGeometry().getExtent();
vargeomA= e.feature.getGeometry();
waterAreasVecSource.forEachFeatureInExtent(extent,function(aa){
console.log("forEachFeatureInExtent",aa.getGeometry());
if (polyIntersectsPoly(geomA,aa.getGeometry()) === true){
mySelectionsSource.addFeature(aa);
}
});
});



/**
* check whether the supplied polygons have any spatial interaction
* @{ol.geometry.Polygon} polygeomA 
* @{ol.geometry.Polygon} polygeomB 
* @returns {Boolean} true||false
*/
function polyIntersectsPoly(polygeomA, polygeomB) {
 vargeomA=newjsts.io.GeoJSONReader().read(newol.format.GeoJSON().writeFeatureObject(
        newol.Feature({
            geometry: polygeomA
       })
   )
   ).geometry;
vargeomB=newjsts.io.GeoJSONReader().read(newol.format.GeoJSON().writeFeatureObject(
        newol.Feature({
            geometry: polygeomB
        })
    )
    ).geometry;
return geomA.intersects(geomB);
};