Как разделить (горизонтальный) один объект LineString на разные цвета с одинаковой длиной между маркерами на карте

Question

У меня есть требование разделить один объект LineString на несколько цветов между маркером и отображением на карте. Например, два маркера A и B между одним LineString, который имеет значение strokeWidth 20. Теперь мне нужно разделить 20 strokeWidth на 10 равных частей с помощью разный-разный цвет, т.е. 10 строк с каждой строкой имеют ширину в 2 штриха. На приведенном ниже изображении показана только одна строка строк, которая связана с двумя маркерами А и В, а одна строка строк имеет разные цвета в одно и то же время Образец изображения

Вот код, который я пробовал, но он принимает либо первый, либо последний цвет только для строки строки.

createMap() {

  //Initializing Map Instance
  var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: [0, 0],
        zoom: 4
      }),
      projection: "EPSG:4326"
    });


    //coordinate for Marker and LineString
    var markerA = [
      12.211180191503997,
      -11.953125
    ];

    var markerB = [
      37.43997405227057,
      10.8984375
    ];

    var singleLineString = [
      [
        12.211180191503997,
        -11.953125
      ],
      [
        37.43997405227057,
        10.8984375
      ]
    ];


    var source = new ol.source.Vector();

    //Marker A feature
    var aFeature = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.fromLonLat(markerA)),
      name: 'markerA',
      population: 4000,
      rainfall: 50
    });

    //Marker B feature
    var bFeature = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.fromLonLat(markerB)),
      name: 'markerB',
      population: 4000,
      rainfall: 500
    });

    //LineString Feature
    var lineFeature = new ol.Feature({
      geometry: new ol.geom.LineString(
        singleLineString
      ),
      name: 'singleLineString',
      population: 4000,
      rainfall: 500
    });

    //creating style for both Marker A and B
    var abStyle = new ol.style.Style({
      image: new ol.style.Icon(/** @type {olx.style.IconOptions}                        */({
        anchor: [0.2, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'https://openlayers.org/en/v4.5.0/examples/data/icon.png'
      }))
    });

    // style for line String but online taking first argument color for the line
    var lineStyle = new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: "red",
        width: 5
      },
      {
        color: "yellow",
        width: 5
      },
      {
        color: "green",
        width: 5
      },
      {
        color: "blue",
        width: 5
      }
      )
    });

    //Adding style into feature
    aFeature.setStyle(abStyle);
    bFeature.setStyle(abStyle);
    lineFeature.setStyle(lineStyle);

    //Adding feature into vector source
    source.addFeature(aFeature);
    source.addFeature(bFeature);
    source.addFeature(lineFeature);

    //creating vector layer with source
    var layer = new ol.layer.Vector({
      source: source,
      zIndex: 4
    });

    //adding layer into map
    map.addLayer(layer);    

  }

Любая помощь очень ценится