将 PNG 或 JPEG 用于 OpenLayers 的地图（缩放/缩放问题）答案

【问题标题】：Using an PNG or JPEG for Map with OpenLayers (Scale/Zoom Problem)将 PNG 或 JPEG 用于 OpenLayers 的地图（缩放/缩放问题）
【发布时间】：2010-10-23 06:06:32
【问题描述】：

我正在使用图像通过 OpenLayers 显示我的地图。我的 JS 代码如下所示：

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

我的 CSS 是：

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

但我无法让 OpenLayers 缩小大图像。它始终以全分辨率显示，我无法缩小以显示整个地球。请帮忙。

【问题讨论】：

标签： javascript map openlayers

【解决方案1】：

您需要设置图像在完全缩小时应显示的大小。

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

我将尺寸更改为原始尺寸的四分之一。如果您想进一步缩小，可以将其缩小。

【讨论】：

非常感谢 Jon，我不敢相信我没有尝试将 Size 设置为较小的值 =) 效果很好！