24 mai 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