Personalizza OpenLayers controllo

Question

Come posso personalizzare facilmente OpenLayers mappa controlli? O almeno, come posso ridurre al minimo l'altezza dei controlli?

Grazie.

PS. C'è qualche sostituzione CSS?

Answer 1

Date un'occhiata qui - http://geojavaflex.blogspot.com/ Sono in procinto di mostrare come fare una personalizzazione coinvolto del LayerSwitcher. Questo potrebbe dare idee su come fare ciò che si sta dopo.

C'è una mappa sulla pagina che mostra come i lavori di controllo e successivi messaggi discuteranno il codice in dettaglio.

Se siete solo interessati a vedere il codice sorgente della pagina e cercare il link per CustomLayerSwitcher.js per la versione personalizzata dello switcher.

Answer 2

È possibile sottoclasse uno dei controlli OpenLayers. Ho appena fatto un 'zoom slider' di sub-classing PanZoomBar (panZoomBar.js), sovrascrivendo il metodo draw () e commentando tutti gli elementi dei pulsanti, solo lasciando il cursore dello zoom .. in questo modo:

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

Answer 3

C'è un file CSS che viene fornito con controlli possono tutto il CSS comandi per entro OpenLayers generalmente .olZoombar {here} E 'probabilmente il modo più semplice per modificare questo genere di cose che altrimenti si può modificare il file .js effettivo per il controllo.

Answer 4

Se si sta parlando della PanZoomBar o ZoomBar, come è stato detto, è necessario modificare lo zoomStopHeight. Tuttavia, non è necessario modificare OpenLayers.js.

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

Si potrebbe prendere in considerazione cercando PanZoom, che non ha un bar.

Answer 5

Per ridurre al minimo la ricerca ZoomBar per zoomStopHeight in OpenLayers.js e modificarlo come si desidera.

Ulteriori riferimenti:. link