Accueil

Créer et enrichir une barre d'outils avec OpenLayers

Ecrit par Arnaud le 24/05/2009.
| |

Introduction

OpenLayers permet, grâce à la classe EditingToolbar, de créer facilement une barre d'outils de dessin. Nous verrons au cours de ce tutoriel comment créer notre propre barre d'outils afin d'y ajouter de nouvelles fonctionnalités.

Création de la barre d'outils

Créer et enrichir sa propre barre d'outils n'est pas très difficile. Pour cela Openlayers met à notre disposition la classe Panel auquel nous ajoutons ensuite les outils que l'on souhaite à partir de la méthode addControls. Regardons le code ci-dessous pour comprendre :

//Création du l'objet Panel
panel = new OpenLayers.Control.Panel(
	{'displayClass': 'olControlEditingToolbar'}
);
 
controls = {
	move : new OpenLayers.Control.Navigation(),	
	select : new OpenLayers.Control.SelectFeature(vectors,
		{'displayClass': 'olControlSelect'}),		
	point: new OpenLayers.Control.DrawFeature(vectors,
		OpenLayers.Handler.Point,
		{'displayClass': 'olControlDrawFeaturePoint'}),
	line: new OpenLayers.Control.DrawFeature(vectors,
		OpenLayers.Handler.Path,
		{'displayClass': 'olControlDrawFeaturePath'}),
	polygon: new OpenLayers.Control.DrawFeature(vectors,
		OpenLayers.Handler.Polygon,
		{'displayClass': 'olControlDrawFeaturePolygon'}),
	zoomMaxExtent : new OpenLayers.Control.ZoomToMaxExtent
		({'displayClass': 'olControlMaxExtent'})
}
//Ajout des outils à la barre
for(var key in controls) {
	panel.addControls([controls[key]]);
}
//Ajout de la barre à la carte
map.addControl(panel);

Il est possible d'adapter le css à sa guise avec l'attribut displayClass. Prenons l'exemple de l'icone select :

.olControlEditingToolbar .olControlSelectItemActive { 
	background-image: url(./select_on.png);
	background-repeat: no-repeat;
	background-position: 0px 1px;
}
 
.olControlEditingToolbar .olControlSelectItemInactive { 
 	background-image: url(./select_off.png);
	background-repeat: no-repeat;
	background-position: 0px 1px;
}

Exemple

Retour en haut