OpenLayers와 함께 MAP에 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);

크기를 원본 크기의 1/4로 변경했습니다. 당신이 그것을 더 많이 확대하려면 이것을 더 작게 만들 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top