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，使控制代码更加简洁易懂。

openlayers pan zoom bar修改

2 个答案: