1

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

}

0

comparing extents should be enough, but instead of comparing the extent of the whole vector layer ( regions ) you'll have to compare the extents of each feature from it with you bbox:

regionsSource.forEachFeature(function(feature){
    var geom=feature.getGeometry();
    var regionExtent=geom.getExtent();
    var intersects= regionExtent.intersectsExtent(yourBBOXExtent); // boolean
});

now you can add it in a function and return intersects (boolean)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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