3

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: Zoom in - small labels Zoom out - big labels

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?

2

I used this formula

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

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.

0

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.

  • Thanks for your answer! Unfortunatly it doesn´t work. I added the font property to the ol.style.Text, but the result is still the same. What do you mean by "depending on the resolution parameter of the style function"? I couldn´t find a resultion parameter on ol.style.Style in the api. – Astrid Dec 15 '16 at 14:12
  • I meant the resolution as in style: function(feature, resolution) { of your above code. And in this function you have a new ol.style.Text which accepts a font property as you can see at the link I provided. – nachtigall Dec 15 '16 at 19:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.