openlayers pan缩放栏修改

Question

我是openlayers的新手，我想了解如何添加pan缩放栏像http://maps.cloudmade.com/ zoombar。它显示了一些标记作为建筑，国家等等，当你在这个泛...

Answer 1

您可以覆盖OpenLayers.Control.PanZoom，例如：

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

我也目前正在实施一个定制的衍生物的OpenLayer的PanZoom控件。不幸的是，PanZoom控件包含了大量的cruft代码，许多行只是致力于一些硬编码控件样式，可以在CSS中更容易完成（例如，为什么每个控件按钮都必须是18x18像素？）

Felix'答案是一个很好的起点，但如果你不需要实现你的PanZoom控件超级紧急，我会等到OpenLayers 2.11或更新的版本。 OpenLayers开发人员目前正在将许多硬编码格式重构为CSS，使得控制代码更加简单易懂。