1

元の画像とはサイズが異なる独自の画像を使用して、OpenLayersのデフォルトのUI（ズームバー、方向など）を変更したいと思います。ただし、問題は、JavaScriptでハードコーディングされている要素の配置と寸法にあります。

誰かが私自身のモックアップをさまざまなコントロールに使用する方法を教えてもらえますか、または少なくともいくつかのアイデアを与えることができますか？

4

1 に答える 1

2

OpenLayersでは、任意のコントロールをサブクラス化して、実際に好きなようにすることができます。私はあなたの質問ごとにPanZoomBarをサブクラス化して、GoogleMapsPanZoomBarのように見せるために自由を取りました。まず、コントロールを作成します。

var panZoomBar = new OpenLayers.Control.PanZoomBar({
    panIcons: false // my custom option I use to hide the pan buttons
});

次に、カスタマイズしたいメソッドでコントロールをオーバーライドします。この例ではdraw()、独自のcssスタイル、画像、および配置を追加するために、関数をオーバーライドします。

OpenLayers.Util.extend(panZoomBar, {
    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 = {w: 18, h: 18};
        if (this.panIcons) { // will only draw our pan tools if this option is configured
            var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);
            var wposition = sz.w;

            if (this.zoomWorldIcon) {
                centered = new OpenLayers.Pixel(px.x+sz.w, px.y);
            }

            this._addButton("panup", "north-mini.png", centered, sz);
            px.y = centered.y+sz.h;
            this._addButton("panleft", "west-mini.png", px, sz);
            if (this.zoomWorldIcon) {
                this._addButton("zoomworld", "zoom-world-mini.png", px.add(sz.w, 0), sz);

                wposition *= 2;
            }
            this._addButton("panright", "east-mini.png", px.add(wposition, 0), sz);
            this._addButton("pandown", "south-mini.png", centered.add(0, sz.h*2), sz);
            this._addButton("zoomin", "gmaps-zoom-plus-mini.png", centered.add(0, sz.h*3+5), sz);
            centered = this._addZoomBar(centered.add(0, sz.h*4 + 5));
            this._addButton("zoomout", "gmaps-zoom-minus-mini.png", centered, sz);
        }
        else {
            this._addButton("zoomin", "gmaps-zoom-plus-mini.png", px, sz);
            centered = this._addZoomBar(px.add(0, sz.h));
            this._addButton("zoomout", "gmaps-zoom-minus-mini.png", centered, sz);
            if (this.zoomWorldIcon) {
                centered = centered.add(0, sz.h+3);
                this._addButton("zoomworld", "zoom-world-mini.png", centered, sz);
            }
        }
        // add custom CSS styles
        $(this.slider).find('img').attr('src', media_url + 'OpenLayers-2.12/img/gmaps-slider.png');
        $(this.zoombarDiv).css('background-image', 'url("' + media_url + 'OpenLayers-2.12/img/gmaps-zoombar.png")');
        return this.div;
    }
});

次に、このコントロールをマップに追加するだけです。

map.addControl(panZoomBar);
于 2013-01-08T21:59:33.213 に答える