openlayers pan zoom barre modification

Question

je suis nouveau chez openlayers et je veux apprendre comment puis-je ajouter une barre de zoom panoramique comme http://maps.cloudmade.com/ barre de zoom. il montre une étiquette comme la construction, le pays, etc. lorsque vous sur ce pan ...

Answer 1

Vous pouvez remplacer OpenLayers.Control.PanZoom, par exemple:

idecan.PanZoom = OpenLayers.Class(OpenLayers.Control.PanZoom, { 

     bounds: null, 

     initialize: function(options) { 
      this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoom.X, 
               OpenLayers.Control.PanZoom.Y); 

      if (arguments[0].bounds) 
       this.bounds = arguments[0].bounds; 
      OpenLayers.Control.prototype.initialize.apply(this, arguments); 
     }, 

     includeButtons: { 
      "zoomin": { 
       outImageSrc: "zoom-plus-mini.png", 
       overImageSrc: "zoom-plus-mini-over.png" 
      }, 
      "zoomout": { 
       outImageSrc: "zoom-minus-mini.png", 
       overImageSrc: "zoom-minus-mini-over.png" 
      }, 
      "zoomworld": { 
       outImageSrc: "zoom-world-mini.png", 
       overImageSrc: "zoom-world-mini-over.png" 
      } 
     }, 

     makeMouseCallback: function(id, state) { 
      var selector = state + "ImageSrc"; 
      var src = OpenLayers.Util.getImagesLocation() + this.includeButtons[id][selector]; 
      return function(evt) { 
       var img = this.firstChild; 
       if (img.src != src) { 
        img.src = src; 
       } 
      }; 
     }, 

     _addButton: function(id, img, xy, sz) { 

      if (id in this.includeButtons) { 
       var src = this.includeButtons[id].outImageSrc; 
       var size = new OpenLayers.Size(18,18); 
       var btn = OpenLayers.Control.PanZoom.prototype._addButton.call(this, id, src, xy, size); 

       if (this.bounds) { 
        var bounds = this.bounds; 
        var getBounds = function() { 
         return bounds; 
        }; 
        btn.getBounds = getBounds; 
       } 

       btn.className = this.displayClass + id.capitalize(); 
       btn._btnId = id; 
       OpenLayers.Event.observe(btn, "mouseover", OpenLayers.Function.bindAsEventListener(this.makeMouseCallback(id, "over"), btn)); 
       OpenLayers.Event.observe(btn, "mouseout", OpenLayers.Function.bindAsEventListener(this.makeMouseCallback(id, "out"), btn)); 
       return btn; 
      } 
     }, 

     buttonDown: function (evt) { 
      if (!OpenLayers.Event.isLeftClick(evt)) { 
       return; 
      } 

      switch (this.action) { 
       case "panup": 
        this.map.pan(0, -this.getSlideFactor("h")); 
        break; 
       case "pandown": 
        this.map.pan(0, this.getSlideFactor("h")); 
        break; 
       case "panleft": 
        this.map.pan(-this.getSlideFactor("w"), 0); 
        break; 
       case "panright": 
        this.map.pan(this.getSlideFactor("w"), 0); 
        break; 
       case "zoomin": 
        this.map.zoomIn(); 
        break; 
       case "zoomout": 
        this.map.zoomOut(); 
        break; 
       case "zoomworld": 
        if (map.center) 
         map.setCenter(idecan.center, idecan.zoom); 
         //this.map.zoomToExtent(this.getBounds()); 
        else 
         this.map.zoomToMaxExtent(); 
        break; 
      } 

      OpenLayers.Event.stop(evt); 
     }, 

     CLASS_NAME: "idecan.PanZoom" 
    }); 

Answer 2

Je suis actuellement en œuvre un dérivé personnalisé du contrôle PanZoom d'OpenLayer. Malheureusement, le contrôle PanZoom contient beaucoup de code cruft, de nombreuses lignes sont juste consacrées à un style de contrôle codé en dur qui pourrait être fait beaucoup plus facilement en CSS (par exemple, pourquoi chaque bouton de contrôle doit-il être 18x18 pixels?). La réponse est un bon point de départ, mais si vous n'avez pas besoin d'implémenter votre contrôle PanZoom super urgent, j'attendrais jusqu'à OpenLayers 2.11 ou une version plus récente. Les développeurs d'OpenLayers sont actuellement en train de refactoriser un grand nombre de formatages codés en dur en CSS, rendant le code de contrôle plus mince et plus facile à comprendre.