Usando un PNG o JPEG para Mapa con OpenLayers (Problema de escala/zoom)

Question

Estoy usando una imagen para mostrar mi mapa con OpenLayers. Mi código JS se ve así:

map = new OpenLayers.Map('map'); 

var options = {numZoomLevels: 7, 
       isBaseLayer: true, 
       }; 

var globe = new OpenLayers.Layer.Image(
    'Globe ESA', 
    'http://upload.wikimedia.org/wikipedia/commons/0/07/World_map_blank_black_lines_4500px.gif', 
    new OpenLayers.Bounds(-180, -90, 180, 90), 
    new OpenLayers.Size(4500, 2234), 
    options); 

map.addLayers(globe); 

markers = new OpenLayers.Layer.Markers("markers"); 
map.addLayer(markers); 

map.addControl(new OpenLayers.Control.LayerSwitcher()); 
map.zoomToMaxExtent(); 
map.addControl(new OpenLayers.Control.MousePosition()); 

mi CSS es:

#map { 
    width: 640px; 
    height: 480px; 
    border: 1px solid black; 
} 

Pero no puedo conseguir OpenLayers de bajar la imagen grande. Siempre se muestra a resolución completa y no puedo alejar para mostrar todo el globo. Ayuda por favor.

Answer 1

Debe establecer el tamaño de la imagen como debería mostrarse cuando se aleje por completo.

var globe = new OpenLayers.Layer.Image(
    'Globe ESA', 
    'http://upload.wikimedia.org/wikipedia/commonS/0/07/World_map_blank_black_lines_4500px.gif', 
    new OpenLayers.Bounds(-180, -90, 180, 90), 
    new OpenLayers.Size(1125,558), 
    options); 

Cambié el tamaño a un cuarto del tamaño del original. Podrías hacer esto más pequeño si quisieras que se alejara aún más.