Draw line between two points using OpenLayers

Question

I have two points having lolLat as 0,10 and 30,0

Now to draw a marker at this point i use this transform while generating marker for it

lonLat.transform(
                 new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                 map.getProjectionObject() // to Spherical Mercator Projection
             )

How can i draw line between them is there any way to do that in openlayers,i have tried doing it with linestring in vector layer but it doesn't seems to be working for me.

score 24 · Answer 1 · edited May 03 '15 at 12:30

In OpenLayers version 3.3, you can do this as

var points = [ [-89.8802, 32.5804], [-95.04286, 46.9235] ];

for (var i = 0; i < points.length; i++) {
    points[i] = ol.proj.transform(points[i], 'EPSG:4326', 'EPSG:3857');
}

var featureLine = new ol.Feature({
    geometry: new ol.geom.LineString(points)
});

var vectorLine = new ol.source.Vector({});
vectorLine.addFeature(featureLine);

var vectorLineLayer = new ol.layer.Vector({
    source: vectorLine,
    style: new ol.style.Style({
        fill: new ol.style.Fill({ color: '#00FF00', weight: 4 }),
        stroke: new ol.style.Stroke({ color: '#00FF00', width: 2 })
    })
});

Then add layer to map

map.addLayer(vectorLineLayer);

can confirm this is working. thanks. Using Leaflet, you'd only need `L.polyline(array).addTo(map)`. How these guys could make a basic feature so complicated is beyond me — phil294, Nov 26 '16 at 21:54

score 21 · Accepted Answer · answered Mar 19 '12 at 07:23

21

For example:

map = new OpenLayers.Map();

var start_point = new OpenLayers.Geometry.Point(0,10);
var end_point = new OpenLayers.Geometry.Point(30,0);

var vector = new OpenLayers.Layer.Vector();
vector.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([start_point, end_point]))]);
map.addLayers([vector]);

Live demo

answered Mar 19 '12 at 07:23

drnextgis

2,125
22
31

for some reason in the fiddle the ol source is gone – talsibony Jul 23 '15 at 07:47
1

Can you look at it again? It looks blank. – Jake Gaston Feb 27 '18 at 21:59
The example is wrong. The `LineString` constructor expects `Coordinates`, not `Point`s. `Coordinates` are just [x, y] arrays. Or you can use point.getCoordinates(). – bennlich Apr 28 '20 at 18:05
The live demo is dead: `35:1 ReferenceError: OpenLayers is not defined` – Pedro Lobito Jun 08 '20 at 15:57

Draw line between two points using OpenLayers

2 Answers2

Linked