openlayers pan zoom bar änderung

Question

ich bin neu bei openlayers und ich möchte lernen, wie kann ich pan zoom bar wie http://maps.cloudmade.com/ zoombar hinzufügen. es zeigt einigen Tag als Gebäude, Land usw., wenn Sie auf dieser Pfanne ...

Answer 1

Sie OpenLayers.Control.PanZoom außer Kraft setzen können, zum Beispiel:

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

Ich bin derzeit auch eine maßgeschneiderte Implementierung derivate von OpenLayers PanZoom-Steuerung. Leider enthält das PanZoom-Steuerelement eine Menge Code, viele Zeilen sind nur einem hart codierten Steuer-Styling gewidmet, das in CSS viel einfacher gestaltet werden kann (zB warum muss jeder Steuerungsknopf 18x18 Pixel sein?)

Felix ' Antwort ist ein guter Ausgangspunkt, aber wenn Sie Ihre PanZoom Steuerung nicht unbedingt dringend benötigen, würde ich warten bis OpenLayers 2.11 oder eine neuere Version herauskommt. Die OpenLayers-Entwickler reformieren derzeit viele der hartcodierten Formatierungen in CSS, wodurch der Steuercode schlanker und verständlicher wird.