将文本放在绘制区域的中间 Open Layer

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
          })
        ];

将文本放在绘制区域的中间 Open Layer

put text in the middle of drawn areas Open Layer

openlayers