Aller au contenu

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

📆 Date de publication initiale : 24 mai 2009

Introduction#

logo OpenLayers

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 :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//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 :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.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#

Info

Le serveur hébergeant la démonstration n'étant plus disponible depuis de nombreuses années, la démonstration, autre fois intégrée en iFrame est désactivée.
<iframe src="http://geotribu.net/applications/tutoriaux/openlayers/custom_toolbar/index.htm" height="500px" width="600px"></iframe>


Auteur#

Arnaud Vandecasteele#

portrait

Bien qu'issu à l'origine d'un parcours universitaire (doctorat et post-doc), j'ai finalement tenté l'aventure entrepreunariale au travers de Geolab.
Mes principaux centres d'intêrets dans le domaine de la géomatique portent sur les logiciels Open Source et plus particulièrement QGIS.
J'aime également le développement informatique avec une forte préférence à tout ce qui se passe côté serveur (base de données, traitements, etc.). Côté techno, mes choix se portent habituellement sur du (Geo)Django et PostgreSQL/PostGIS.

Pendant mon temps libre, vous me trouverez un GPS à la main afin de contribuer à OpenStreetMap ou sur un tatami en train de pratiquer le Jiu-Jitsu Brésilien.

Si vous êtes intéressé par l'un ou tous ces sujets, n'hésitez pas à me contacter !


Contributions à cette page : Julien Moura (59.52%), Florian Boret (40.48%)

Ce contenu est sous licence Creative Commons BY-NC-SA 4.0 International Pictogramme Creative Commons Pictogramme Creative Commons BY Pictogramme Creative Commons NC Pictogramme Creative Commons SA


Commentaires

Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.