Problem with drawing arrows in 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/

yes, you can see everything in the full code link I've attached — Geographos, Oct 29 '21 at 11:34

AndyNope · Answer 1 · 2021-10-29T11:39:17.210

0

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}

edited Oct 29 '21 at 11:39

answered Oct 29 '21 at 11:27

AndyNope

427
6
12

It says only a little to me unfortunately. I guess I have one silly error in my code. – Geographos Oct 29 '21 at 13:28
if it's still unanswered this evening, I could have a better look later. – AndyNope Oct 29 '21 at 13:38
No worries. Any approach cordially appreciated. – Geographos Oct 29 '21 at 13:39
Where is your code actually placed on https://mktest.opx.pl/ ? – AndyNope Oct 29 '21 at 13:40
This is the detailed link: https://mktest.opx.pl/resources/qgis2web.js – Geographos Oct 29 '21 at 13:50

Problem with drawing arrows in OpenLayers

1 Answers1