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

一般に、openlayers 内のすべての CSS コマンドを制御できる CSS ファイルが付属しています .olZoombar { here} おそらく、これらの種類のものを編集する最も簡単な方法ですが、それ以外の場合は、コントロールの実際の .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 に答える