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.