将文本放在绘制区域的中间打开图层

Question

我有多边形的kml文件。每组多边形（每个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
          })
        ];