Jacobian Jacobian - 4 months ago 50
Javascript Question

Multiple text labels along a linestring feature

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:

enter image description here

enter image description here

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

Answer

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

Comments