在 OpenLayers 中绘制箭头的问题

Question

I would like to draw the simple arrow in OpenLayers.

I found some examples here:

OpenLayer 4 draw arrows on map https://openlayers.org/en/latest/examples/line-arrows.html Draw arrow without using any image in openlayers3

and made some code:

var arrowInteraction = new ol.interaction.Draw({
type: 'LineString',
source: vectorLayer.getSource(),
geometryFunction: function(coordinates, geometry) {
var geometry = coordinates.getGeometry();
var styles = [
    // linestring
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            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);

    var lineStr1 = new ol.geom.LineString([end, [end[0] - 200000, end[1] 
 + 200000]]);
    lineStr1.rotate(rotation, end);
    var lineStr2 = new ol.geom.LineString([end, [end[0] - 200000, end[1] 
 - 200000]]);
    lineStr2.rotate(rotation, end);

    var stroke = new ol.style.Stroke({
        color: 'green',
        width: 1
    });

    styles.push(new ol.style.Style({
        geometry: lineStr1,
        stroke: stroke
    }));
    styles.push(new ol.style.Style({
        geometry: lineStr2,
        stroke: stroke
    }));
   });

   return styles;
 }

I am getting an error:

coordinates.getGeometry is not a function

What can be wrong here?

My full code is here:

https://mktest.opx.pl/

Answer 1

This might help: TypeError: Cannot read properties of undefined (reading 'id')

If I understand it right, the functions aren't called synchronized.

In that tutorial, he catch it with:

 itemToForm = () => {
  if(this.item === undefined) {return}
         
  // The rest of the code
}

But you can also catch it with

  if(yourObjectOrValue === undefined) {// The rest of the code}