Exercices Ligne droite

Exercice - Ligne droite, ou pas

Nous souhaitons réaliser une interface simple pour visualiser le chemin le plus court entre deux points sur Terre, une orthodromie.

Ni Leaflet, ni OpenLayers, ne peuvent réaliser cela nativement. C’est pourquoi nous allons utiliser Turf.js, et en l’occurrence la fonctionnalité greatCircle.

• Mettez en place une nouvelle carte OpenLayers (basée sur l’exemple basique)
• Ajoutez le lien pour charger la librairie Turf.js
  • <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
• Créez deux marqueurs
  • un pour Paris ([2.35, 48.85])
  • un pour Vancouver ([-123.118, 49.247])
• Utilisez Turf.js pour générer l’orthodromie entre ces 2 points (voir documentation)
  • Besoin de turf.point(lng, lat), turf.greatCircle(pt1, pt2)
• Créez ensuite une ligne sur la carte, basée sur ces coordonnées calculées

Ensuite, ajoutons des interactions :

• Faites en sorte que les marqueurs soient déplaçables
  • ol.interaction.Translate
• Modifiez le code précédent pour recalculer la route entre les points, à chaque déplacement
  • événement translating sur l’interaction
• Appliquez cette nouvelle géométrie, toujours à chaque déplacement

// récupérer les coordonnées du premier point d'une couche
votre_layer.getSource().getFeatures()[0].getGeometry().getCoordinates()

// définir une nouvelle géométrie
votre_layer.getSource().getFeatures()[0].setGeometry(geometry)

// utilitaire geojson
let format = new ol.format.GeoJSON();
format.readGeometry(geometryGeoJSON) // retourne une géométrie OpenLayers