OpenLayers 5，Angular 7 线未显示

Question

I am using Angular 7 , OpenLayers 5 to show map with markers. Now I want to draw lines between markers. I followed some examples. Like this .

But the lines don't show up. I tried to pass array of coordinates to LineString instead of Point . That didn't work either. I'd appreciate some help.

Here's the code:

   this.source = new XYZ({
     url: 'http://tile.osm.org/{z}/{x}/{y}.png'
   });

   this.layer = new TileLayer({
     source: this.source
   });

   this.view = new View({
     center: fromLonLat([lon, lat]),
     zoom: 5
   });

   this.map = new Map({
     target: 'map',
     layers: [this.layer],
     view: this.view,
     controls: defaultControls().extend([
       new OverviewMap()
     ]),
   });

   let vectorSource = new VectorSource({});

    // create features for markers
    for (let i = 0; i < nodes.length; i++) {
      let nodeFeature = new Feature({
        geometry: new Point(fromLonLat([nodes[i].lon, nodes[i].lat])),
        name: nodes[i].name
      });
      vectorSource.addFeature(nodeFeature);
    }
    let vectorLayer = new VectorLayer({
      source: vectorSource
    });
    this.map.addLayer(vectorLayer);

   const fromProjection = new Projection("EPSG:4326");   // Transform from WGS 1984
   const toProjection = new Projection("EPSG:900913");

   let lon = 24.9342;
   let lat = 60.2017;

   // Start and end point
   let start_point1 = new Point(lon, lat).transform(fromProjection, toProjection);
   let end_point1 = new Point(30.9342, 62.2017).transform(fromProjection, toProjection);

   let start_point2 = new Point(lon, lat).transform(fromProjection, toProjection);
   let end_point2 = new Point(20.9342, 55.2017).transform(fromProjection, toProjection);

   // new vector graphic layer
   var layerLines = new LayerVector({
     source: new VectorSource({
         features: [new Feature({
             geometry: new LineString([start_point1, end_point1]),
             name: 'Line 1'
         }), 
         new Feature({
           geometry: new LineString([start_point2, end_point2]),
           name: 'Line 2'
       })]
     })
 });
   this.map.addLayer(layerLines);

Answer 1

I got it to work with markers and lines. I'm new to OpenLayers and still learning. There are probably better examples but these two that I found, make better sense to me:

1. how to add lines between point in openlayers

2. Marker Animation

The first example shows how to transform projections for LineString then add to Feature . The second one shows how to use different styles. In my case, I have different styles for the lines and markers.