1

I want to position the label that defines the size of the side of the polygon exactly parallel to the line and not fall on the line above it ...

Here is a picture as it is now:

enter image description here

Now it is exactly on the line and after the orientation of the line in the middle also in the middle I just want it not to have contact with the line but to be inside or outside the polygon parallel to the line.

Here is the code I have managed to develop so far:

var line_stile = new ol.style.Style({
    fill: new ol.style.Fill({
        color: 'black'
    }),
    stroke: new ol.style.Stroke({
        color: 'blue',
        width: 10
    }),
    text: new ol.style.Text({
        font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
        placement: 'center',
        fill: new ol.style.Fill({
            color: 'black',
            width: 42
        })
    })
});

var layerLines = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [new ol.Feature({
            geometry: new ol.geom.LineString(coordinates),
            name: 'line'
        })]
    }),
});

dist = dist.toFixed(2);
var data = dist + " m";


line_stile.getText().setText(data);
layerLines.setStyle(line_stile);

map.addLayer(layerLines);
3
  • 2
    You need placement: 'line' – Mike Mar 11 at 9:51
  • Please do not write solutions in the area reserved for your question. A solution should be written in the area reserved for answers instead. It is fine to self-answer your question which a simple cut/paste should enable you to do for this one. – PolyGeo Mar 14 at 5:28
  • I'm sorry I fixed it now – CoderCoder42 Mar 14 at 7:27
1

SOLVED:
Thank you Mike I transcribed the solution:

 var line_stile = new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'black'
        }),
        stroke: new ol.style.Stroke({
            color: 'blue',
            width: 10
        }),
        text: new ol.style.Text({
            font: 'bold 19px "Open Sans", "Arial Unicode MS", "sans-serif"',
            placement: 'line',
            fill: new ol.style.Fill({
                color: 'white',
                width: 42
            })
        })
    });

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.