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


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)


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!


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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.