поместить текст в середине нарисованных областей Open Layer

Question

У меня есть файлы kml с полигонами. Каждый набор полигонов (каждый кмль) имеет имя. Когда я показываю полигоны на карте, я также показываю их имя.

Проблема в том, что один и тот же текст появляется в каждом многоугольнике, хотя я хотел бы, чтобы текст появлялся только один раз, в середине всех многоугольников.

function addMarkedArea(markedArea){

    var text =  markedArea.areaMapa == null?  markedArea.name : markedArea.name + '\n' + markedArea.areaMapa + ' ha'
    features = new ol.format.KML({
        extractStyles: false
    }).readFeatures(markedArea.kml, {
        dataProjection: 'EPSG:4326',
        featureProjection: 'EPSG:3857'
    });

    var KMLvectorSource = new ol.source.Vector({
        features: features
    });

    var KMLvector = new ol.layer.Vector({
        name: markedArea.Id,
        source: KMLvectorSource,
        style: function(feature, resolution) {
            return new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: markedArea.color,
                    width: 3
                }),
                text: styleText(text, markedArea.color).text
            });
        }
    });

    map.getView().fit(KMLvector.getSource().getExtent(), map.getSize());
    map.addLayer(KMLvector);
}

var styleText = function(text, color) {
    var zoom = map.getView().getZoom();
    var font = (zoom )
    return {
        text: new ol.style.Text({
            font: font+'px Arial',
            fill: new ol.style.Fill({
                color: color
            }),
            stroke: new ol.style.Stroke({
                color: '#000',
                width: 3
            }),
            textAlign: "center",
            textBaseline: "middle",
            text:  text,
            overflow: true
        })
    }
}

Можно ли это сделать?

Answer 1

Разбить стиль на массив и задать текстовой части точечную геометрию

    style: function(feature, resolution) {
        return [
          new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: markedArea.color,
                width: 3
            })
          }),
          new ol.style.Style({
            geometry: new ol.geom.Point(ol.extent.getCenter(KMLvector.getSource().getExtent())),
            text: styleText(text, markedArea.color).text
          })
        ];