web-dev-qa-db-fra.com

Redimensionnement d'une carte de brochures sur un conteneur redimensionné

J'ai un <div> contenant une carte de dépliants. Lors de certains événements, la hauteur du <div> sera modifiée. J'aimerais que la carte soit redimensionnée aux nouvelles dimensions de <div> qui l'entoure, de sorte que le centre ancien soit centré sur la carte plus petite ou plus grande redimensionnée. J'ai essayé d'utiliser la fonction invalidateSize(), mais cela ne semble pas fonctionner du tout. Comment puis-je redimensionner et centrer la carte après cet événement map-container-resize?

$mapContainer.on('map-container-resize', function () {
   map.invalidateSize(); // doesn't seem to do anything
});

Editer pour donner plus de contexte:

Le conteneur de carte est initialement appelé

#map-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    transition: height 0.5s ease-in-out;
}

Lorsqu'un utilisateur clique sur un certain bouton, un autre panneau apparaît en bas de la page et la hauteur du conteneur de la carte est réduite à moins de 100% (80%, par exemple). 

En cliquant sur ce bouton, l'événement map-container-resize est déclenché afin que je puisse redimensionner la carte et la centrer sur son ancien centre (c'est-à-dire avant le redimensionnement). La carte elle-même devrait également être redimensionnée à 80% de sa hauteur initiale. 

Le document APi pour invalidateSize semblait être ce que je voulais: 

"Vérifie si la taille du conteneur de la carte a changé et met à jour la carte si c'est le cas [...]"

Mais en regardant avec la sortie de la fonction getSize avant et après l'appel à invalidateSize, rien n'est différent, la carte conserve son ancienne taille.

javascriptresizeleaflet
34
rkcpi

Le problème est que le redimensionnement de #map-containerdiv se fait via une transition css. La transition n'a pas encore commencé, et encore moins s'est terminée, lorsque l'appel à invalidateSize a lieu, de sorte que la carte de la brochure ne peut reconnaître aucun changement des dimensions de sa variable div environnante. 

Le déclenchement de l'événement map-container-resize avec un délai a résolu le problème. Par ici : 

setTimeout(function(){ map.invalidateSize()}, 400);
57
rkcpi

L.Map.invalidateSize() informe uniquement l'objet de carte foliole que la taille de son conteneur a été modifiée et qu'elle doit donc dessiner moins ou plus de mosaïques. Cela ne change en réalité aucune dimension, par exemple de son <div> contenant, et ne déplace pas la carte. Tu devrais le faire toi-même.

12
Ilja Zverev

la réponse acceptée est un peu hacky en ce sens que le sommeil est plus long que la transition.

J'ai trouvé cela fonctionne bien:

$("body").on($.support.transition.end, '#main-navbar .nav-collapse', function(event){    
    console.log("end of the animation");
});
6
user1650892

Couru dans ce problème en cours de VueJS, Leaflet 1.2.0. Le redimensionnement n'a pas semblé complet comme d'autres mentionnés ci-dessus. Ma solution dans VueJS consistait à appeler la fonction nextTick:

  var vm = this
  var container = vm.$refs.container
  vm.mapStyle.width = `${vm.getElementContentWidth(container)}px`
  vm.mapStyle.height = `${vm.getElementContentHeight(container)}px`
  vm.$nextTick(() => {
    if (vm.map) vm.map.invalidateSize()
    if (vm.layerBase) vm.layerBase.redraw()
  })

Je crois que javascript pur serait

0
Disarticulate

Après le redimensionnement, utilisez cette 

map.invalidateSize()

https://github.com/Leaflet/Leaflet/issues/690

0
Mahdi Bashirpour