Utilisation d’un fichier PNG ou JPEG pour mapper avec OpenLayers (problème d’échelle / zoom)

Question

J'utilise une image pour afficher ma carte avec OpenLayers. Mon code JS ressemble à ceci:

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

Mon CSS est:

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

Mais je ne peux pas amener OpenLayers à réduire la grande image. Il est toujours affiché en pleine résolution et je ne peux pas effectuer un zoom arrière pour afficher le globe entier. Aide s'il vous plaît.

Answer 1

Vous devez définir la taille de l'image telle qu'elle devrait s'afficher lorsqu'elle est complètement réduite.

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

J'ai changé la taille au quart de la taille de l'original. Vous pouvez le réduire si vous le vouliez encore plus en zoom arrière.