找出边界框是否在 openlayers 3 中的矢量图层内

Question

我有一个矢量图层，其中包含许多多边形以在 OSM 地图上勾勒出感兴趣的区域。用户可以在地图上绘制边界框以获取有关某个感兴趣区域的更多信息。我需要检查的是用户绘制的边界框是否在我的矢量图层中的多个多边形之一内。 这在openlayers 3中可能吗？我发现我可以比较范围，但我的矢量图层的范围是整个地图。我需要确定盒子是否位于较小的区域内。

设置包含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...
}

我尝试比较范围，挖掘区域的坐标，但它是一个数组，数组，数组......有谁知道检查 bbox 是否在一个多边形内的好方法区域层？我正在使用 OpenLayers 3.17.1

在 openlayers-2 中是这样完成的：

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

}

提前致谢！

Answer 1

这样的？

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 */
        }
    }
}