javascript - Draw arrow on first line passed into style function in OpenLayers 3 -

so using openlayers3 example here , working fine, not want draw arrow on every single line. first 1 drawn. here have style function.

navigationlinestylefunction: function(feature) {     var geometry = feature.getgeometry();     var linecolor = '#c1005d'     var styles = [         new ol.style.style({             stroke: new ol.style.stroke({                 //this can accept rgba colors hide lines                 color: linecolor,                 width: 6             })         })     ];     geometry.foreachsegment(function(start, end, sexting) {         var dx = start[0] - end[0];         var dy = start[1] - end[1];         var rotation = math.atan2(dy, dx);         // arrows         styles.push(new ol.style.style({             geometry: new ol.geom.point(start),             image: new ol.style.icon({                 src: 'https://openlayers.org/en/v4.0.1/examples/data/arrow.png',                 anchor: [0.75, 0.5],                 rotatewithview: true,                 rotation: -rotation             })         }));     });      return styles; } 

the issue foreachsegment() think, cannot find function grabs first one. tried hack wrapping .push() in if statement checked length of styles[] did not work. tried replacing foreachsegment() .once() did not work.

instead of using foreachsegment method write custom code fetch first 2 coordinates geometry apply styling in case line segment. since foreachsegment method's callback called each segment while leads unnecessary looping.

i have taken sample openlayers site demonstrate this.

fix :

      var coords = geometry.getcoordinates();// gets coordinates       var start = coords[0];//first coordinate       var end = coords[1];//second coordinate        // rest of code       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({           src: 'https://openlayers.org/en/v4.0.1/examples/data/arrow.png',           anchor: [0.75, 0.5],           rotatewithview: true,           rotation: -rotation         })       })); 

look @ plunckr link