Damien Brz Damien Brz - 6 days ago 7
Javascript Question

Openlayer-3 : Draw a polyline with GPS coordinates

For my company, I must develop a function who draw a path with GPS coordinates. Indeed, my company use GPS to track runners during multiple race.

So, i tried many differents way to draw my polyline, my last version is:

_public.drawPolyline = function(pool, id, points, color, opacity, weight) {
try {
var l = points.length;
var latlngs = [];
var j=1;
for (var i = 0; i < l; i++) {
latlngs[i] = new ol.geom.Point(ol.proj.transform([points[i].longitude, points[i].latitude], 'EPSG:4326', 'EPSG:3857'));
};

var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: color,
width: weight,
opacity: opacity,
radius: 6
})
});
//Check if pool exists, else create it
if (!_private._polyline.containsKey(pool)) {
_private._polyline.put(pool, new jQuery.Hashtable())
}
var currentPool = _private._polyline.get(pool);
//Check if line exists, if yes, update path
if (currentPool.containsKey(id)) {
var vectorLayer = currentPool.get(id).layer;
vectorLayer.setVisible(true);
} else {
var linefeature = new ol.source.Vector('Path', {styleMap: style});
var comp = new ol.geom.LineString(latlngs);
var featurecomp = new ol.Feature({
name: "Comp",
geometry: comp
});
var vector = new ol.layer.Vector({
title: pool,
visible: true,
source: linefeature
});
linefeature.addFeatures(featurecomp);
currentPool.put(id, linefeature);
currentPool.put(id, { "type": "Path", "url": id, "layer": vector });
var vectorLayer = currentPool.get(id).layer;
vectorLayer.setVisible(true);
}
} catch (e) {
console.log(e.message);
}
}


So, I wanted to draw a Polyline with a function with differents parameters:
- pool: an Hashtable storing my polyline
- id: not important
- points: Contain an array of objects (
{"location":[{"id":1854703,"latitude":42.831,"longitude":0.30087,"altitude":0,"hpl":0,"vpl":0,"speed":4,"direction":258,"date":"2012-08-25 03:43:23","device_id":786,"datereceived":"2012-08-25 03:43:23"}
).

According to my test server, I have no error in my logs, but, I still don't have a polyline drawed.

If someone could help me with this, it would be great.

Regards, Brz.

Answer

You just need to create LineString points as below

points.push(ol.proj.transform([xx,yy],'EPSG:4326', 'EPSG:3857'));

Demo Link https://plnkr.co/edit/WqWoFzjQdPDRkAjeXOGn?p=preview

Edits

            var vectorSource = new ol.source.Vector({});
            var vectorSourcePoint = new ol.source.Vector({});
            var style = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 4,
                fill: new ol.style.Fill({
                    color: color
                }),
                stroke: new ol.style.Stroke({
                    color: color,
                    width: weight,
                    opacity: opacity
                })
            })
        });
        var l = points.length;
        var latlngs = [];
        for (var i = 0; i < l; i++) {
            latlngs.push(ol.proj.transform([points[i].longitude, points[i].latitude],'EPSG:4326', 'EPSG:3857'));

            //below 3 lines of code creates point geometry. I think you don't need this
            var point = new ol.geom.Point([points[i].longitude, points[i].latitude]).transform('EPSG:4326', 'EPSG:3857');
            var fea = new ol.Feature({geometry:point});
            vectorSourcePoint.addFeature(fea);
        };

        //below lines of code creates polyline. You are missing these lines.
        var thing = new ol.geom.MultiLineString([points]);
        var featurething = new ol.Feature({
            name: "Thing",
            geometry: thing
        });
        vectorSource.addFeature( featurething );
Comments