Line arrows example

[fredj]

Add an example than shows how to draw arrows to a linestring (end of each segment)

[fredj]

Thanks for any review

[elemoine]

forEachSegments -> forEachSegment

[fredj]

yes, will change

[fredj]

Note: an icon is used for the arrow but it should be possible to use a ol.style.RegularShape when an anchor options will be available (see #3342)

[fredj]

@elemoine @tsauerwein: any other comments?

[tsauerwein]

No more objections from my side.

[elemoine]

Looking again…

[elemoine]

It looks good to me.

I just note that the style function will generate a lot of garbage if there is a lot of lines and segments. I know that this is not a problem in that particular example, but it would be good to always show good practices to users.

Instead of function(ol.Feature, number):Array.<ol.style.Style> the style function signature could possibly be function(ol.Feature, number, function(ol.style.Style)). And the style function would call the function passed as a third argument for each style it wants to generate.

So with this your example's style function could look like this:

var lineStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    // …
  })
});

var arrowStyle = new ol.style.Style({
  image: new ol.style.Icon({
    // …
  })
});


function styleFunction(feature, resolution, callback) {
  callback(lineStyle);
  feature.getGeometry().forEachSegment(function(start, end) {
    var dx = end[0] - start[0];
    var dy = end[1] - start[1];
    var rotation = Math.atan2(dy, dx);
    arrowStyle.setGeometry(new ol.geom.Point(end));
    arrowStyle.getImage().setRotation(-rotation);
    callback(arrowStyle);
  });
}

Note something to do in this PR, but as a separate PR possibly.

[fredj]

Thanks for the review