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. Дякую

— slevin

Цікаво, чи було setTimout спробою змусити його телефонувати лише кожні 200 мс. На жаль, це дещо складніше, потрібно мати 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();
}

— andyb
джерело

2

Не елегантний, але він добре працював для мене

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

— JFHack
джерело

це була єдина відповідь, яка працювала на мене

— Метью Лок

2

Ще один коментар до першої (правильної) відповіді:

Час очікування-подія потрібен, якщо ви чекаєте події window.resize. Інакше карта змінить розмір кожні мілісекунди, якщо користувач почне змінювати розмір вікна (мені це потрібно для Firefox). Тому якщо ви хочете перевірити розмір Window, то час очікування є дуже корисним, відповідно. потрібні. Дивіться: /programming/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

Я думаю, що зміна стилю картографічного поділу автоматично змінить розмір панелі карт.

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

я сподіваюся, що це допоможе тобі ...

— Арагон
джерело

Зміна розміру атрибутів розміру контейнера працює для карти, але не для намальованих функцій. Додавання updateSize () забезпечить видимість функцій.

— код

0

Це працює для мене:

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

$ NextTick важливий, оскільки дозволить зачекати наступного оновлення, перш ніж врахувати новий розмір контейнера для карт.

— Лікар
джерело