Find out if a bounding box is within a vector layer in openlayers 3

Question

I have a vector layer that contains many polygons to outline areas of interest on an OSM map. The user can draw a bounding box on the map to get more information about a certain area of interest. What I need to check for is if the bounding box that the user draws is within one of the many polygons in my vector layer. Is this possible in openlayers 3? I am finding that I can compare extents, but the extent of my vector layer is the whole map. I need to find out if the box resides within a smaller area.

Setting up map and vector layer containing geojson:

map = new ol.Map({
        interactions: ol.interaction.defaults({
            keyboard: false,
            altShiftDragRotate: false
        }),
        target: 'create-export-map',
        view: new ol.View({
            projection: "EPSG:4326",
            //extent: [-180,-90,180,90],
            center: [44.4333, 33.3333],
            zoom: 4,
            maxZoom: 18,
        })
    })


    //add base layers
    var osm = new ol.layer.Tile({
        title: "OpenStreetMap",
        source: new ol.source.OSM({
            wrapX: false,
            noWrap: true,
            attributions: [
                new ol.Attribution({
                    html: '&copy ' +
                    '<a href="//www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.'
                }),

                ol.source.OSM.ATTRIBUTION
            ]

        })
    })

    map.addLayer(osm);

regionsSource = new ol.source.Vector({
        wrapX: false,
        noWrap: true,
    });


    regions = new ol.layer.Vector({
            name: 'regions',
            source: regionsSource,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(0,0,0,0)',
                    //opacity: 0.8,
                }),
                stroke: new ol.style.Stroke({
                    color: 'rgba(215, 63, 63, 0.8)',
                    width: 3.5,
                })
            }),

        })
    map.addLayer(regions);

$.getJSON(jsonfileURL, function(data){
        var geojson = new ol.format.GeoJSON();
        var features = geojson.readFeatures(data);
        regionsSource.addFeatures(features);
        var extent = regionsSource.getExtent();

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

//OL3 add bounding box selection layer
    bboxSource = new ol.source.Vector()
    bbox = new ol.layer.Vector({
        name: 'Select',
        source: bboxSource,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'blue'
            }),
            fill: new ol.style.Fill({
                color: [0, 0, 255, 0.05]
            })
        })
    });
    map.addLayer(bbox);

//Map control for dragbox - bounding box
var dragBox = new ol.interaction.DragBox({
        condition: ol.events.condition.primaryAction,
    });

    var translate;

    dragBox.on('boxend', function(e){
        var dragFeature = new ol.Feature({
            geometry: dragBox.getGeometry()
        });
        bboxSource.addFeature(dragFeature);
        map.removeInteraction(dragBox);
        translate = new ol.interaction.Translate({
            features: new ol.Collection([dragFeature])
        });

        var bounds = dragFeature.getGeometry().getExtent();
        filtering = true;

        // validate the selected extents
        if (validateBounds(bounds)) {
            setBounds(bounds);
        }
        else {
            unsetBounds();
        }

function validateBounds(bounds) {
    var regions, region;
    map.getLayers().forEach(function (l) {
        if (l.get('name') == 'regions')
            regions = l;
    })

    var valid_region = false;

    // check that we're within a polygon region.
    //This is where I'm stuck...
}

I've tried comparing extents, digging into the region's coordinates, but it's an array, of arrays, of arrays.... Does anyone know a good way to check if the bbox would be within one of the polygons in the Regions layer? I'm using OpenLayers 3.17.1

In openlayers-2 it was done like this:

for (i = 0; i < regions.length; i++){
        region = regions[i].geometry;
        if (extent.intersects(region)){
            valid_region = true;
        }

}

Thanks in advance!

Answer 1

Something like this ?

for (i = 0; i < regions.length; i++) {
    var region = regions[i];
    for (j = 0; j < region.getSource().getFeatures().length; j++) {
        var feature = regions.getSource().getFeatures()[j];
        if (ol.extent.intersects(extent,feature.getGeometry().getExtent())) {
            /* do whatever you want */
        }
    }
}