Voici un tutoriel inspiré qui vous présente comment tracer une ligne entre deux points et calculer la distance qui les sépare en webmapping avec l’API d’OpenLayers (v 4.01). Les deux points sont localisés respectivement à Barcelone (41° 23′ 00″ N, 2° 10′ 00″ E) et  à Paris (48° 51′ 24″ N, 2° 21′ 07″ E).

Pour chaque ville, on créé la géométrie ponctuelle en lien avec les coordonnées géographiques avec la classe : ol.geom.Point. Les géométries nous servent à définir les objets géographiques ol.Feature.

Ces derniers, stylisés par un icône singulier, sont chargés dans la source du vecteur qui définit le vecteur lui-même.

Le principe est le même avec la ligne dont la géométrie est chargée par la classe : ol.geom.LineString. Et enfin, les vecteurs ponctuels et linéaire sont ajoutés à l’objet Map.

En ce qui concerne le calcul de la distance, on utilise la classe ol.Sphere avec la méthode haversineDistance. On s’assure que les coordonnées géographiques des points sont dans la projection World Geodetic System  (WGS) 84, EPSG:4326.

Le script complet et la demo sont disponibles sur ce lien.