5

Here is a part of code,

draw = new ol.interaction.DragBox({
            /* dragbox interaction is active only if alt key is pressed */
            condition: ol.events.condition.altKeyOnly,
            /* style the box */
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: [0, 0, 255, 1]
                })
            })
        });
        /* add the DragBox interaction to the map */
        map.addInteraction(draw);

        draw.on('boxend', function (evt) {}

I googled but didn't find how will I do. I created a dragbox and added to map , I have some markers on the map. How I learn that dragbox contains markers or not ? Thanks for responses.

10

Okay, let's rock these features out of the DragBox!

There are three options I have found to extract those features from the extent of the DragBox.

Considerations and assumptions:

  • I couldn't extract the layer types (raster or vector) from the map.getLayers() object, so let's assume that we stored the feature layers in individual global variables.
  • The features are stored in a variable named featureLayer.
  • I changed the altKeyOnly condition to shiftKeyOnly to increase compatibility (in Linux pressing down the Alt key moves the active window around by default).

First method:

The first method is the most basic one as you can see in this fiddle: http://jsfiddle.net/GFarkas/L7xjb6yx/

  1. Make a shortcut variable:

    var features = featureLayer.getSource().getFeatures();
    
  2. Make an empty array for the matching points and loop through the features stored in the featureLayer variable:

    box.on('boxend', function() {
        var featuresinBox = [];
        for (var i=0;i<features.length;i++) {
    
  3. Check with the ol.extent.containsCoordinate() function if the actual point fits into the extent of the DragBox. If it fits, add it to the featuresinBox array:

    if (ol.extent.containsCoordinate(box.getGeometry().extent, features[i].getGeometry().getCoordinates())) {
        featuresinBox.push(features[i]);
    }
    

Second method:

The first method is very basic, it has the least chance to fail. However there are some helper functions in OpenLayers 3 written for feature sources. One of these functions is called forEachFeature(), which will loop through the features for you. Fiddle: http://jsfiddle.net/GFarkas/fk1mqq25/1/

  1. Empty array for matching features:

    box.on('boxend', function() {
        var featuresinBox = [];
    
  2. Call the forEachFeature() function with an opt_this variable (in my case it's called e):

    featureLayer.getSource().forEachFeature(function(e) {
    
  3. Check. If it fits, it sits:

    if (ol.extent.containsCoordinate(box.getGeometry().extent, e.getGeometry().getCoordinates())) {
        featuresinBox.push(e);
    }
    

Third method:

The third method is the simplest, however it is in an experimental state as stated in the API doc. It uses an ol.source.Vector function, too, called forEachFeatureInExtent(). Use at your own risk. Fiddle: http://jsfiddle.net/GFarkas/b0d5mhyd/3/

  1. Empty array:

    box.on('boxend', function () {
        var featuresinBox = [];
    
  2. Call the forEachFeatureInExtent() function with the extent of the DragBox and push every feature which is in the extent in the empty array:

    featureLayer.getSource().forEachFeatureInExtent(box.getGeometry().extent, function (e) {
        featuresinBox.push(e);
    });
    

There is a fourth method which manually checks if the coordinate(s) of a feature is in the DragBox extent or isn't, but it's more complicated than the first method, which is safe enough to use in most environments.

Final notes:

  • The featuresinBox array contains the exact copy of the matching features. You can extract any information from them with the corresponding functions. I only used the .length attribute for the sake of simplicity in my fiddles.
  • For the fourth method: the ol.Extent object contains only the two opposite corners of the extent (as in every GIS approach, the first one is the lower left corner).
  • If you have more than one feature layer, then you have to loop through every one of them, to make them count in the "query".
  • If you have one or two dimensional features (lines or polygons), then you have to check every coordinates to make sure that they are completely in the DragBox (for them getGeometry().getCoordinates() returns an array of coordinates). The only exception is the forEachFeatureInExtent() function, but as it is in an experimental state, you shouldn't expect a 100% result.
  • Little extra for playing with feature selection: http://jsfiddle.net/GFarkas/b0d5mhyd/4/
  • Hey bro , thank you very much , your answer was awesome. – OzkanCiftci Sep 30 '14 at 7:25
  • My vote is +1 I am looking same thing for OpenLayer V2.x My requirement is i have few marker on the Map. User will be able to draw Polygon on the map. When Polygon draw completed then I want to fetch all the marker which are inside the Polygon. How can i achieve this kind of functionality? – imdadhusen Nov 21 '14 at 12:55
  • In OpenLayers 2, only the BBOX selection is implemented. If you want to select with a polygon, you have to write your own algorithm for it. You can build on OpenLayers.Handler.Polygon and OpenLayers.Filter.Spatial. You can find examples how to use them on the official page. If you get stuck with it, post a new question, we will be happy to help. – Gabor Farkas Nov 22 '14 at 12:26

protected by Aaron Jan 26 '15 at 17:39

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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