Tester la position d'un point par rapport à un Polygone ou une Polyline

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

google.maps.geometry.poly

La bibliothèque google.maps.geometry contient un espace de nommage appelé poly : google.maps.geometry.poly. Celui-ci contient des fonctions utilitaires permettant de connaître la position d'un point par rapport à un polygone ou une polyline. Deux méthodes sont disponibles :

Attention : pour utiliser ces méthodes, n'oubliez pas d'ajouter la bibliothèque geometry dans l'appel du 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>

Tester si un point est situé à l'intérieur ou l'extérieur d'un polygone - containsLocation

La méthode containsLocation permet de tester si un point, sous la forme d'un objet LatLng, est situé dans ou hors d'un polygone.

la méthode containsLocation attend deux paramètres :

  • point (objet LatLng) : point dont on veut tester ou vérifier la présence dans le polygone,
  • polygone (objet Polygon) : Polygone sur lequel est effectué le test.
et elle renvoie un booléen :
  • true : si le point est situé à l'intérieur du polygone,
  • false : si le point est situé à l'extérieur du polygone.

Le code ci-dessous permet de savoir si le point cliqué sur la carte est situé à l'intérieur ou à l'extérieur du polygone :

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: new google.maps.LatLng(47.389982, 0.688877)
	}
	var tableauDeLatLng = [
		new google.maps.LatLng( 47.406830, 0.649909 ),
		new google.maps.LatLng( 47.406830, 0.745525 ),
		new google.maps.LatLng( 47.390330, 0.736255 ),
		new google.maps.LatLng( 47.367547, 0.689391 ),
		new google.maps.LatLng( 47.383822, 0.660037 )
	];

	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );
	
	var monPolygone = new google.maps.Polygon( { paths:tableauDeLatLng } );
	
	google.maps.event.addListener( maCarte, "click", function( evenement ) {
		if ( google.maps.geometry.poly.containsLocation( evenement.latLng, monPolygone ) ) {
			alert("Le point cliqué est situé à l'intérieur du polygone");
		} else {
			alert("Le point cliqué est situé à l'extérieur du polygone");
		}
	});
}

Les classes Map et Polygon héritant de la classe MVCObject voici une autre écriture possible :

function initialisation(){
	var tableauDeLatLng = [
		{ lat: 47.406830, lng: 0.649909 },
		{ lat: 47.406830, lng: 0.745525 },
		{ lat: 47.390330, lng: 0.736255 },
		{ lat: 47.367547, lng: 0.689391 },
		{ lat: 47.383822, lng: 0.660037 }
	];

	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
		maCarte.setValues({
			zoom: 8,
			center: { lat: 47.389982, lng: 0.688877 }
		});

	var monPolygone = new google.maps.Polygon();
		monPolygone.set("paths", tableauDeLatLng);	

	maCarte.addListener( "click", function( evenement ) {
		if ( google.maps.geometry.poly.containsLocation( evenement.latLng, monPolygone ) ) {
			alert("Le point cliqué est situé à l'intérieur du polygone");
		} else {
			alert("Le point cliqué est situé à l'extérieur du polygone");
		}
	});
}
Attention : Vous remarquerez que lors de création du polygone on n'utilise pas la propriété map pour définir la carte sur laquelle afficher le polygone.
On ne cherche pas à afficher le polygone sur la carte, mais simplement à utiliser les données du polygone pour savoir si un point quelconque est situé à l'interieur ou à l'extérieur de ce polygone.
Sur la carte ci-dessus, un polygone est créé, symbolisé par le trait rouge.
À chaque fois que vous allez cliquer sur la carte :
  • un marqueur s'affiche sur le point cliqué :
    • vert si le point cliqué est situé sur le polygone,
    • rouge si le point cliqué est situé à l'extérieur du polygone,
  • les coordonnées GPS et la position ( intérieur ou extérieur ) de ce point par rapport au polygone s'affichent ci-dessous.
Le point sur lequel vous venez de cliquer ( Lat: , Lng: ) est situé à l' du polygone.

