Как перерисовать / обновить карту при изменении размера холста?

9

Я создал веб-страницу, которая содержит кнопку, чтобы установить карту в полноэкранном режиме и вернуться к ее нормальной форме, карта проблемы не будет установлена ​​в полноэкранный режим, пока я не изменю размер окна вывода, как это преодолеть,

Любое руководство и помощь приветствуется.

Вот рабочий пример: Демо

BIOS
источник
см. также здесь gis.stackexchange.com/questions/31409/…
Мэтью Локк

Ответы:

13

Добавить map.updateSize();в конец$("#btn-full-screen").click...

DEMO

updateSize документация

Эта функция должна вызываться любым внешним кодом, который динамически изменяет размер div карты (потому что mozilla не позволит нам поймать «onresize» для элемента)

CaptDragon
источник
5

Вы можете использовать OpenLayers.Map.updateSizeметод, чтобы перерисовать ваш базовый слой, когда вы максимизируете карту.

Итак, добавив функцию вроде:

var fullScreen = function () {
    map.baseLayer().redraw();
}

вам нужно всего лишь добавить дополнительную опцию к вашей карте:

var map = new OpenLayers.Map({
    div: "map",
    center: new OpenLayers.LonLat(0, 0),
    updateSize: fullScreen,
    minResolution: "auto",
    minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
    maxResolution: "auto",
    maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
    projection: Mercator,
    displayProjection: Geographic
});

Удачи!

DaniBaeyens
источник
Он не устанавливает карту на полный экран, пожалуйста, обновите скрипку.
Биос
Спасибо. У меня были плитки, становящиеся белыми при использовании масштабирования transitionEffect: 'resize'. map.baseLayer().redraw();починил это.
Николя Буасто
0

Напишите следующий код всякий раз, когда вам потребуется перерисовать карту, например, при изменении размера окна, изменении вкладок, полном экране или любом другом событии в соответствии с вашими потребностями.

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

это автоматически вызовет updateSize()функцию внутри.

Шивек Пармар
источник