OpenLayersでマップにPNGまたはJPEGを使用する(スケール/ズームの問題)

StackOverflow https://stackoverflow.com/questions/813644

  •  03-07-2019
  •  | 
  •  

質問

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で大きな画像を縮小することはできません。常にフル解像度で表示され、ズームアウトして地球全体を表示することはできません。助けてください。

役に立ちましたか?

解決

完全にズームアウトしたときに表示される画像のサイズを設定する必要があります。

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

サイズを元のサイズの4分の1に変更しました。さらにズームアウトしたい場合は、これを小さくすることができます。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top