Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

OpenLayers 3: simple LineString example

i'm new to OpenLayers and i am looking for some help drawing lines on a map, i've been trying various things from various different posts about drawing LineStrings but i can't get it to work! I just need to figure out how to draw a line between to coordinates.

heres some code that i tried but didn't work:

var points = [
    new ol.geom.Point([78.65, -32.65]),
    new ol.geom.Point([-98.65, 12.65])
  ];

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

var sourceLine = new ol.source.Vector({
    features: [featureLine]
  });

var vectorLine = new ol.layer.Vector({
    source: sourceLine
  });

map.addLayer(vectorLine);

i also tried this but to no avail:

var layerLine = new ol.layer.Vector({
      source: new ol.source.Vector({
          features: [new ol.Feature({
              geometry: new ol.geom.LineString(points, 'XY'),
              name: 'Line'
          })]
      }),
  });

map.addLayer(vectorLine);

can someone point me in the right direction? or tell me where i am going wrong?

EDIT: thanks to Jonatas, the working code looks like this:

  var coordinates = [[78.65, -32.65], [-98.65, 12.65]]; 

  var layerLines = new ol.layer.Vector({
      source: new ol.source.Vector({
          features: [new ol.Feature({
              geometry: new ol.geom.LineString(coordinates),
              name: 'Line'
          })]
      }),
  });

  map.addLayer(layerLines);
like image 445
ThriceGood Avatar asked Jun 17 '15 09:06

ThriceGood


People also ask

How do you draw lines in OpenLayers?

Select a geometry type from the dropdown above to start drawing. To finish drawing, click the last point. To activate freehand drawing for lines, polygons, and circles, hold the Shift key. To remove the last point of a line or polygon, press "Undo".

What is the use of OpenLayers?

Overview. OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds.


1 Answers

Just change this:

var points = [
    new ol.geom.Point([78.65, -32.65]),
    new ol.geom.Point([-98.65, 12.65])
];

To:

var points = [
    [78.65, -32.65], [-98.65, 12.65]
];

The ol.geom.LineString constructor accept an array of coordinates.

like image 79
Jonatas Walker Avatar answered Oct 12 '22 03:10

Jonatas Walker