Question

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

有人能告诉我如何使用我自己的模型进行不同的控制或者至少提出一些想法吗？

Answer 1

在OpenLayers中，您可以对任何控件进行子类化，以便真正实现您想要的任何控制。我冒昧地根据您的问题将PanZoomBar子类化，使其看起来更像是Google Maps PanZoomBar。首先，创建您的控件：

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

自定义OpenLayers设计

1 个答案: