2
22 aoû 2008

- Introduction -


Ce tutorial vous permettra d'intégrer une barre d'outil de dessin à votre environnement cartographique offert par OpenLayers. Pour les novices dans ce domaine, je vous conseille auparavant la lecture de cet autre article décrivant de manière détaillée ce qu'est la librairie OpenLayers ainsi que son utilisation. L'exemple présenté ci-dessous s'inspire de Editing Toolbar Example présenté sur les pages d'exemples du site d'OpenLayers.

- Ajouter un barre d'outil dessin -


L'ajout d'une barre d'outil dans l'environnement d'Open Layers n'est pas quelque chose de très dificille. En effet, cette fonctionnalité a été prévue dans le code lui même.

Il s'agit donc d'ajouter un nouvel objet (OpenLayers.Control.EditingToolbar) ainsi qu'une couche éditable ( OpenLayers.Layer.Vector( "Editable" ).


function init() {
var map, layer;
// Création du constructeur Map
map = new OpenLayers.Map( 'map', { controls: [] } );
// Nouvelle couche layer WMS
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS","http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
// Ajout de la couche WMS à la carte
map.addLayer(layer);
// Caractéristiques générales de la carte
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
map.addControl(new OpenLayers.Control.LayerSwitcher());
//Création du layer Editable de type vecteur
vlayer = new OpenLayers.Layer.Vector( "Editable" );
//Ajout du layer à la carte
map.addLayer(vlayer);
// Ajout de la barre d'outil de dessin
map.addControl(new OpenLayers.Control.EditingToolbar(vlayer));

}



L'exemple correspondant au code ci-dessus est présenté sur cette page : Ajout d'une barre de dessin à OpenLayers

- Placer la barre d'outils en dehors de la carte -


Par rapport au code précédent il y a peu de changements à effectuer pour placer la barre d'outils en dehors de la carte. En effet, la méthode openLayers.Control.EditingToolbar() peut prendre en argument optionnel le nom du DIV dans lequel sera placé la barre de dessin.


function init() {
var map, layer;
// Création du constructeur Map
map = new OpenLayers.Map( 'map', { controls: [] } );
// Nouvelle couche layer WMS
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS","http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
// Ajout de la couche WMS à la carte
map.addLayer(layer);
// Caractéristiques générales de la carte
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
map.addControl(new OpenLayers.Control.LayerSwitcher());
//Création du layer Editable de type vecteur
vlayer = new OpenLayers.Layer.Vector( "Editable" );
// Ajour de la barre d'outil
var divDessin = document.getElementById("barreDessin");
var panel = new OpenLayers.Control.EditingToolbar(vlayer, {div: divDessin});
map.addControl(panel);
//Ajout du layer à la carte
map.addLayer(vlayer);

}




A propos de l'auteur: 
Arnaud Vandecasteele

Fervent défenseur de l'Open Source, Arnaud s'est spécialisé dans le développement d'application cartographiques web. OpenLayers, PostGIS ou encore Django sont autant d'outils qu'il manipule au quotidien.
S'il n'est pas en face de son ordinateur, vous le retrouverez un GPS à la main en train de cartographier pour OpenStreetMap, de faire voler son drone ou sur un tatami !

Commentaires

Bonjour,

J'essaye de créer un programme pour créer des zones sur une carte et les insérer dans un base de donnée. Pour cela, il me faut savoir si on trace une polyligne, un polygone etc.... et récupérer le positionnement des clics que l'on fait pour définir notre objet.... quelqu'un aurait une idée comment faire??

Merci

Bonjour pour des questions aussi générales je vous propose de les poser directement sur le site ForumSig avec qui nous sommes partenaire. Nous serons plus nombreux à pouvoir vous aider.

Arnaud