Creating clusters directly from a GeoJSON APIRest response in OpenLayers?

Question

I am using OpenLayers latest version. Using a APIRest, I fetch a PostGIS endpoint and get a response in GeoJSON format.

Then this is used to create a source and a layer :

....
const response = await myfetch.json()
const opeGeoJsonFormat = new GeoJSON({
 dataProjection: "EPSG:2154",
 featureProjection: "EPSG:3857",
})
...
const ope = opeGeoJsonFormat.readFeatures(response)

const opeSource = new VectorSource({
  features: ope,
})

opeCouche = new VectorLayer({
  source: opeSource,
  style: styleOpeCouche,
  title: "opérations",
})

From the response, I would like to create clusters. Here is what I have done :

 const featuresPoint = []
 ope.forEach(operation => {
  const coordOpeTableau = operation.getGeometry().flatCoordinates
  const polygon = new Polygon(
    coordOpeTableau,
    "XY",
    coordOpeTableau.length - 1
  )
  const pointInterieur = polygon.getInteriorPoint()
  featuresPoint.push(new Feature(pointInterieur))
})   

Then I have created a cluster source and a layer. So far so good.

I wonder if there is a way of creating the clusters points without using new Polygon class, since the geometries returned by the response are multipolygon? I can't do it actually, but I am not an expert developer.

Answer 1

The simplest way to get centroid directly from GeoJSON feature seems to be to use turf.js library and it's turf.centroid method.

Relevant part of the code would then be (assuming data is in EPSG:4326 and features are in EPSG:3857 CRS):

const formatGeoJSON = new ol.format.GeoJSON({
  dataProjection:'EPSG:4326',
  featureProjection: 'EPSG:3857'
});
var featuresPoint = [];

turf.featureEach(response, function(feature) {
  const centroid = turf.centroid(feature);
  const pointFeature = formatGeoJSON.readFeature(centroid);
  featuresPoint.push(pointFeature);
});