OpenLayers-컨테이너 크기 조정 후 맵 다시 그리기

25

웹 응용 프로그램에서 사용자가지도 컨테이너의 크기를 설정할 수있게하려고합니다.

컨테이너가 약간 확장되었을 때 모든 것이 잘 작동했습니다 (분명히 바로 뒤에있는 타일이 이미로드 되었기 때문입니다). 그러나 컨테이너가 크게 확장되면 (다음 예에서는 너비가 300 픽셀에서 1000 픽셀로) 공백이 남습니다.

지도를 다시 작성하고 새로운 크기에 적응시키는 방법은 무엇입니까?

redraw()모든 레이어를 호출 해도 도움이되지 않았습니다. 확대하거나 축소하지 않았습니다.

Opera, Chrome 및 Firefox에서 설명한 결과로 이것을 테스트했습니다. 놀랍게도 IE8에서는 문제가 발생하지 않고 맵이 자동으로 조정되었습니다.

테스트를위한 단순화 된 웹 페이지 :

<html>
  <head>
    <style>
      #mapbox { 
        width: 300px;
        height: 500px;
        border: 1px solid black;
      }
    </style>

    <script src="http://openlayers.org/api/OpenLayers.js"></script>
  </head>

  <body>
    <div id="mapbox"></div>
    <input type="button" id="test" value="resize">

    <script>    
      var map = new OpenLayers.Map('mapbox');
      map.addLayer(new OpenLayers.Layer.OSM());      

      map.setCenter(
        new OpenLayers.LonLat(1000000, 7000000), 5);

      document.getElementById('test').onclick = function() {
        document.getElementById('mapbox').style.width = '1000px';
      }
    </script>
  </body>
</html>

openlayers-2 javascript

— 꼬마 도깨비
소스

35

지도 크기를 업데이트하려면 API를 호출해야합니다.

http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.updateSize

우리가하는 방법은 다음과 같습니다

window.onresize = function()
{
  setTimeout( function() { map.updateSize();}, 200);
}

우리는 약간의 지연을 보았으며, 솔직히 나는 그 이유를 정확히 기억하지 못하지만 API를 호출하여 크기를 조정하기 전에 약간의 대기 시간을 주어야했습니다.

— 바딤
소스

1

글쎄, 지연은 응용 프로그램에 따라 다릅니다. ;) 어쨌든, 다시 한번, 나는 문서에서 뭔가를 놓쳤다.

— Imp

1

또한 지연 이유가 없으므로 생략했습니다. 감사합니다

— zod

1

@Vadim Great anser이지만 작동하지 않습니다. 내 코드는 비슷 body onload=init()하고 init맵을 초기화합니다. 그 때문입니까? 또한 이것이 반응 형 디자인에 적합한 솔루션일까요? window.onload=window.onresize=function(){//resize here. 감사합니다

— 슬레븐

setTimout이 200ms마다 호출하도록 시도했는지 궁금합니다. 불행하게도 그것이 가지고 좀 더 복잡하게, 필요의 setInterval모든 200 밀리 실행 즉, 다음 부울이 var didResize로 설정 true onresize()하고, 설정을 false한 후 map.updateSize()라고합니다.

— andrewb

1

setTimeout은 맵이로드되고 나머지 돔이 렌더링되도록 보장 할 수 있습니다. 현재 마리오네트 뷰 수명주기에 대한 이해 부족으로 인해 동일한 핵을 사용하고 있습니다.

— ca0v

8

바딤 말한대로 네, (확실하지 왜 지연도!) map.updateSize ()를 사용하여 문서를

나는 일반적으로 맵에 전체 화면 토글 버튼을 넣었습니다. 맵 컨테이너의 CSS 클래스를 전환 한 다음 updateSize ()를 호출하면 간단하게 작동합니다

function toggleFullScreen(mapContainer) {
    if ($(mapContainer).hasClass("normal")) {
        $(mapContainer).addClass("fullscreen").removeClass("normal");
    } else {
        $(mapContainer).addClass("normal").removeClass("fullscreen");
    }
    map.updateSize();
}

— 앤디
소스

2

우아하지는 않지만 잘 작동했습니다.

window.onresize = function(event)
{
   map.zoomOut(); map.zoomIn();
}

— JFHack
소스

이것은 나를 위해 일한 유일한 대답이었습니다

— Matthew Lock

2

첫 번째 (올바른) 답변에 대한 또 다른 의견 :

window.resize 이벤트를 기다리는 경우 timeout-Event가 필요합니다. 그렇지 않으면 사용자가 창 크기 조정을 시작하면 (밀리 초마다 필요) 맵 크기가 밀리 초마다 조정됩니다. 따라서 창 크기를 확인하려면 시간 초과가 매우 유용합니다. 필요합니다. 참조 : https : //.com/questions/5489946/jquery-how-to-wait-for-the-end-or-resize-event-and-only-then-perform-an-ac 또는 jQuery 크기 조정 종료 이벤트

(죄송합니다, 댓글을 추가 할 수 없으므로 다른 답변입니다)

— 레오
소스

1

나는 여기에 설명 된 모든 것을 시도했지만 아무것도 효과가 없었습니다. 그래서 '전체 화면'클래스를 맵에 넣을 때 크기 조정 이벤트가 시작되지 않았다는 것을 깨달았습니다. 나는 이것을 다음과 같이 고쳤다.

$(window).trigger('resize');

— nicolasaiz173
소스

1

위에서 setTimeout을 사용하는 방식은 나에게별로 의미가 없지만 (이전 OL 버전의 해결 방법 일 수도 있음) setTimeout을 사용하여 map.updateSize ()에 대한 호출 수를 줄이고 다른 관련 코드를 줄일 수 있습니다 이:

$(window).resize(function () {
  if (window.resizeMapUpdateTimer) {
    clearTimeout(window.resizeMapUpdateTimer)
  }
  window.resizeMapUpdateTimer= setTimeout(function () {
    // Update container size
    map.updateSize()
  }, 200)
})

— 사이먼 허치슨
소스

0

지도 div 스타일을 자동으로 변경하면지도 패널의 크기가 변경된다고 생각합니다.

document.getElementById("map-panel").style.width = "500px";

나는 그것이 당신에게 도움이되기를 바랍니다 ...

— 아라곤
소스

컨테이너의 크기를 변경하면 맵의 크기 속성이 변경되지만 그려진 피처는 작동하지 않습니다. updateSize ()를 추가하면 기능이 표시됩니다.

— kode

0

이것은 나를 위해 일하고 있습니다 :

this.$nextTick(
    function() {
        OL_MAP_INSTANCE.updateSize();
    }
);

$ nextTick은 맵 컨테이너의 새로운 크기를 고려하기 전에 다음 새로 고침을 기다릴 수 있기 때문에 중요합니다.

— 의사
소스