Como redesenhar / atualizar o mapa no redimensionamento de tela?

9

Criei uma página da web que contém um botão para definir a tela inteira do mapa e retornar à sua forma normal. O mapa de problemas não é definido como tela cheia até eu redimensionar a janela de saída, como superar isso,

Qualquer orientação e ajuda é apreciada.

Aqui está o exemplo de trabalho: Demo

BIOS
fonte
veja também aqui gis.stackexchange.com/questions/31409/…
Matthew Lock

Respostas:

13

Adicione map.updateSize();no final de$("#btn-full-screen").click...

DEMO

documentação updateSize

Esta função deve ser chamada por qualquer código externo que mude dinamicamente o tamanho da div do mapa (porque o mozilla não nos permitirá capturar o "onresize" de um elemento)

CaptDragon
fonte
5

Você pode usar o OpenLayers.Map.updateSizemétodo para redesenhar sua camada base ao maximizar o mapa.

Então, adicionando uma função como:

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

você só precisará adicionar uma opção adicional ao seu mapa:

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
});

Boa sorte!

DaniBaeyens
fonte
Ele não define o mapa para tela cheia. Você pode atualizar o violino.
bios
Obrigado. Eu tinha azulejos ficando brancos ao usar o zoom transitionEffect: 'resize'. map.baseLayer().redraw();consertou.
Nicolas Boisteault
0

Escreva o código a seguir sempre que for necessário redesenhar o mapa, como no redimensionamento da janela ou nas trocas de guias ou tela cheia ou em qualquer outro evento de acordo com sua necessidade.

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

isso acionará automaticamente a updateSize()função internamente.

Shivek Parmar
fonte