Multiple text labels along a linestring feature

Question

Is it possible in OpenLayers 3 to create a text label which clones multiple times along a linestring feature, depending on a scale? Something like:

Here you can see, that when we change scale label "IX Corps Blvd" appears twice. How can we implement this?

Answer 1

You can achieve this with style function. My code sample is about making arrows to line string (slightly different case), but I have commented parts necessary to be changed (at least):

var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

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


var styleFunction = function(feature) {
    var geometry = feature.getGeometry();
    var styles = [
      // linestring
      new ol.style.Style({
        stroke: new ol.style.Stroke({   // apply street style here
          color: '#ffcc33',
          width: 2
        })
      })
    ];

    geometry.forEachSegment(function(start, end) {
      var dx = end[0] - start[0];
      var dy = end[1] - start[1];
      var rotation = Math.atan2(dy, dx);
      // arrows
      styles.push(new ol.style.Style({
        geometry: new ol.geom.Point(end),
        image: new ol.style.Icon({    // Use here label, not icon.
          src: 'http://openlayers.org/en/v3.17.1/examples/data/arrow.png',
          anchor: [0.75, 0.5],
          rotateWithView: false,
          rotation: -rotation
        })
      }));
    });

    return styles;
  };

var vector = new ol.layer.Vector({
     source: source,
     style: styleFunction
});


  map.addInteraction(new ol.interaction.Draw({
    source: source,
    type: /** @type {ol.geom.GeometryType} */ ('LineString')
  }));

Some more effort is needed to place titles in correct placements. I left this answer like this to serve a solid starting point for building your feature.

My source:

[1] http://openlayers.org/en/master/examples/line-arrows.html