地图放大镜（Magnifying Glass）

 在Google、Baidu和MAPABC地图中都有的效果，就是用鼠标滚轮上滚和下滚的时候会出一个平滑放大、缩小的红框动画效果，自己做还挺费劲的呢！看到MAPABC的AJAX API是OPENLAYERS 做核心，脸皮一厚就扣出来用了，整理了一下封装成控件，可以很方便的加到地图中。代码是经过压缩混淆的，有时间再研究整理吧，先这样。

 

在此感谢MAPABC，如果他们不是扣别人的，版本归他们所有，特此声明！

 

OpenLayers.Control.MagnifyingGlass = OpenLayers.Class(OpenLayers.Control, {    autoActivate: true,    initialize: function(){        OpenLayers.Control.prototype.initialize.apply(this, arguments);    },        draw: function(){        OpenLayers.Control.prototype.draw.apply(this, arguments);        this.handler = new OpenLayers.Handler.MouseWheel(this, {            "down": this.magnifyingglassZoomOut,            "up": this.magnifyingglassZoomIn        });        this.initDiv();            },        initDiv: function(){        var a = OpenLayers.Util.createDiv("map_magnifyingglass");        a.style.borderRight = "medium none";        a.style.borderTop = "medium none";        a.style.borderLeft = "medium none";        a.style.borderBottom = "medium none";        a.style.width = "111px";        a.style.height = "74px";        a.style.display = "none";        a.style.unselectable = "on";        var c = OpenLayers.Util.createDiv();        c.style.lineHeight = "1px";        c.style.width = "4px";        c.style.height = "4px";        c.style.left = "0";        var b = OpenLayers.Util.createDiv();        b.style.lineHeight = "1px";        b.style.width = "4px";        b.style.height = "4px";        b.style.right = "0";        var d = OpenLayers.Util.createDiv();        d.style.lineHeight = "1px";        d.style.width = "4px";        d.style.height = "4px";        d.style.right = "0";        d.style.top = "40px";        var e = OpenLayers.Util.createDiv();        e.style.lineHeight = "1px";        e.style.width = "4px";        e.style.height = "4px";        e.style.left = "0";        e.style.top = "40px";        a.appendChild(c);        a.appendChild(b);        a.appendChild(d);        a.appendChild(e);        this.map.viewPortDiv.appendChild(a)    },        bw_out: null,    bw_in: null,    variable: 1,    getTimeout: function(a, b, c){        return window.setTimeout(function(){            b.apply(a)        }, c)    },    magnifyingglassZoomOut: function(a){        if (this.variable == 1) {            var b = OpenLayers.Util.getElement("map_magnifyingglass");            if (b) {                b.style.width = 111;                b.style.height = 74;                this.evt = a;                this.out()            }        }    },    magnifyingglassZoomIn: function(a){        if (this.variable == 1) {            var b = OpenLayers.Util.getElement("map_magnifyingglass");            if (b) {                b.style.width = "27px";                b.style.height = "24px";                this.evt = a;                this.in_()            }        }    },    out: function(){        this.Rx1(true)    },    in_: function(){        this.Rx1(false)    },    Rx1: function(a){        var b = OpenLayers.Util.getElement("map_magnifyingglass");        if (this.variable <= 4) {            if (b) {                var c = 1, d;                if (a) {                    d = parseInt(b.style.width);                    obj_h = parseInt(b.style.height);                    c *= 15;                    if (d >= 30) {                        if (d && c)                             b.style.width = Math.abs(d - (c + 6)) + "px";                        if (obj_h >= 25)                             if (obj_h && c)                                 b.style.height = Math.abs(obj_h - c) + "px";                        b.style.left = this.evt.xy.x -                        parseInt(b.style.width) /                        2 +                        "px";                        b.style.top = this.evt.xy.y -                        parseInt(b.style.height) /                        2 +                        "px";                        b.childNodes[0].style.borderWidth = "0px 2px 2px 0px";                        b.childNodes[0].style.borderStyle = "solid";                        b.childNodes[0].style.borderColor = "red";                        b.childNodes[1].style.borderWidth = "0px 0px 2px 2px";                        b.childNodes[1].style.borderStyle = "solid";                        b.childNodes[1].style.borderColor = "red";                        b.childNodes[2].style.borderWidth = "2px 0px 0px 2px";                        b.childNodes[2].style.borderStyle = "solid";                        b.childNodes[2].style.borderColor = "red";                        b.childNodes[3].style.borderWidth = "2px 2px 0px 0px";                        b.childNodes[3].style.borderStyle = "solid";                        b.childNodes[3].style.borderColor = "red";                        b.childNodes[2].style.top = b.style.height;                        b.childNodes[3].style.top = b.style.height;                        b.style.display = "";                        b.style.zIndex = 1010                    }                    this.variable++;                    this.bw_out = this.getTimeout(this, a ? this.out : this.in_, 60)                }                else {                    d = parseInt(b.style.width);                    obj_h = parseInt(b.style.height);                    c *= 15;                    if (d <= 111) {                        b.style.width = Math.abs(d + c) + "px";                        if (obj_h <= 64)                             b.style.height = Math.abs(obj_h + c) + "px";                        b.style.left = this.evt.xy.x -                        parseInt(b.style.width) /                        2 +                        "px";                        b.style.top = this.evt.xy.y -                        parseInt(b.style.height) /                        2 +                        "px";                        b.childNodes[0].style.borderWidth = "2px 0px 0px 2px";                        b.childNodes[0].style.borderStyle = "solid";                        b.childNodes[0].style.borderColor = "red";                        b.childNodes[1].style.borderWidth = "2px 2px 0px 0px";                        b.childNodes[1].style.borderStyle = "solid";                        b.childNodes[1].style.borderColor = "red";                        b.childNodes[2].style.borderWidth = "0px 2px 2px 0px";                        b.childNodes[2].style.borderStyle = "solid";                        b.childNodes[2].style.borderColor = "red";                        b.childNodes[3].style.borderWidth = "0px 0px 2px 2px";                        b.childNodes[3].style.borderStyle = "solid";                        b.childNodes[3].style.borderColor = "red";                        b.childNodes[2].style.top = b.style.height;                        b.childNodes[3].style.top = b.style.height;                        b.style.display = "";                        b.style.zIndex = 1010                    }                    this.variable++;                    this.bw_in = this.getTimeout(this, a ? this.out : this.in_, 100)                }            }        }        else {            if (a) {                window.clearTimeout(this.bw_out);                this.bw_out = null            }            else {                window.clearTimeout(this.bw_in);                this.bw_in = null            }            this.variable = 1;            b.style.display = "none";            b.style.zIndex = 0;            b.style.width = "111px";            b.style.height = "74px"        }    }});

使用方法：

var glass = new OpenLayers.Control.MagnifyingGlass();map.addControl(glass);

懒了，没有写销毁方法，可能会存在内存泄露。