javascript - 自定义 OpenLayers 控件

Question

如何轻松自定义 OpenLayers map 控件？或者至少，我怎样才能最小化控件的高度？

谢谢。

附言。是否有任何 CSS 覆盖？

Answer 1

您可以对任何 openLayers 控件进行子类化。我刚刚通过对 PanZoomBar (panZoomBar.js) 进行子类化，重写 draw() 方法并注释掉所有按钮元素，只留下缩放 slider ，制作了一个“缩放 slider ”。像这样:

function zoomSlider(options) {

    this.control = new OpenLayers.Control.PanZoomBar(options);

    OpenLayers.Util.extend(this.control,{
        draw: function(px) {
            // initialize our internal div
            OpenLayers.Control.prototype.draw.apply(this, arguments);
            px = this.position.clone();

            // place the controls
            this.buttons = [];

            var sz = new OpenLayers.Size(18,18);
            var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);

            this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0, 5), sz);
            centered = this._addZoomBar(centered.add(0, sz.h + 5));
            this._addButton("zoomout", "zoom-minus-mini.png", centered, sz);
            return this.div;
        }
    });
    return this.control;
}

var panel = new OpenLayers.Control.Panel();
panel.addControls([
    new zoomSlider({zoomStopHeight:11}),
    new OpenLayers.Control.LayerSwitcher({'ascending':false}),
]);
map.addControl(panel);