1
votes

I am trying to create a MultiPolygon from an extent in OpenLayers 5

I'm getting the extent through map interaction of dragBox

let extent = selectBox.getGeometry().getExtent();
    myService.select(extent);

select(extent){
let topLeft = extent.getTopLeft();
let topRight = extent.getTopRight();
let bottomLeft = extent.getBottomLeft();
let bottomRight = extent.getBottomRight();
};

The getters don't seem to be working, I get an error saying for example: "extent.getTopLeft is not a function"

Any help is appreciated

2

2 Answers

1
votes

Use something like this

import * as olExtent from 'ol/extent';

let extent = selectBox.getGeometry().getExtent();
    myService.select(extent);

select(extent){
let topLeft = olExtent.getTopLeft(extent);
let topRight = olExtent.getTopRight(extent);
let bottomLeft = olExtent.getBottomLeft(extent);
let bottomRight = olExtent.getBottomRight(extent);
};
1
votes

My solution...

import { getBottomLeft, getBottomRight, getTopLeft, getTopRight } from 'ol/extent';

Then in your event/function with the selected feature:

const bottomLeft = getBottomLeft(feature.getGeometry().getExtent());
const bottomRight = getBottomRight(feature.getGeometry().getExtent());
const topLeft = getTopLeft(feature.getGeometry().getExtent());
const topRight = getTopRight(feature.getGeometry().getExtent());
console.log(`bottomLeft = ${ bottomLeft }, bottomRight = ${ bottomRight }, topLeft = ${ topLeft }, topRight = ${ topRight }`);

Output:

bottomLeft = 961504.4946941067,5919028.71679848, bottomRight = 961504.4946941067,5919028.71679848, topLeft = 961504.4946941067,5919028.71679848, topRight = 961504.4946941067,5919028.71679848

You can refer to the official documentation: https://openlayers.org/en/latest/apidoc/module-ol_extent.html