Crop BYOC tile using OpenLayers WMS

[lde]

I am using BYOC with WMS in an image labelling platform based on OpenLayers 3 (for legacy reasons). My BYOC collection consists of a series of Planet tiles reprocessed into 0.05X0.05 degree, non-continguous tiles. I am trying to limit the amount of the imagery read in to what I think is roughly 1 processing unit, which is a bounding box that is 0.0128 degrees on a side. However, my request returns the portion of the tile falling outside that bbox also, and each request consumes about 7 processing units at the default zoom level (14).

I was therefore wondering if someone could kindly point me to how to correctly form the WMS with OpenLayers so that the imagery returned is confined to just the bounding box (as with the examples, which work for my collection). The portion of the OL code that defines the BBOX and makes the WMS request is here (it calls a true and false color version of the Planet image) :

var image_box = new ol.source.Vector({
    features: new ol.format.GeoJSON().readFeatures(gridJson2),
});  // gridJson2 is a simple geojson polygon
var bbox = image_box.getFeatures()[0].getGeometry().getExtent();
var bbox = extent.join(',');  // extent to string format

var SHUB_INSTANCE_ID = imageAttributes[0];
var startdate = enddate = imageAttributes[3];
for (var i = 0; i < DESCRIPTION.length; i++) {
    imageLayer[i] = new ol.layer.Tile({
        zIndex: ZINDEX_BASE + i,
        visible:  visible,
        title: DESCRIPTION[i],
        source: new ol.source.TileWMS({
            url: `https://services.sentinel-hub.com/ogc/wms/${SHUB_INSTANCE_ID}`,
            params: {
                "LAYERS": COLORS[i], // Layer name form configuration utility
                "FORMAT": "image/png",
                "TIME": startdate + '/' + enddate,
                "BBOX": bbox,
                "TILE": true,
                "CRS": "CRS:84"
            }
        })
    });
    map.getLayers().getArray()[1].getLayers().push(imageLayer[i]);
    visible = false;
}

Any pointers on how to get this working properly would be much appreciated.

[z.cern (Ziga Cernigoj)]

Hey,

the bounding box (bbox parameter) is set by OpenLayers itself to the current view on the map just before the request is made, overriding the bbox parameter if it was set by users (Leaflet does the same thing).

There are 2 options with OpenLayers to limit the spatial extent of the data that is requested, regardless of the current view on the map or the bounding box.

One is to use extent parameter for TileLayer in the same format as the bbox parameter (described in the OpenLayers documentation).

The other one is to use geometry parameter for Sentinel Hub WMS request, with which you can set more complex geometries, not only a rectangle. This is described in Sentinel Hub documentation

I created a small example using this OpenLayers quickstart guide. The whole example is available at GitHub - zcernigoj/SHOpenLayersWMS
The code related to the question is in the main.js file. Layer shLayer1 uses the extent, layer shLayer2 uses geometry.

Hope this helps. If you have any additional question or still need help, don’t hesitate to ask.

Cheers

[lde]

Thanks very much for the response–I implemented the approach with the extent parameter, which works nicely (although I still have to figure out how to properly extract bounds from a geojson passed in from a wsgi script–the first 4 lines of my example are not working as I thought).

Much appreciated!