Vous pouvez voir un tutoriel et un exemple complet ici : Tester si un marqueur est situé à l'intérieur ou à l'extérieur d'un polygone

Tester la position d'un point par rapport à un polygone ou une polyline avec isLocationOnEdge

La méthode isLocationOnEdge(point, polygone|polyline, tolérance) permet de tester ou vérifier si un point, sous la forme d'un objet LatLng, est situé sur ou à proximité du périmètre d'un polygone ou d'une polyline, avec une certaine tolérance.

La méthode isLocationOnEdge(point, polygone|polyline, tolérance) attend trois paramètres :

  • point (objet LatLng) : point dont on veut tester la présence sur ou à proximité d'une polyline ou, sur ou à proximité du bord d'un polygone,
  • polygone|polyline (objet Polygon ou Polyline) : Polygone ou Polyline sur lequel ou laquelle est effectué le test.
  • tolerance (en degrès) : la tolérance est un angle exprimé en degrès. Par défaut, la tolérance vaut 10-9 degrès.

La valeur retournée est un booléen :

  • true : le point est alors situé sur ou à proximité du polyline, ou le point est situé sur ou à proximité de la bordure du polygone,
  • false : le point n'est pas situé sur ou à proximité du polyline, ou le point n'est pas situé sur ou à proximité de la bordure du polygone.

Tester la position d'un point par rapport au périmètre d'un polygone avec isLocationOnEdge

Le code ci-dessous permet de savoir si le point cliqué sur la carte est situé sur ou à proximité de la bordure du polygone :

function initialisation(){
	var tolerance = 0.006;
	var optionsCarte = {
		zoom: 8,
		center: new google.maps.LatLng(47.389982, 0.688877)
	};
	var tableauDeLatLng = [
		new google.maps.LatLng( 47.406830, 0.649909 ),
		new google.maps.LatLng( 47.406830, 0.745525 ),
		new google.maps.LatLng( 47.390330, 0.736255 ),
		new google.maps.LatLng( 47.367547, 0.689391 ),
		new google.maps.LatLng( 47.383822, 0.660037 )
	];

	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );

	var monPolygone = new google.maps.Polygon( { paths:tableauDeLatLng } );

	google.maps.event.addListener( maCarte, "click", function( evenement ) {
		if ( google.maps.geometry.poly.isLocationOnEdge( evenement.latLng, monPolygone, tolerance ) ) {
			alert("Le point cliqué est situé sur ou à proximité de la bordure du polygone");
		} else {
			alert("Le point cliqué n'est pas situé sur ou à proximité de la bordure du polygone");
		}
	});
}

Les classes Map et Polygon héritant de la classe MVCObject voici une autre écriture possible :

function initialisation(){
	var tolerance = 0.006,
		tableauDeLatLng = [
			{ lat: 47.406830, lng: 0.649909 },
			{ lat: 47.406830, lng: 0.745525 },
			{ lat: 47.390330, lng: 0.736255 },
			{ lat: 47.367547, lng: 0.689391 },
			{ lat: 47.383822, lng: 0.660037 }
		];

	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
		maCarte.setValues({
			zoom: 8,
			center: {lat: 47.389982, lng: 0.688877 }
		});

	var monPolygone = new google.maps.Polygon();
		monPolygone.set( "paths", tableauDeLatLng );

	maCarte.addListener( "click", function( evenement ) {
		if ( google.maps.geometry.poly.isLocationOnEdge( evenement.latLng, monPolygone, tolerance ) ) {
			alert("Le point cliqué est situé sur ou à proximité de la bordure du polygone");
		} else {
			alert("Le point cliqué n'est pas situé sur ou à proximité de la bordure du polygone");
		}
	});
}
Attention : Vous remarquerez que lors de création du polygone on n'utilise pas la propriété map pour définir la carte sur laquelle afficher le polygone.
On ne cherche pas à afficher le polygone sur la carte, mais simplement à utiliser les données du polygone pour savoir si un point quelconque est situé sur ou à proximité de la bordure de ce polygone.
Sur la carte ci-dessus, un polygone est créé, symbolisé par le trait rouge.
À chaque fois que vous allez cliquer sur la carte :
  • un marqueur s'affiche sur le point cliqué :
    • vert si le point cliqué est sur ou à proximité de la bordure du polygone,
    • rouge si le point cliqué n'est pas sur ou à proximité de la bordure du polygone,
  • les coordonnées GPS et la position ( intérieur ou extérieur ) de ce point par rapport au polygone s'affichent ci-dessous.
