OpenLayers 3: simple LineString example
Asked Answered
S

1

17

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);
Santos answered 17/6, 2015 at 9:54 Comment(2)
can draw line between two points with ur code ?Rellia
hi, where you are passing 'coordinates' in that array can we pass all the coordinates or like the marker vector layer, we need to run the for loop and create an array of feature layer?? i am using Ver 6.XAbortion
T
17

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.

Tecumseh answered 17/6, 2015 at 10:1 Comment(1)
As a note for anyone else finding this more recently, be sure to convert these lonLat values to the appropriate projection coordinates. You can do this with the fromLonLat function in ol/proj.Deem

© 2022 - 2024 — McMap. All rights reserved.