CODEWITHSUNDEEP
javascriptopenlayers-3
Keithin8a
Keithin8a

Reputation: 961

drawing lines in open layers 3

I know that there are a lot of posts like this already but I have tried a lot of them and they don't seem to be fixing my problem.

I am trying to draw a line on a map using linestring but no matter what I do, it does not draw a line. Here is my code:

var coords = [[78.65, -32.65], [15.65, -98.65]];

var lineStyle = new ol.style.Style({
    stroke: new ol.style.Stroke(({
        width: 10
    }))
});

var layerLines = new ol.layer.Vector({
    style: lineStyle,
    source: new ol.source.Vector({
        features: [new ol.Feature({
            geometry: new ol.geom.LineString(coords, 'EPSG:4326',   'EPSG:3857'),
            name: 'Line'
        })]
    }),
});

var map = new ol.Map({
    layers: [
        mainLayer,
        vectorLayer,
        layerLines
    ],
    projection: "EPSG:3857",
    target: 'map',
    view: view
});

If I create the linestring without the transformations then it does display a single dot at 0,0 but I do not think it cannot read my coordinates because if I leave it blank then no dot appears so it can't be using a default value.

I am pretty new to javascript and OL so my current sample project is to create a measuring app where people can measure two points and have a line drawn between it. Please bear this in mind when answering.

Upvotes: 2

Views: 6393

Answers (1)

Jonatas Walker
Jonatas Walker

Reputation: 14150

Note some changes:

var coords = [[-65.65, 10.10], [13, 18]];
var lineString = new ol.geom.LineString(coords);
// transform to EPSG:3857
lineString.transform('EPSG:4326', 'EPSG:3857');

// create the feature
var feature = new ol.Feature({
    geometry: lineString,
    name: 'Line'
});

http://jsfiddle.net/jonataswalker/7cf5egm2/

I changed the coords, the original are a bit strange|wrong.

Upvotes: 2

Related Questions