mercredi 03 mai 2017 20:12

Tester si un marqueur est à l'intérieur ou à l'extérieur d'un polygone

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

Cartographie et webmapping

Tester si un marker est positionné dans ou hors d'un polygone avec la méthode containsLocation

Dans ce tutoriel nous allons utiliser la méthode containsLocation() contenue dans l'espace de nommage google.maps.geometry.poly, pour vérifier si un marqueur est situé ou non dans un polygone.

La méthode containsLocation( point, polygone ) attend deux paramètres :

  • point : le point est un objet LatLng dont on veut tester la présence dans le polygone,
  • polygone : le polygone est un objet Polygon sur lequel est effectué le test.
et retourne un booléen :
  • true : si le point est situé sur le polygone,
  • false : si le point est situé hors du polygone,

function initialisation(){
	/**
	 * Création de la carte
	 */
	var optionsCarte = {
		zoom: 8,
		center: new google.maps.LatLng(47.389982, 0.688877)
	}
	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );

	/**
	 * Création du point
	 */
	var point = new google.maps.LatLng( 47.389982, 0.688877 );

	/**
	 * Création du polygone
	 */
	var sommetsDuPolygone = [
		{ 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 monPolygone = new google.maps.Polygon( {
		map: maCarte,
		paths: sommetsDuPolygone
	} );

	/**
	 * On teste si le point est contenu dans le polygone
	 */
	if ( google.maps.geometry.poly.containsLocation( point, monPolygone ) ) {
		/**
		 * Code à executer si le point est situé dans le polygone
		 */
		 alert("Le point est situé à l'intérieur du polygone");
	} else {

		/**
		 * Code à executer si le point est situé hors du polygone
		 */
		 alert("Le point est situé à l'extérieur du polygone");
	}
}

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?key=InsérezVotreCléApiGoogleMapsIci&libraries=geometry&callback=initialisation"></script>

Carte dont l'image du marqueur varie en fonction de sa présence ou non dans un polygone

Dans cet exemple, on affiche un polygone sur une carte, puis on génère de façon aléatoire une centaine de marqueurs.
Si le marqueur est situé à l'intérieur du polygone, il sera affiché sous la forme d'une punaise verte .
Si le marqueur est situé à l'extérieur du polygone, il sera affiché sous la forme d'une punaise rouge .

Exemple de code pour vérifier si un point est situé à l'intérieur ou à l'extérieur d'un polygone

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Titre de votre page</title>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte"></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 afficheCarte(){
				var optionsCarte ={
					center: { lat: 47.389982, lng: 0.688877 },
					zoom: 13
				}
				var maCarte = new google.maps.Map(document.getElementById("emplacement-Carte"), optionsCarte);

				var vertexPolygone = [
					{ 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 monPolygone = new google.maps.Polygon({ map: maCarte, paths: vertexPolygone });

				google.maps.event.addListenerOnce( maCarte, "tilesloaded", function(){ afficheMarqueurs( maCarte, monPolygone ) } );
			}

			function afficheMarqueurs( maCarte, monPolygone ) {
				var imageMarqueurRouge = {
					url: 'https://static.www.touraineverte.fr/googlemapsapiversion3/pointeRouge.png',
					size: new google.maps.Size(18, 34),
					origin: new google.maps.Point(0,0),
					anchor: new google.maps.Point(9, 34)
				};
				var imageMarqueurVert = {
					url: 'https://static.www.touraineverte.fr/googlemapsapiversion3/pointeVerte.png',
					size: new google.maps.Size(18, 34),
					origin: new google.maps.Point(0,0),
					anchor: new google.maps.Point(9, 34)
				};
				var limites  = maCarte.getBounds(),
					nordEst  = limites.getNorthEast(),
					sudOuest = limites.getSouthWest(),
					lngSpan  = nordEst.lng() - sudOuest.lng(),
					latSpan  = nordEst.lat() - sudOuest.lat();

				for ( var i = 0; i < 100; i++ ) {
					var latitude  = sudOuest.lat() + latSpan * Math.random(),
						longitude = sudOuest.lng() + lngSpan * Math.random(),
						point     = new google.maps.LatLng( latitude, longitude );
					var marqueur = new google.maps.Marker( {
						map: maCarte,
						position: point
					} );
					if( google.maps.geometry.poly.containsLocation( point, monPolygone ) ) {
						marqueur.setIcon( imageMarqueurVert );
					} else {
						 marqueur.setIcon( imageMarqueurRouge );
					}
				}
			}
		</script>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&libraries=geometry&callback=initialisation"></script>
	</body>
</html>