Personalización del control PanZoom de OpenLayers

Question

Intento personalizar el control PanZoom y tengo algunas preguntas.

1) ¿Qué son las constantes OpenLayers.Control.PanZoom.X y OpenLayers.Control.PanZoom.Y?

2) El método "dibujar" toma el argumento "px" como entrada. No puedo encontrar donde se llama a este método y qué valor de "px" se pasa?

3) ¿Es posible cambiar el tamaño de los botones div a través de css? He descubierto que el tamaño y los nombres de archivo de las imágenes están codificados.

Answer 1

Publicado en http://lists.osgeo.org/pipermail/openlayers-dev/2011-July/007776.html y vale la pena publicar aquí también la respuesta de Christopher Schmidt:

El OpenLayers.Control.PanZoom es un control de estilo antiguo, que no puede ser controlado mediante CSS. Se mantiene sólo para la compatibilidad hacia atrás con aplicaciones antiguas (por lo que sigue siendo el predeterminado).

En su lugar, debe utilizar OpenLayers.Control.PanPanel y OpenLayers.Control.ZoomPanel; son nuevos 'paneles' de estilo en OpenLayers, que utilizan CSS para todos sus estilos. (Puede ver un ejemplo de cambiar la apariencia completamente con CSS en http://openlayers.org/dev/examples/mobile.html por ejemplo).

Así que la respuesta es: "No hay ninguna buena razón, aparte de la historia, y por eso escribimos algo mejor" :)

Función de sorteo

En OpenLayers.Control.PanZoom.draw cuando el control se añade al mapa (a través de la función addControl función).

// Add the passed over control to the map.  
// Optionally position the control at the given pixel.
addControl: function (control, px)

Puede introducir un OpenLayers.Pixel para situar el control exactamente donde desea.

Las constantes PanZoom están ambas ajustadas a 4 por defecto y se utilizan para el desplazamiento de las imágenes en el DIV que contiene los controles PanZoom.

Tematización

Los nombres de los archivos están codificados, pero puedes cambiar su ubicación (y los propios archivos si quieres tamaños diferentes).

Hay una buena introducción a los archivos necesarios para los temas de OpenLayer en http://support.mapbox.com/kb/mapping-101/openlayers-themes

Archivos en GitHub en https://github.com/developmentseed/openlayers_themes

Answer 2

1) Cuando el control PanZoom se inicializa utiliza estas constantes como valores iniciales para la posición

37      initialize: function() {
38          this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoom.X,
39                                               OpenLayers.Control.PanZoom.Y);
40          OpenLayers.Control.prototype.initialize.apply(this, arguments);
41      },

2) No estoy seguro de a qué te refieres cuando dices que no puedes encontrar dónde se llama porque puedes llamarlo siempre que quieras dibujar el control en un lugar específico.

3) Definitivamente puedes usar jquery para reemplazar estas imágenes con las tuyas (.replaceWith() o .attr('src','images/mynewimage')) . ¿Buscas estrictamente una solución CSS?