Personnaliser le contrôle OpenLayers

Question

Comment personnaliser facilement les contrôles de carte OpenLayers? Ou au moins, comment puis-je minimiser la hauteur des contrôles?

Merci.

PS. Existe-t-il un remplacement CSS?

Answer 1

Jetez un oeil ici - http://geojavaflex.blogspot.com/ Je suis en train de montrer comment faire une personnalisation de LayerSwitcher. Cela pourrait vous donner des idées sur la façon de faire ce que vous recherchez.

Il y a une carte sur la page qui montre comment les travaux de contrôle, et les messages suivants discuteront du code en détail.

Si le code vous intéresse, voyez la source de la page et recherchez le lien vers CustomLayerSwitcher.js pour la version personnalisée du commutateur.

Answer 2

Pour réduire la recherche ZoomBar pour zoomStopHeight dans OpenLayers.js et modifiez-le comme vous le souhaitez.

plus Référence: Link.

Answer 3

Il y a un fichier CSS qui vient avec des commandes de boîte tous les CSS commandes pour l'intérieur OpenLayers généralement .olZoombar {ici} Il est sans doute la meilleure façon de modifier ce genre de choses, sinon vous pouvez modifier le fichier .js réel pour le contrôle.

Answer 4

Si vous parlez de PanZoomBar ou de ZoomBar, comme cela a été mentionné, vous devez modifier le zoomStopHeight. Cependant, vous n'avez pas besoin d'éditer OpenLayers.js.

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

Vous pouvez essayer PanZoom, qui n'a pas de barre.

Answer 5

Vous pouvez sous-classer l'un des contrôles openLayers. Je viens de faire un « zoom-curseur » par sous-classing PanZoomBar (panZoomBar.js), redéfinissant la méthode draw() et commenter tous les éléments de bouton, tout en laissant le curseur de zoom .. comme ceci:

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