Zoom sur la géolocalisation

Zoom sur la géolocalisation du visiteur grâce à l'API d'OpenLayers (v4). Ce script fonctionne avec Google Chrome avec un certificat SSL. Plus de détails ici...

23/02/2017 1886 vues
0 commentaire(s)

Précision : m | Position : ° ; °

Langages : HTML,CSS,JavaScript Outils SIG : OpenLayers Autres outils : JQuery Data : NA

index.html


			<!DOCTYPE html>
			<html>
				<head>
					<title>Zoom sur la géolocalisation</title>
					<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
					<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
					<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
					<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>	
				</head>
				<body>
					<div>
						Précision : <span id="precision"></span> m | Position : <span id="latitude"></span>° ; <span id="longitude"></span>°
					</div>
					<div id="carte"></div>
					<script>
						// Vue
						var view = new ol.View({
							center: [0, 0],
							zoom: 2,
							maxZoom: 19,
						});
						// Carte avec un fonds de carte
						var map = new ol.Map({
							layers: [
							  new ol.layer.Tile({
								source: new ol.source.OSM()
							  })
							],
							target: 'carte',
							view: view
						});
						// Objet géographique de la position de géolocalisation
						var ObjPosition = new ol.Feature();
						// Attribution d'un style à l'objet
						ObjPosition.setStyle(new ol.style.Style({
							image: new ol.style.Circle({
								radius: 6,
								fill: new ol.style.Fill({
									color: '#3399CC'
								}),
								stroke: new ol.style.Stroke({
									color: '#fff',
									width: 2
								})
							})
						}));
						// Géolocalisation
						var geolocation = new ol.Geolocation({
						  // On déclenche la géolocalisation
						  tracking: true,
						  // Important : Projection de la carte
						  projection: view.getProjection()
						}); 
						// On scrute les changements des propriétés
						geolocation.on('change', function(evt) {
							var precision = geolocation.getAccuracy();
							$("#precision").html(precision);
							var position = geolocation.getPosition();
							// On transforme la projection des coordonnées
							var newPosition=ol.proj.transform(position, 'EPSG:3857','EPSG:4326');
							$("#latitude").html(newPosition[1]);
							$("#longitude").html(newPosition[0]);
							// Attribution de la géométrie de ObjPosition avec les coordonnées de la position
							ObjPosition.setGeometry( position ? new ol.geom.Point(position) : null );
						});
						// On alerte si une erreur est trouvée
						geolocation.on('error', function(erreur) {
							alert('Echec de la géolocalisation : ' +erreur.message);       
						});
						// Source du vecteur contenant l'objet géographique
						var sourceVecteur = new ol.source.Vector({
								features: [ObjPosition]
						});
						// Couche vectorielle 
						var vecteur = new ol.layer.Vector({
							map: map,
							source: sourceVecteur
						});
						// Zoom sur l'emprise du vecteur
						sourceVecteur.once('change', function(evt){
							// On vérifie que la source du vecteur sont chargés
							if (sourceVecteur.getState() === 'ready') {
								// On vérifie que le veteur contient au moins un objet géographique
								if (sourceVecteur.getFeatures().length >0) {
									// On adapte la vue de la carte à l'emprise du vecteur
									map.getView().fit(sourceVecteur.getExtent(), map.getSize());
								}
							}
						});
					</script>
				</body>
			</html>
		

Laissez un commentaire

Inscrivez-vous gratuitement afin de rejoindre la communauté des Geomatickers!