Pour les géomaticiennes et géomaticiens qui ne savent pas comment s’y prendre, vous lisez le bon article pour apprendre à draguer sur Internet. On ne parlera pas de matching spatial comme certains auraient pu l’imaginer mais de translation de donnée vectorielle. En clair, un objet géographique n’est pas localisé au bon endroit sur la cartographie pour diverses raisons et il est indispensable de le situer précisément. A titre d’exemple, il arrive souvent que la géolocalisation ou encore le géocodage d’une adresse génèrent des coordonnées géographiques incorrectes. Pour corriger cette erreur, OpenLayers (v4) a implémenté la classe ol.interaction.Translate qui permet à l’utilisateur de déplacer un objet sélectionné grâce à la classe ol.interaction.Select. D’ailleurs, un exemple basique de translation de pays est mise à disposition sur le site d’OpenLayers.

Dans ce tutoriel, après le chargement de l’API d’OpenLayers, on code un script qui autorise l’utilisateur à draguer un objet géographique dessiné par ses soins.

1. Dessin d’une géométrie spatiale avec OpenLayers

Les géométries spatiales composant un vecteur peuvent être un point, une ligne, un polygone, des multi points, des multi lignes, des multi polygones, ou encore une mixité de ces différentes formes que l’on appelle collection de géométries. OpenLayers permet de dessiner ces différents types de géométries (hors collection) en précisant l’option type de la classe ol.interaction.Draw. A l’intérieur de cette dernière, on saisit également la source de donnée vectorielle prise en charge puis on ajoute l’interaction à l’objet associé à la classe ol.Map.

// Source de données et couche OpenStreetMap
var osm = new ol.layer.Tile({
	source: new ol.source.OSM(),
});

// Ajout d'un vecteur sans objet géographique dans sa source de donnée
var sourceVecteur = new ol.source.Vector();
var coucheVecteur = new ol.layer.Vector({
	source: sourceVecteur
});

// Déclaration de la carte
var map = new ol.Map({
	layers: [osm,coucheVecteur],
	target: 'map',
	view: new ol.View({
		center: [0,0],
		zoom: 2,
		minZoom: 1
	}),
});

// Interaction du dessin
var dessin = new ol.interaction.Draw({
	type: 'Point',
	source: sourceVecteur,
});
map.addInteraction(dessin);

A ce stade, le dessin des points sur la carte est fonctionnel.

2. Translation de la donnée vectorielle dessinée

On ajoute la possibilité de sélectionner l’objet géographique dessiné et cette interaction est ajoutée seulement lorsque le dessin est terminé. L’option condition indique la manière de sélectionner la donnée (clic, double clic, etc).

// Interaction de la sélection
var selection = new ol.interaction.Select({
	condition: ol.events.condition.doubleClick,
});

// Fin du dessin du Point
dessin.on('drawend', function(){
	map.removeInteraction(dessin);
	map.addInteraction(selection);
});

Puis, l’objet sélectionné peut être ensuite déplacé grâce à la classe ol.interaction.Translate. Dans l’objet lié à la translation et l’option features, on indique  les données correspondantes aux objets géographiques sélectionnés par la méthode getFeatures :

// Interaction de la translation
var translation = new ol.interaction.Translate({
	features: selection.getFeatures()
});

// Fin du dessin du Point
dessin.on('drawend', function(){
	map.removeInteraction(dessin);
	map.addInteraction(selection);
	map.addInteraction(translation);
});

Et pendant le déplacement du vecteur dessiné, ses coordonnées peuvent être obtenues dans un tableau :

translation.on('translating', function(e){
	console.log(e.coordinate);
});

Et voici le script final :

Veuillez vous Connecter pour consulter ce contenu. S'Inscrire Gratuitement ››

En conclusion, il est souvent utile de donner la possibilité de modifier la localisation d’un objet géographique sur une interface de WebMapping. A travers ce tutoriel, on a introduit trois types d’interactions intégrées à l’API d’OpenLayers : la sélection, le dessin et la translation d’une donnée vectorielle. Pour aller plus loin, on peut imaginer déclencher ces actions en cliquant sur un nouveau contrôle créé sur l’interface cartographique. Il serait aussi intéressant de montrer les coordonnées de l’objet géographique dans une infobulle via un overlay.

Vous avez besoin de vous former rapidement sur OpenLayers? N’hésitez pas à me contacter pour accéder à des formations en ligne à des prix très attractifs.