Styling multiLineString with different color - openlayers-3

Question

I want 3 lines with different colors and to be able to decide which line should be on top.
I couldn't figure out how to have different colors on the polylines when using ol.new.multiLineString.
Right now I use different layers for each polyline so that I can decide which one to show on top and style them differently.
Is this a good solution?
Is there a more efficent way to do this?
This is my solution fiddle.
(function () {
var p1 = [18, 59];
var p2 = [0, -10];
var p3 = [20, 20];
var p4 = [-10, -10];
var p5 = [-10, 0];
var p6 = [10, 0];
var p7 = [20, 0];
var p8 = [30, 0];
var p9 = [0, -10];
var p10 = [0, 40];
var p11 = [0, 45];
var p12 = [0, 50];
var array1 = [p2, p1, p3, p4]; //RED
var array2 = [p5, p6, p7, p8]; //GREEN
var array3 = [p9, p10, p11, p12]; //BLUE
var allarray = [array1, array2, array3];
var temp;
for (var i = 0; i < allarray.length; i++) { //transformation process
temp = allarray[i];
for (var x = 0; x < temp.length; x++) {
temp[x] = ol.proj.transform(temp[x], 'EPSG:4326', 'EPSG:3857');
}
}
var featureRed = new ol.Feature({
geometry: new ol.geom.LineString(array1)
});
var featureGreen = new ol.Feature({
geometry: new ol.geom.LineString(array2)
});
var featureBlue = new ol.Feature({
geometry: new ol.geom.LineString(array3)
});
var vectorRedLine = new ol.source.Vector({});
var vectorGreenLine = new ol.source.Vector({});
var vectorBlueLine = new ol.source.Vector({});
//vectorSource.addFeature(feature);
vectorRedLine.addFeature(featureRed);
vectorGreenLine.addFeature(featureGreen);
vectorBlueLine.addFeature(featureBlue);
//add the feature vector to the layer vector, and apply a style to whole layer
var vectorRedLayer = new ol.layer.Vector({
source: vectorRedLine,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#FF0000',
width: 4
}),
fill: new ol.style.Fill({
color: '#FF0000',
weight: 1
})
})
});
var vectorGreenLayer = new ol.layer.Vector({
source: vectorGreenLine,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: '#00FF00',
weight: 10
}),
stroke: new ol.style.Stroke({
color: '#00FF00',
width: 4
})
})
});
var vectorBlueLayer = new ol.layer.Vector({
source: vectorBlueLine,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: '#0000FF',
weight: 10
}),
stroke: new ol.style.Stroke({
color: '#0000FF',
width: 4
})
})
});
var map = new ol.Map({
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
target: document.getElementById('map'),
view: new ol.View({
center: [0, 0],
zoom: 6,
projection: 'EPSG:3857'
})
});
map.addLayer(vectorRedLayer);
map.addLayer(vectorBlueLayer);
map.addLayer(vectorGreenLayer);
var layers = map.getLayers();
var topLayer = layers.removeAt(3);
layers.insertAt(1, topLayer);
})();

Answer 1

You can give a style to a feature.
var feature1 = new ol.Feature(
new ol.geom.MultiLineString([[[-1, -1], [1, -1]], [[-1, 1], [1, 1]]]);
feature1.setStyle(
new ol.style.Style({
stroke: new ol.style.Style({
color: [0, 0, 0, 255],
width: 2
})
})
);
var feature2 = new ol.Feature(
new ol.geom.MultiLineString([[[-1, -1], [-1, 1]], [[1, -1], [1, 1]]]);
feature2.setStyle(
new ol.style.Style({
stroke: new ol.style.Style({
color: [255, 255, 255, 255],
width: 2
})
})
);
For features that have a style the style set in the vector layer is ignored.