Personalizzare OpenLayers Controllo

Come posso personalizzare facilmente OpenLayers controlli di mappa? O almeno, come posso ridurre al minimo i controlli’ altezza?

Grazie.

PS. C’è qualche CSS override?

  • C’è un particolare controllo a cui ti stai riferendo?
  • Zoom In/Out bar.

 

5 Replies
  1. -4

    Di dare un’occhiata qui – http://geojavaflex.blogspot.com/
    Io sono in procinto di mostrare come fare un coinvolto personalizzazione del LayerSwitcher. Questo potrebbe darvi idee su come fare che cosa siete dopo.

    C’è una mappa nella pagina che mostra come il controllo funziona, e successivi post discuterà il codice in dettaglio.

    Se siete interessati solo codice di vedere il sorgente della pagina e cercare il link per CustomLayerSwitcher.js per la versione personalizzata del mixer.

    • il link è rotto ora
    • ed è per questo che le risposte dovrebbero includere il codice non solo il link… -1 da me!
  2. 5

    È possibile sub-classe di openLayers controlli. Ho appena fatto un ‘zoom-scorrimento sub-classing PanZoomBar (panZoomBar.js), sovrascrivendo il metodo draw() e commentando tutti gli elementi, basta lasciare il dispositivo di scorrimento dello zoom.. come questo:

    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);
  3. 1

    C’è un file CSS che viene fornito con grado di controllare tutti i CSS comandi all’interno di openlayers in generale .olZoombar { qui}
    È probabilmente il modo più semplice per modificare quelle cose altrimenti è possibile modificare l’attuale .js file per il controllo.

  4. 1

    Se stai parlando di PanZoomBar o ZoomBar, come è stato detto, è necessario modificare il zoomStopHeight. Tuttavia, non È necessario modificare OpenLayers.js.

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

    Si potrebbe prendere in considerazione cercando di PanZoom, che non dispone di bar.

Lascia un commento