如何在打开的图层3中绘制一个定向弧，并在弧的中心使用“方向箭头”？

Question

我正在使用Open Layers 3和SpringMeyer的Arc.js在两个点之间的地图上绘制有向弧：

OpenLayers 3 Arc with Arc.js

我有点不好意思承认我已经解决了这个问题几个小时，但我无法弄清楚如何将箭头置于弧的顶点（中间）。而不是在终点，我希望箭头位于弧的中心。

这是一个使用我的代码的工作Codepen：http://codepen.io/gracefulcode/pen/MwYQzY

这是我的代码：

 function createArcBetweenPoints(pointA, pointB, layer) {
  var transformedA = pointA.transform('EPSG:3857', 'EPSG:4326');
  var transformedB = pointB.transform('EPSG:3857', 'EPSG:4326');
  var start = { x: transformedA.getCoordinates()[0], y: transformedA.getCoordinates()[1] };
  var end = { x: transformedB.getCoordinates()[0], y: transformedB.getCoordinates()[1] };
  var generator = new arc.GreatCircle(start, end, {'name': ''});
  var line = generator.Arc(100,{offset:10});
  var coordinates = line.geometries[0].coords;
  var lineString = new ol.geom.LineString(coordinates);
  var geom = lineString.transform('EPSG:4326', 'EPSG:3857');
  var feature = new ol.Feature({
      'geometry': geom
    });

  //Adds an arrow
  var dx = end.x - start.x;
  var dy = end.y - start.y - 20;
  var rotation = Math.atan2(dy, dx);
  var lineStyles = [
    // linestring
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: 2
      })
    }),
    new ol.style.Style({
      geometry: pointB,
      image: new ol.style.Icon({
        src: 'resources/arrow.png',
        anchor: [0.75, 0.5],
        rotateWithView: false,
        rotation: -rotation
      })
    })
  ];

  feature.setStyle(lineStyles);

  return feature;
}