Le point sur lequel vous venez de cliquer ( Lat: , Lng: ) est situé à l' du polygone.

Vous pouvez voir un tutoriel et un exemple complet ici : Tester si un marqueur est situé sur ou à proximité du périmètre d'un polygone.

Tester la position d'un point par rapport à une polyline avec isLocationOnEdge

Le code ci-dessous permet de savoir si le point cliqué est situé sur ou à proximité de la polyline :

function initialisation(){
	var tolerance = 0.006;
	var optionsCarte = {
		zoom: 8,
		center: new google.maps.LatLng(47.389982, 0.688877)
	};
	var tableauDeLatLng = [
		new google.maps.LatLng( 47.406830, 0.649909 ),
		new google.maps.LatLng( 47.406830, 0.745525 ),
		new google.maps.LatLng( 47.390330, 0.736255 ),
		new google.maps.LatLng( 47.367547, 0.689391 ),
		new google.maps.LatLng( 47.383822, 0.660037 )
	];

	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );

	var maPolyline = new google.maps.Polyline( { path: tableauDeLatLng } );

	google.maps.event.addListener( maCarte, "click", function( evenement ) {
		if ( google.maps.geometry.poly.isLocationOnEdge( evenement.latLng, maPolyline, tolerance ) ) {
			alert("Le point cliqué est situé sur ou à proximité de la polyline");
		} else {
			alert("Le point cliqué n'est pas situé sur ou à proximité de la polyline");
		}
	});
}

Les classes Map et Polyline héritant de la classe MVCObject voici une autre écriture possible :

function initialisation(){
	var tolerance = 0.006,
		tableauDeLatLng = [
			{ lat: 47.406830, lng: 0.649909 },
			{ lat: 47.406830, lng: 0.745525 },
			{ lat: 47.390330, lng: 0.736255 },
			{ lat: 47.367547, lng: 0.689391 },
			{ lat: 47.383822, lng: 0.660037 }
		];

	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
		maCarte.setValues({
			zoom: 8,
			center: {lat: 47.389982, lng: 0.688877 }
		});

	var maPolyline = new google.maps.Polyline();
		maPolyline.set( "path", tableauDeLatLng );
		
	maCarte.addListener( "click", function( evenement ) {
		if ( google.maps.geometry.poly.isLocationOnEdge( evenement.latLng, maPolyline, tolerance ) ) {
			alert("Le point cliqué est situé sur ou à proximité de la polyline");
		} else {
			alert("Le point cliqué n'est pas situé sur ou à proximité de la polyline");
		}
	});
}
Attention : Vous remarquerez que lors de création de la polyline on n'utilise pas la propriété map pour définir la carte sur laquelle afficher la polyline.
On ne cherche pas à afficher la polyline sur la carte, mais simplement à utiliser les données de la polyline pour savoir si un point quelconque est situé sur ou à proximité de la bordure de cette polyline.
Sur la carte ci-dessus, une polyline est créée, symbolisée par le trait rouge.
À chaque fois que vous allez cliquer sur la carte :
  • un marqueur s'affiche sur le point cliqué :
    • vert si le point cliqué est sur ou à proximité de la polyline,
    • rouge si le point cliqué n'est pas sur ou à proximité de la polyline,
  • les coordonnées GPS et la position de ce point par rapport à la polyline ( intérieur ou extérieur ) seront affichés ci-dessous.
Le point sur lequel vous venez de cliquer ( Lat: , Lng: ) situé sur ou à proximité de la polyline.

Vous pouvez voir un tutoriel et un exemple complet ici : Tester si un marqueur est situé sur ou à proximité d'une polyline.