OpenLayers Polyline Creation – How to Create a Polyline from Coordinates Array in OL OpenLayers 5.3.2

lineopenlayerspolyline-creation

I'm using OpenLayers 5.3.2, and would like to create my own marker animation using almost exactly the example at https://openlayers.org/en/latest/examples/feature-move-animation.html?q=marker

All I'd like to do is create my own polyline to replace the one used in the demo. I'll also change the center point, but I can do that on my own. There is no information on how to generate a polyline for OL 5.3.2. I've read all examples for past versions, and none of them work.

From what I've read, a polyline is an array of coordinate arrays, such as:

[
    [lon,lat],
    [lon,lat],
    [lon,lat],
    [lon,lat]
]

So I've generated my array to match exactly that. Example of the data I created, stored in a global variable:

var currPath = 
    [
        [
            -98.907449,
            30.241299
        ],
        [
            -98.907477,
            30.241337
        ],
        [
            -98.907557,
            30.241449
        ],
        [
            -98.907636,
            30.24156
        ]
    ]

But from here, I have no idea how to proceed.

Best Answer

You could simply use your coordinate array to create a linestring

  import LineString from 'ol/geom/LineString.js';

  var route = new LineString(currPath).transform('EPSG:4326', 'EPSG:3857');

But if you need to create a polyline string from a coordinate array 

  var polyline = new Polyline({
    factor: 1e6
  }).writeGeometry(new LineString(currPath));
Related Question