Calculer un point intermédiaire situé sur un tracé à X % du point de départ

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 l'emplacement d'un point situé entre deux points connus via une fraction

Dans ce tutoriel nous allons utiliser la méthode interpolate(), présente dans google.maps.geometry.spherical, pour calculer l'emplacement d'un point positionné le long d'un chemin, et situé à une distance fractionnaire connue du point d'origine.

La méthode interpolate(pointDepart, pointArrivee, distanceFractionnaire) nécessite trois paramètres :

  • les coordonnées du point de départ : {LatLng},
  • les coordonnées du point d'arrivée : {LatLng},
  • une valeur comprise entre 0 et 1 correspondant à la distance fractionnaire {number}.

La valeur retournée est un objet {LatLng}.

var pointIntermediaire = google.maps.geometry.spherical.interpolate( pointDepart, pointArrivee, distanceFractionnaire )
google.maps.geometry.spherical.computeOffset
/**
 * Dans cet exemple on souhaite connaître l'emplacement du point intermédiaire :
 * - placé sur la trajectoire de deux point connus ( Départ & Arrivée)
 * - situé à 75% du point de départ (distance fractionnaire entre 0 et 1)
 */
var distanceFractionnaire = .75;
var pointDepart = new google.maps.LatLng(47.390287,0.688818);
var pointArrivee = new google.maps.LatLng(47.128151,0.997739);

/**
 * Résultat on arrive sur le point pointIntermediaire
 * ayant pour coordonnées GPS :
 * 48.021604151492255, 1.6385190734584967
 */
var pointIntermediaire = google.maps.geometry.spherical.interpolate( pointDepart, pointArrivee, distanceFractionnaire );

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

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>

Carte où la position d'un point est calculée à partir du point de départ d'une droite et d'une fraction

Départ : Latitude : - Longitude : Départ
Arrivée : Latitude : - Longitude : Départ
Parcours : Ligne bleue
Point intermédiaire calculé : Latitude : - Longitude : Départ

Code pour déterminer l'emplacement d'un point sur un chemin connu à X % du point de départ

<!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 type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 600px
			}
			#info {
				background: #fff;
				padding: 5px;
				font-size: 14px;
				font-family: arial
			}
		</style>
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
		<script type="text/javascript">
			function initialisation () {
				/**
				 * Dans cet exemple on souhaite connaître l'emplacement du point intermédiaire :
				 *  - localisé entre deux point connus : pointDepart et pointArrivee,
				 *  - situé à 70% du parcours par rapport au pointDepart (chiffre entre 0 et 1).
				 */
				var distanceFractionnaire = .70;
				var pointDepart = new google.maps.LatLng(47.390273,0.688834);
				var pointArrivee = new google.maps.LatLng(37.316864,141.024928);
				var pointIntermediaire = google.maps.geometry.spherical.interpolate(pointDepart, pointArrivee, distanceFractionnaire);
				var limites = new google.maps.LatLngBounds();
				limites.extend(pointDepart);
				limites.extend(pointArrivee);
				limites.extend(new google.maps.LatLng(70.407348,66.796875));
				limites.extend(pointIntermediaire);
				var optionsCarte = {
					zoom: 4,
					center: pointDepart,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var marqueurDepart = new google.maps.Marker({
					map: maCarte,
					icon: new google.maps.MarkerImage("https://static.touraineverte.fr/marqueurDvert.png", new google.maps.Size(24, 38), new google.maps.Point(0,0), new google.maps.Point(11, 37)),
					position: pointDepart
				});
				var  marqueurArrivee = new google.maps.Marker({
					map: maCarte,
					icon: new google.maps.MarkerImage("https://static.touraineverte.fr/marqueurArouge.png", new google.maps.Size(24, 38), new google.maps.Point(0,0), new google.maps.Point(11, 37)),
					position: pointArrivee
				});
				var  marqueurIntermediaire = new google.maps.Marker({
					map: maCarte,
					icon: new google.maps.MarkerImage("https://static.touraineverte.fr/pegman.gif", new google.maps.Size(16, 31), new google.maps.Point(0,0), new google.maps.Point(7, 30)),
					position: pointIntermediaire
				});
				var nordVraiCap = new google.maps.Polyline({map:maCarte,path:[pointDepart,pointArrivee],strokeColor:"#0000FF",geodesic:true});
				document.getElementById("origineLat").innerHTML = pointDepart.lat().toFixed(6);
				document.getElementById("origineLng").innerHTML = pointDepart.lng().toFixed(6);
				document.getElementById("destinationLat").innerHTML = pointArrivee.lat().toFixed(6);
				document.getElementById("destinationLng").innerHTML = pointArrivee.lng().toFixed(6);
				document.getElementById("intermediaireLat").innerHTML = pointIntermediaire.lat().toFixed(6);
				document.getElementById("intermediaireLng").innerHTML = pointIntermediaire.lng().toFixed(6);
				maCarte.fitBounds(limites);
			}
			google.maps.event.addDomListener( window, "load", initialisation );
		</script>
	</head>
	<body>
		<div id="EmplacementDeMaCarte"></div>
		<div id="info">
			<b>Départ</b> : Latitude : <span id="origineLat"></span> - Longitude : <span id="origineLng"></span> <img src="https://static.touraineverte.fr/marqueurDvert.png" alt="Départ" width="10" height="16"/><br/>
			<b>Arrivée</b> : Latitude : <span id="destinationLat"></span> - Longitude : <span id="destinationLng"></span> <img src="https://static.touraineverte.fr/marqueurArouge.png" alt="Départ" width="7" height="14"/><br/>
			<b>Parcours</b> : <span style="color:blue"> Ligne bleue </span><br/>
			<b>Intermédiaire</b> situé à 70% du point de <b>Départ</b> : Latitude : <span id="intermediaireLat"></span> - Longitude : <span id="intermediaireLng"></span> <img src="https://static.touraineverte.fr/pegman.gif" alt="Départ" width="7" height="14"/>
		</div>
	</body>
</html>