Uso di un PNG o JPEG per la mappa con OpenLayer (problema di scala / zoom)
-
03-07-2019 - |
Domanda
Sto usando un'immagine per visualizzare la mia mappa con OpenLayers. Il mio codice JS è simile al seguente:
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());
Il mio CSS è:
#map {
width: 640px;
height: 480px;
border: 1px solid black;
}
Ma non riesco a far sì che OpenLayer ridimensioni l'immagine grande. Viene sempre visualizzato alla massima risoluzione e non riesco a ridurre lo zoom per visualizzare l'intero globo. Aiuto per favore.
Soluzione
È necessario impostare le dimensioni dell'immagine come dovrebbe essere visualizzata quando è completamente ridotta.
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);
Ho cambiato la dimensione in un quarto della dimensione dell'originale. Potresti rimpicciolirlo se lo volessi ancora più ridotto.
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow