résumé:
OpenLayers dispose par défaut de la classe EditingToolBar permettant de créer une barre d'outils. Nous étudierons le fonctionnement de celle-ci afin par la suite de l'enrichir avec nos propre outils.
pré-requis:
- Disposer de la librairie OpenLayers
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;
}