3

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

谢谢你。

PS。是否有任何 CSS 覆盖？

4

5 回答 5

5

您可以对任何 openLayers 控件进行子类化。我刚刚通过子类化 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);
于 2010-05-11T15:20:52.847 回答
1

有一个 CSS 文件可以控制 openlayers 中的所有 CSS 命令。olZoombar { 这里} 这可能是编辑这些东西的最简单方法，否则你可以编辑控件的实际 .js 文件。

于 2010-02-24T02:30:02.117 回答
1

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

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

你可以考虑试试 PanZoom，它没有横杆。

于 2010-04-04T05:32:24.957 回答
0

在 OpenLayers.js 中最小化 ZoomBar 搜索zoomStopHeight并根据需要进行编辑。

进一步参考：链接。

于 2009-11-01T23:19:03.890 回答
-4

看看这里 - http://geojavaflex.blogspot.com/ 我正在展示如何对 LayerSwitcher 进行相关定制。这可能会给你一些关于如何做你所追求的想法。

页面上有一张图展示了该控件的工作原理，后续帖子会详细讨论代码。

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

于 2009-11-19T03:42:06.867 回答