Aller au contenu

Déplacer des objets vecteurs sur la carte#

📆 Date de publication initiale : 22 août 2008

Introduction#

Logo OpenLayers

Ce tutorial est la suite logique de "Ajout d'une barre d'outil dessin à OpenLayers". En effet, nous allons étudier les différentes interactions possibles avec les objets de type vectors. Il s'appuie en grande partie de ressources disponibles sur le net, et notamment : OpenLayers Drag Feature.

Déplacer des objets sur la carte#

Le déplacement d'objet (feature) sur la carte est pré-programmé. En effet, l'API d'OpenLayers définit une méthode nommée DragFeature auquelle il faut passer en argument la couche qu'il est possible de déplacer.

 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<head>
<script>
function init() {
      var map, vectors, panel, controls, maxExtent;
    // 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);

     //Création du layer Editable de type vecteur
      vlayer = new OpenLayers.Layer.Vector( "Editable" );
     //Création du l'objet Panel
      panel = new OpenLayers.Control.Panel(
        {'displayClass': 'olControlEditingToolbar'});
     //Création des outils
     controls = {
        move : new OpenLayers.Control.Navigation(),
        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'}),
        drag: new OpenLayers.Control.DragFeature(vectors,
             {'displayClass':'olControlDraggFeature'})
     //Ajout des outils à la barre
      for(var key in controls) {
         panel.addControls([controls[key]]);
      }
     //Ajout de la barre à la carte
      map.addControl(panel);
    // Ajout de la barre d'outil de dessin à la carte
     panel.activateControl(controls.point)

 }
 }
</script>
</head>
</body onload="init()" >
    <div id="map" </div>
</body>
<html>

Définir un style pour l'icône de déplacement#

Il suffit ensuite de définir un style à à notre nouvelle outil DragFeature que nous avons défini comme appartenant à la classe : olControlDraggFeature . Il y a cependant une petite subtilité.

En effet en fonction que l'outil soit actif ou inactif, OpenLayers ajoute ItemInactive ou ItemActive , ce qui donne :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<style type="text/css">
#map {
  width: 512px;
  height: 350px;
  border: 1px solid gray;
}

.olControlDraggFeatureItemActive {
  background-image:url("Chemin_vers_Image/drag_on.png");
  background-repeat: no-repeat;
}
.olControlDraggFeatureItemInactive {
  background-image:url("Chemin_vers_Image/drag_off.png");
  background-repeat: no-repeat;
}
</style>

Les deux blocs de code présentés ci-dessus sont visibles sur l'exemple suivant :

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/toolbar/vector_move.htm" height="450px" width="100%"></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 !

Commentaires

Afin de favoriser les échanges constructifs, merci de préférer le pseudonymat à l'anonymat. Pour rappel, l'adresse mail n'est pas exposée publiquement. Consulter la page sur la confidentialité et les données personnelles.
Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.

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