How to draw a polyline in OpenLayers3?

Question

I have the following script for render an OpenLayer3 map into a div in my web The map is showed on the web when de user click on a button.

function traza_mapa() {
    function clearTheDiv() 
    {
        document.getElementById("map").innerHTML = "";
    };
    clearTheDiv();

    var myVista = new ol.View({
           center: ol.proj.fromLonLat([-30,50],'EPSG:3857', 'EPSG:4326'),
           zoom: 4,
        });

        var map = new ol.Map({
          target: 'map',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM()
              }),  
          ],
          view: myVista,
          controls: new ol.control.defaults({
            zoom: true,
            attribution: false,
          })
        }); 
        map.addControl(new ol.control.ZoomSlider()); 
};

I would like to show a track as a layer. The vertex positions are obtained from a array [[lon1,lat1],[lon2, lat2]]..................]

How can I include the array as as layer into the map ?

Answer 1

One way to do it would be to add an empty vector layer to your map, and then create a function to add a feature to the map from your co-ordinates

Add feature manually to a vector layer in ol3

has details on adding features, the relavent code being:

var vectorSource = new ol.source.Vector({});

To make a vector source for your new layer. Then add this object to your map (add the following to the layers array in your map declaration):

 new ol.layer.Vector({
      source: vectorSource
  })

And then modify this code to add your points to each feature you want to add (the example uses a transform that you may or may not need)

var thing = new ol.geom.Polygon( [[
ol.proj.transform([-16,-22], 'EPSG:4326', 'EPSG:3857'),
ol.proj.transform([-44,-55], 'EPSG:4326', 'EPSG:3857'),
ol.proj.transform([-88,75], 'EPSG:4326', 'EPSG:3857')
]]);
var featurething = new ol.Feature({
name: "Thing",
geometry: thing
});
vectorSource.addFeature( featurething );