Javascript 自定义OpenLayers控件

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

多谢各位

---

PS.是否有CSS覆盖？

以最小化OpenLayers.js中ZoomBar对

zoomStopHeight

的搜索，并根据需要进行编辑

进一步参考：。

请看这里- 我正在演示如何对LayerSwitcher进行复杂的定制。这可能会给你关于如何做你所追求的事情的想法

页面上有一个地图显示了控件是如何工作的，后续文章将详细讨论代码

---

如果您对代码感兴趣，请查看页面的源代码，并查找自定义版本切换器的CustomLayerSwitcher.js链接。

有一个CSS文件，它可以控制openlayers中的所有CSS命令。olZoombar{here}

---

这可能是编辑这类内容的最简单方法，否则您可以编辑控件的实际.js文件。

如果您正在谈论PanZoomBar或ZoomBar，如前所述，您需要编辑zoomStopHeight。但是，您不需要编辑OpenLayers.js

new OpenLayers.Control.PanZoomBar({zoomStopHeight: 7})

---

<>你可以考虑尝试没有缩放的PANZOM。

< P>你可以对任何OpenLead控件进行子类分类。我只是通过对PanZoomBar（PanZoomBar.js）进行子分类，覆盖draw（）方法并注释掉所有按钮元素，只留下缩放滑块，来制作一个“缩放滑块”。。像这样：

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);

---

你指的是一个特殊的控件吗？@CaptainkurO，这就是为什么答案应该包括代码而不仅仅是链接-从我这里得到1分！