Accueil » Déplacer des objets vecteurs sur la carte

Déplacer des objets vecteurs sur la carte

Ecrit par Arnaud le 22/08/2008.
| |

résumé: 
Nous apprendrons grace à l'API d'OpenLayers à déplacer des objets vecteurs sur une carte
pré-requis: 

- Disposer de la librairie OpenLayers

- Introduction -

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.

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 : 

olControlDraggFeatureItemActive , olControlDraggFeatureItemInactive .
     <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 :

Retour en haut

Il y a une erreur dans le

Par Jerome Teisseire (non vérifié), le dim, 07/05/2009 - 1:02am.

Il y a une erreur dans le script permettant d'afficher un marker:
ce n'est pas
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS","http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});

mais

var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS","http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});

Encore merci de partager ces informations !!!