2

I made the following code that assigns a style to the field labels.

Now I would like each word or group of words in the label to be a different color previously selected by the user.

For example if we write T: 34 / P34 / S3400MP.

Then T: 34 should be reddish P: 34 to be green S3400MP. to be orange

Here is the code I tried with but not with much luck:

constructii.getSource().forEachFeature(function (feature) {

    console.log(feature.getProperties());
    var style = new ol.style.Style({
        fill: new ol.style.Fill({
            color: color.color_constructii
        }),
        stroke: new ol.style.Stroke({
            color: [0, 0, 230],
            width: 3
        }),
        text: new ol.style.Text({
            font: '15px Calibri,sans-serif',
            fill: new ol.style.Fill({
                color: color.color_eticheta
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 1
            })
        })
    });

    var data = "";

    var numar_const = "<div style='color: red;'>" + feature.get('numar_const') + "</div>";
    var folosinta = "<div style='color: green;'>" + feature.get('folosinta') + "</div>";
    var suprafata = "<div style='color: black;'>" + feature.get('suprafata') + " MP.</div>";

    if ($('#etc_numar_const').is(":checked")) {
        data = data + "N:" + numar_const + "/";
    }
    if ($('#etc_folosinta_const').is(":checked")) {
        data = data + "F:" + folosinta + "/";
    }
    if ($('#etc_suprafata_const').is(":checked")) {
        data = data + "S:" + suprafata + "";
    }

    style.getText().setText(data);
    feature.setStyle(style);    

})

The error is: The html :( tags also appear on the tag and the respective word tag is not colored in the given color :(

UPDATE:

my constructii color function is here :

features.forEach(function (feature) {

    feature.setId(undefined);
    feature.getGeometry().transform('EPSG:31700', 'EPSG:3857');
    //ol.extent.extend(extent, feature.getGeometry().getExtent());

    var const_stile = new ol.style.Style({
        fill: new ol.style.Fill({
            color: color.color_constructii
        }),
        stroke: new ol.style.Stroke({
            color: [0, 51, 204],
            width: 1
        }),
        text: new ol.style.Text({
            font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
            placement: 'center',
            fill: new ol.style.Fill({
                color: 'white'
            })
        })
    });


    var data = "N:" + feature.get('numar_const') + "/F:" + feature.get('folosinta') + "/S:" + feature.get('suprafata') + " MP.";

    if (feature.get('layer') == "CONSTRUCTIE") {
        const_stile.getText().setText(data);
        feature.setStyle(const_stile);
    }

    vectorSource.constructii.clear();
    vectorSource.constructii.addFeatures(features);
    //console.log("features:");
    //console.log(features);
    map.getView().fit(extent);
})
1
  • 1
    I don't think there is any other solution than writing your colorful text to canvas and then displaying it using ol.style.Icon, taking canvas as img option source.
    – TomazicM
    Dec 2, 2020 at 9:23

1 Answer 1

0

You can utilize multiple text styles and measureText for that in a way similar to this:

var font = '15px Calibri,sans-serif';
var context = document.createElement('canvas').getContext('2d');
context.font = font;
  
var constructii = new ol.layer.Vector({
    source,
    style: function(feature) {          
        var numar_const = feature.get('numar_const');
        var folosinta = feature.get('folosinta');
        var suprafata = feature.get('suprafata');
        var numarConstWidth = context.measureText(numar_const).width;
        var folosintaWidth = context.measureText(folosinta).width;          
        return [
            new ol.style.Style({            
                fill: new ol.style.Fill({color: "yellow"}),
                stroke: new ol.style.Stroke({
                  color: [0,0,230], width: 3
                }),
                text: new ol.style.Text({
                    font,
                    text: numar_const,
                    fill: new ol.style.Fill({ color: "red" }),
                    textAlign: 'left',
                })
            }),
            new ol.style.Style({
                text: new ol.style.Text({
                    font,
                    text: folosinta,
                    fill: new ol.style.Fill({ color: "green" }),
                    textAlign: 'left',
                    offsetX: numarConstWidth,
                })
            }),
            new ol.style.Style({
                text: new ol.style.Text({
                    font,
                    text: suprafata,
                    fill: new ol.style.Fill({ color: "orange" }),
                    textAlign: 'left',
                    offsetX: numarConstWidth + folosintaWidth,
                })
            })
        ];
    }
});
3
  • It's even a bit more complicated. In your answer you missed uncolored prefixes N:, F: and S:, delimiters / and end text MP. Using canvas and icon style would be simpler.
    – TomazicM
    Dec 2, 2020 at 11:20
  • I also attached the code in which I define the color of the polygons and the text, maybe it's easier to see. Dec 4, 2020 at 9:02
  • Other ways if you still have? Dec 10, 2020 at 7:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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