openlayers pan zoom bar修改

Question

我是openlayers的新手，我想學習如何添加像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控件包含很多偽代碼，許多行只是專門用於一些硬編碼控件樣式，可以在CSS中更容易完成（例如，為什么每個控制按鈕必須是18x18像素？）

Felix的回答是一個很好的起點，但是如果你不需要實現你的PanZoom控件超級緊急，我會等到OpenLayers 2.11或者一些較新的版本出來。 OpenLayers開發人員目前正在將許多硬編碼格式重構為CSS，使控制代碼更加纖薄，更容易理解。