OpenLayers 5, угловые 7 строк не отображаются

Question

Я использую Angular 7, OpenLayers 5, чтобы показать карту с маркерами.Теперь я хочу нарисовать линии между маркерами.Я следовал за некоторыми примерами.Как это .

Но линии не отображаются.Я пытался передать массив координат на LineString вместо Point.Это тоже не сработало.Буду признателен за помощь.

Вот код:

   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

Я получил его для работы с маркерами и линиями.Я новичок в OpenLayers и все еще учусь.Вероятно, есть лучшие примеры, но эти два, которые я нашел, имеют для меня больший смысл:

1. как добавить линии между точками в открытых слоях

2. Анимация маркера

В первом примере показано, как преобразовать проекции для LineString, а затем добавить к Feature.Второй показывает, как использовать разные стили.В моем случае у меня разные стили для линий и маркеров.