Error drawing linestring with openlayers in angular

Question

I'm working with latest version of OpenLayers to date (6.3.1) and angular.

My goal is to draw a line from coordinates from an array

Example:

let coordinates = [
      [20.4511, 48.9109],
      [20.4512, 48.9110],
      [20.4514, 48.9110],
      [20.4515, 48.9111]
    ];

I added an open layers map to my project, then I've set the tile and vector layers to that map, but when i want to draw a LineString in a loop with this code:

var lineGeometry = new LineString([olProj.fromLonLat(coordinates[i-1]), olProj.fromLonLat(coordinates[i])]);

var feature = new Feature({
   geometry: lineGeometry 
});

this.myVectorSource.addFeature(feature);

I get an error: Error: Unimplemented abstract method.

In "getExtent()" function from "lineGeometry" variable.

I tried to console log "lineGeometry" variable and it has "extent" member variable, but all of it's components were infinities. (I assume that "getExtent()" is getter funciton for "extent" member variable)

However, if i try to draw dots instead of lines between points, I get result as expected (dots are rendered on the map)

var pointGeometry = new Point(olProj.fromLonLat(coordinates[i]));

var feature = new Feature({
    geometry: pointGeometry 
});

this.myVectorSource.addFeature(feature);

Plunker for more details on the code:

https://plnkr.co/edit/Ih6mCanmpqDmdg2q?open=lib%2Fscript.js&deferRun=1&preview

Answer 1

First your import of LineString is wrong change

import LineString from 'ol/geom/Geometry';

to

import LineString from 'ol/geom/LineString';

A linestring is made up of all the coordinates so remove that from your for loop. You can use the transform method of geometries to convert from EPSG:4326 (LonLat) to your view projection

  drawLine(coordinates, drawDots)
  {
    if(drawDots)
    {
      for(var i = 0; i < coordinates.length; i++)
      {

        var pointGeometry = new Point(olProj.fromLonLat(coordinates[i]));

        var feature = new Feature({
          geometry: pointGeometry 
        });

        this.myVectorSource.addFeature(feature);
      }
    }
    else
    {

        var lineGeometry = new LineString(coordinates).transform('EPSG:4326', this.myMap.getView().getProjection());
        console.log(lineGeometry)

        var feature = new Feature({
          geometry: lineGeometry 
        });

        this.myVectorSource.addFeature(feature);

    }

  }