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);
ol.style.Icon
, taking canvas asimg
option source. – TomazicM Dec 2 '20 at 9:23