user-interface - 自定义 OpenLayers 设计

Question

我想使用我自己的图像更改 OpenLayers 的默认 UI（缩放栏、方向...），这些图像的大小与原始图像不同。然而，问题仍然存在于 javascript 中硬编码的元素的定位和尺寸上。

谁能告诉我如何将我自己的模型用于不同的控件，或者至少给出一些想法？

Answer 1

In OpenLayers, you can subclass any control, to really make it whatever you'd like. I've taken the liberty to subclass the PanZoomBar per your question to make it look more like a Google Maps PanZoomBar. First, create your control:

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

Next, override the control with methods you'd like to customize. For this example, I'll be overriding the draw() function in order to add my own css styles, images, and positioning:

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

Then simply add this control to the map:

map.addControl(panZoomBar);