Calculer un cap avec computeHeading.

Bibliothèque géométrie sphérique ( Geometry Library ) exemples et tutoriels en Français

Cartographie et webmapping

Partager ce tutoriel sur les réseaux sociaux
Signaler une erreur dans cet article

Calculer un cap entre deux points ( Départ et Arrivée ) avec computeHeading

Le cap est l'angle séparant votre direction du Nord vrai.
Dans l'API Google Maps Javascript, le cap est défini en degrés par rapport au Nord vrai, et en tournant dans le sens des aiguilles d'une montre.
Le Nord vrai correspondant à un cap de 0 degrés.

Calculer un cap

Pour calculer le cap à suivre pour aller du point de départ A au point d'arrivée B, on utilise la méthode computeHeading( depart, arrivee ), en lui passant deux paramètres :

  • depart : est un objet LatLng avec les coordonnées du point de départ A,
  • arrivee : est un objet LatLng avec les coordonnées du point d'arrivée B.
La valeur retournée est un nombre représentant le cap exprimé en degrès.

var pointDepart  = new google.maps.LatLng( latitudeDepart  longitudeDepart );
var pointArrivee = new google.maps.LatLng( latitudeArrivee, longitudeArrivee );

var capASuivre = google.maps.geometry.spherical.computeHeading( pointDepart, pointArrivee ); 

Exemple :

/**
 * Dans cet exemple on souhaite calculer le cap entre ces 2 points :
 * Départ  : Tours (FR)     : lat: 47.390273, lng: 0.688834
 * Arrivée : Fukushima (JA) : lat: 37.316864, lng: 141.024928
 */
var Tours     = new google.maps.LatLng(47.390273,0.688834);
var Fukushima = new google.maps.LatLng(37.316864,141.024928);

/**
 * Résultat le cap a pour valeur :  30.522621338711815 degrès
 * Conclusion lorsque je suis à Tours et que je regarde le Nord vrai
 * Je dois me tourner de  30.52 degrès dans le sens des aiguilles d'une montre
 * puis marcher en ligne droite pour atteindre Fukushima ... d'ici quelques jours !
 */
var cap = google.maps.geometry.spherical.computeHeading(Tours, Fukushima);
alert("valeur du cap : " + cap + " degrès.");

Attention : n'oubliez pas d'ajouter la bibliothèque geometry lorsque vous appelez le script de l'API Google Maps v3 :

<script async defer src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&libraries=geometry&callback=initialisation"></script>

Carte et calcul d'un cap à partir du point de départ et d'arrivée

Départ : Tours - Latitude : , Longitude : Départ
Arrivée : Fukushima - Latitude : , Longitude : Départ
Nord vrai : représenté par la ligne rouge
Parcours : représenté par la ligne bleue
Cap calculé : degrés par rapport au Nord vrai

Exemple de code pour calculer le cap à suivre pour aller du point de départ A au d'arrivée B

<!DOCTYPE html>
<html>
	<head>
		<title>Titre de votre page</title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<meta charset="UTF-8">
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 600px
			}
			#info {
				background: #fff;
				padding: 5px;
				font-size: 14px;
				font-family: arial
			}
		</style>
	</head>
	<body>
		<div id="EmplacementDeMaCarte"></div>
		<div id="info">
			<b>Départ</b> : Tours ( <span id="origineLat"></span>, <span id="origineLng"></span> ) <img src="https://static.touraineverte.fr/marqueurDvert.png" alt="Départ" width="10" height="16"/><br/>
			<b>Arrivée </b> : Fukushima ( <span id="destinationLat"></span>, <span id="destinationLng"></span> ) <span style="color:blue">Parcours ( Ligne bleue )</span> <img src="https://static.touraineverte.fr/pegman.gif" alt="Départ" width="7" height="14"/><br/>
			<b>Cap calculé</b> : <span id="cap"></span> degrés par rapport au <span style="color:red">Nord vrai ( Ligne rouge )</span> en tournant dans le sens des aiguilles d'une montre<br/>
		</div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
		<script>
			function initialisation () {
				/**
				 * Dans cet exemple on souhaite calculer le cap entre ces 2 points :
				 * Départ  : Tours (FR)     : 47.390273, 0.688834
				 * Arrivée : Fukushima (JA) : 37.316864, 141.024928
				 */
				var tours = new google.maps.LatLng(47.390273,0.688834);
				var fukushima = new google.maps.LatLng(37.316864,141.024928);
				var limites = new google.maps.LatLngBounds();
					limites.extend(tours);
					limites.extend(fukushima);
					limites.extend(new google.maps.LatLng(70.407348,66.796875));

				var optionsCarte = {
					zoom: 4,
					center: tours
				};
				var maCarte = new google.maps.Map(document.getElementById('EmplacementDeMaCarte'), optionsCarte);

				var marqueurDepart = new google.maps.Marker({
					map: maCarte,
					icon: {
						url: 'https://static.touraineverte.fr/marqueurDvert.png',
						size: new google.maps.Size(24, 38),
						anchor: new google.maps.Point(11, 37)
					},
					position: tours
				});
				var  marqueurArrivee = new google.maps.Marker({
					map: maCarte,
					icon: {
						url: 'https://static.touraineverte.fr/pegman.gif',
						size: new google.maps.Size(16, 31),
						anchor: new google.maps.Point(7, 30)
					},
					position: fukushima
				});
				var cap = google.maps.geometry.spherical.computeHeading(tours, fukushima);
				var nordVrai = [
					new google.maps.LatLng(47.390273,0.688834),
					new google.maps.LatLng(90,0.688818)
				]
				var nordVraiPolyline = new google.maps.Polyline({
					map: maCarte,
					path: nordVrai,
					strokeColor: '#FF0000',
					geodesic: true
				});
				var nordVraiCap = new google.maps.Polyline({
					map: maCarte,
					path: [ tours, fukushima ],
					strokeColor :'#0000FF',
					geodesic: true
				});
				document.getElementById('origineLat').innerHTML = tours.lat().toFixed(6);
				document.getElementById('origineLng').innerHTML = tours.lng().toFixed(6);
				document.getElementById('cap').innerHTML = cap;
				document.getElementById('destinationLat').innerHTML = fukushima.lat().toFixed(6);
				document.getElementById('destinationLng').innerHTML = fukushima.lng().toFixed(6);
				maCarte.fitBounds(limites);
			}
		</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&libraries=geometry&callback=initialisation"></script>
	</body>
</html>