OpenLayers 3 Style - text label with size not depending on scale

Question

I try to label polygons from a WFS-Source with an attribute. This works fine, but my problem is that the size of this label is scale depending. It has the same size on every scale. But i want it to become smaller/bigger if i zoom out/in the map. Like the polygons become smaller zooming out the map. How can i get this with Openlayers?

This is the problem in pictures:

Here is the code i use:

var Flst_GbR = new ol.layer.Vector({
        source: new ol.source.Vector({
        loader: function(extent) {
            $.ajax('http://192.168.10.9:8096/geoserver/IIS_Becker/wfs', {
                type: 'GET',
                data: {
                    service: 'WFS',
                    version: '2.0.0',
                    request: 'GetFeature',
                    typename: 'IIS_Becker:Flurstücke_GbR',
                    srsname: 'EPSG:2398',
                    outputFormat: 'application/json'
                }
            }).done(function(response) {
                Flst_GbR.getSource().addFeatures(new ol.format.GeoJSON().readFeatures(response));
            });
        },
        strategy: ol.loadingstrategy.all,
        projection: customprojection
        }),
        style: function(feature, resolution) {
            var stylestößen = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(255,0,0,1.0)',
                    width: 1
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(253,184,184,0.5)'
                }),
                text: new ol.style.Text({
                    text: feature.get('flurstueck')
                })
            });
            var stylegörschen = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(255,128,0,1.0)',
                    width: 1
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(255,193,132,0.5)'
                })
            });
            if ( feature.get('gemarkung') == 'Stößen') {
                return [stylestößen];
            } else {
                return [stylegörschen];
            }
        }
    });

How do i have to change the code on the ol.style.Text-object to get it work?

Answer 1

I used this formula

    var zoom = map.getView().getZoom();
    var dsize = (100 / resolution) * zoom;
    var size = Math.round(dsize) + "px" //dom.size.value;

Answer 2

Inside your style function, you have access to the resolution parameter. Resolution tells you how many map units one pixel represents. This number changes depends on how zoomed in you are (as 1px could be 1m or 1km).

You can use that to calculate the correct font size you need. You'll have to figure out the best values yourself, depending on your scale and use case. But that is a simple matter of finding the right multiplier to scale the textsize.

var textsize = 10 / resolution // 10 being the default font size in px

And inside the style text definition:

            text: new ol.style.Text({
                text: feature.get('flurstueck'),
                font: textsize + 'px Calibri,sans-serif'
            })

Be aware that the resolution value available in the style function might not be suitable for every coordinates in every projection (especially ones that are not equidistant). You can use ol.proj.getPointResolution() to calculate a resolution that is true for specific coordinates if necessary.

It might also be a good idea to have some additional constraints on the textsize calculation, to prevent the textsize becoming too large when zoomed in or unreadably small when zoomed out.

Answer 3

ol.style.Text has a font property which you can set to a different font size depending on the resolution parameter of your style function.