Drawing a Speed Leader line in OpenLayers

Question

I\'m trying to draw an icon representing a entity on an OpenLayers map that includes a \"speed leader\", which is a small line segment that originates at the icon and draws outw

Answer 1

In this case it would make sense to use a ol.style.StyleFunction(feature, resolution) which returns an array of two styles. The first style is for the point, the second style for the "speed leader". The style for the "speed leader" uses a custom geometry which is calculated with the view resolution to always use the same length in pixels.

var style = function(feature, resolution) {
  var length = feature.get('speed'); // in pixel
  var pointFrom = feature.getGeometry().getCoordinates();
  var pointTo = [
      pointFrom[0] + length * resolution,
      pointFrom[1] + length * resolution
  ];
  var line = new ol.geom.LineString([
      pointTo,
      pointFrom
  ]);

  return [
    // the style for the point
    new ol.style.Style({ ... }),
    // the style for the "speed leader"
    new ol.style.Style({
      geometry: line,
      stroke: new ol.style.Stroke({ ... })
    }),
  ];
};

http://jsfiddle.net/annyL2sc/

In this example I am not taking the direction into account, but I think it shows the idea.