Positionner une ligne dans une carte avec OpenLayers

La méthode est identique à celle utilisée pour positionner un point (cf. Positionner une ligne dans une carte avec OpenLayers).

Voici simplement les modifications à apporter.

La ligne sera dessinée sous la forme d'une ligne rouge, de 2 pixels d'épaisseur :

var styleRed = new ol.style.Style( {

    stroke: new ol.style.Stroke( {

        color: [255 , 0 , 0 , 1],

        width: 2

    })

});

Les coordonnées comprennent maintenant 4 valeurs, deux pour le point de départ, et deux pour le points d'arrivée (coordonnées GPS) :

var long_deb = 0;

var lat_deb = 45;

var long_fin = 1;

var lat_fin = 46;

Les coordonnées sont maintenant exprimées sous la forme d'un tableau comprenant chaque point à positionner :

var coordinates = [[long_deb, lat_deb], [long_fin, lat_fin]];

La ligne est créée à partir des coordonnées, et l'objet d'affichage est généré, en définissant ensuite le style à utiliser :

var linestring = new ol.geom.LineString(coordinates, 'XY');

var lineString_feature = new ol.Feature ( {

    geometry: linestring

});

lineString_feature.setStyle(styleRed);

Le tableau de contenu est adapté :

var features = [ lineString_feature ];

Le reste est identique.

Calculer la longueur de la ligne

Si vous voulez calculer la longueur de la ligne, vous devez créer une sphère correspondant à la projection wgs84 :

//create sphere to measure on

var wgs84sphere = new ol.Sphere(6378137); // one of WGS84 earth radius'

et calculer la distance sur la sphère :

var longueur = wgs84sphere.haversineDistance([long_deb, lat_deb], [long_fin, lat_fin]);

Vous pouvez ensuite tronquer le nombre de décimales :

longueur = parseFloat(longueur.toFixed(2));

et afficher le résultat (ici, en utilisant jQuery) :

</script>

Longueur calculée (mètres) : <span id="longueur"></span>

<script>

$("#longueur").append(longueur);

</script>