How to set different colors for a lineString OpenLayers 5

Question

I have drawn a lineString of the road that a car went through. The car had different speed values during the road. I have stored the values of the speed with the longitude, latitude in an array. Based on the speed value the lineString color should change.
For example: if the speed is under 100 then the color should be blue, if the the speed is between 100 and 150 then this part of the lineString should be green else it should be black.
I have also read about splitting the lineString but i still have no idea how to do this

here is the code i wrote for drawling the lineString

/* open street map newest version */
var map = new ol.Map({
    target: 'map', // the div id
    layers: [
        new ol.layer.Tile({
        source: new ol.source.OSM()
        })
    ],
    view: new ol.View({ 
        center: ol.proj.fromLonLat([13.381777, 52.520008]),
        zoom: 9
    })
});

//transform the projection
for (var i = 0; i < array.length; i++) {
    array[i] = ol.proj.fromLonLat(array[i]);
}

// get the last index for the end point
var routeLength = array.length;

// create a feature for the line
var featureLine = new ol.Feature({
    geometry: new ol.geom.LineString(array) //accepts only array of points
});

var vectorLine = new ol.source.Vector({});
var startVector = new ol.source.Vector({});


// Start layer
var startLayer = new ol.layer.Vector({
    source: startVector, 
    style: new ol.style.Style({
        image: new ol.style.Icon({
            src: '/img/start.svg',
            scale: 0.3,
            anchor: [20, 150],
            anchorXUnits: "pixels",
            anchorYUnits: "pixels"
        })
    })
});

// end layer
var endLayer = new ol.layer.Vector({
    source: vectorLine, 
    style: new ol.style.Style({
        image: new ol.style.Icon({
            src: '/img/end.svg',
            scale: 0.3, 
            anchor: [20, 150],
            anchorXUnits: "pixels",
            anchorYUnits: "pixels"
        })
    })
});

// create features for the start and the end points
var startFeature = new ol.Feature({
    geometry: new ol.geom.Point(array[0])
});
var endFeature = new ol.Feature({
    geometry: new ol.geom.Point(array[routeLength - 1])
});

// add all features to the vector source
startVector.addFeature(startFeature);
vectorLine.addFeature(endFeature);
vectorLine.addFeature(featureLine);

var speed;
for (var i = 0; i < array.length; i++) {
    speed = array[i][2];
    
    if((speed > 0) && (speed < 800)) {
        // change the color of the lineString
    }
    else if((speed > 800) && (speed < 2000)) {
        // change the color of the lineString
    }
    else if(speed > 2000) {
        // change the color of the lineString
    }
}

// add style to the lineString
var vectorLineLayer = new ol.layer.Vector({
    source: vectorLine,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({ color: '#FF0000', width: 4 })
    })
});

// add all layers to the map
map.addLayer(vectorLineLayer);
map.addLayer(startLayer);
map.addLayer(endLayer);

// zoom out to fit the layerline
map.getView().fit(vectorLine.getExtent());
//popup code

Answer 1

You can use ol.style.FlowLine to display elevation or speed as color along a GPX track.
See example online: https://viglino.github.io/ol-ext/examples/style/map.style.gpxline.html