OpenLayers와 함께 MAP에 PNG 또는 JPEG 사용 (스케일/줌 문제)
-
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로 변경했습니다. 당신이 그것을 더 많이 확대하려면 이것을 더 작게 만들 수 있습니다.
제휴하지 않습니다 StackOverflow