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

Question

Внутри отмеченной области я пишу текст.Когда я уменьшаю масштаб, текст выходит за пределы области и исчезает.Есть ли способ предотвратить это?

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

Ниже часть моего кода.

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

    var newVector = new ol.layer.Vector({
        name: areaIncra.farmId,
        source: kmlVector,
        style:   new ol.style.Style({
          stroke: new ol.style.Stroke({
              color: 'red',
              width: 3
          }),
          text: styleText('Text to show').text
      })
    });

Answer 1

Для того, чтобы стиль был пересчитан, он должен быть функцией

    style: function(feature, resolution) { return new ol.style.Style({
      stroke: new ol.style.Stroke({
          color: 'red',
          width: 3
      }),
      text: styleText('Text to show').text
  }); }

Вы также можете установить overflow: true на ol.style.Text https://openlayers.org/en/v4.6.5/apidoc/ol.style.Text.html

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

var newVector = new ol.layer.Vector({
source: new ol.source.Vector(),
style: function(feature, resolution) {
    return new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 3
        }),
        text: styleText('Text to show').text
    });
}
});

var map = new ol.Map({
layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM(),
    }),
    newVector
],
target: 'map',
view: new ol.View({
    center: [0, 0],
    zoom: 2
})
});

map.addInteraction(new ol.interaction.Draw({
  source: newVector.getSource(),
  type: 'Polygon',
}));

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>