Ändern der Größe einer Broschürenkarte bei Größenänderung von Behältern

Ich habe ein <div> enthält eine Flugblattkarte. Bei bestimmten Ereignissen wird die Höhe der <div> wird geändert. Ich möchte, dass die Karte an die neuen Dimensionen ihrer Umgebung angepasst wird <div> sodass das alte Zentrum in der verkleinerten oder größeren Karte zentriert ist. Ich habe versucht, die zu verwenden invalidateSize() funktionieren, aber es scheint überhaupt nicht zu funktionieren. Wie kann ich danach die Größe der Karte ändern und zentrieren? map-container-resize Veranstaltung?

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

Bearbeiten, um mehr Kontext zu geben:

Der Map-Container ist anfangs wie folgt gestaltet

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

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

Nachdem ein Benutzer auf eine bestimmte Schaltfläche geklickt hat, wird unten auf der Seite ein weiterer Bereich angezeigt, und die Höhe des Kartencontainers wird auf weniger als 100 % (z. B. 80 %) reduziert.

Wenn Sie auf diese Schaltfläche klicken, wird das Ereignis map-container-resize ausgelöst, sodass ich die Größe der Karte ändern und auf ihren alten Mittelpunkt (dh vor der Größenänderung) zentrieren kann. Die Karte selbst sollte dann ebenfalls auf 80 % ihrer ursprünglichen Höhe verkleinert werden.

Das API-Dokument für invalidateSize schien das zu sein, was ich wollte:

“Überprüft, ob sich die Größe des Kartencontainers geändert hat, und aktualisiert die Karte, wenn dies der Fall ist
[…]”

Aber schau mal bei der Ausgabe der getSize Funktion vor und nach dem Aufruf von invalidateSize ist nichts anders, die Karte bleibt in ihrer alten Größe.

Das Problem ist, dass die Größenänderung der #map-container div erfolgt über einen CSS-Übergang. Der Übergang hat noch nicht begonnen, geschweige denn beendet, wenn der Aufruf von invalidateSize erfolgt, sodass die Leaflet-Karte keine Dimensionsänderung ihrer Umgebung erkennen kann div.

Auslösen der map-container-resize Ereignis mit einer Verzögerung löste das Problem. Diesen Weg :

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

L.Map.invalidateSize() informiert das Blattkartenobjekt nur darüber, dass seine Behältergröße geändert wurde und es daher weniger oder mehr Kartenkacheln zeichnen sollte. Es ändert eigentlich keine Dimensionen, zB seines Inhalts <div>, und verschiebt die Karte nicht. Sie sollten es selbst tun.

Sie können den folgenden Code danach verwenden Größe ändern das

map.invalidateSize()

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

Ich bin heute auf diese Frage gestoßen und wollte eine aktualisierte Antwort basierend auf der 2020 Browser API geben. Dieses Beispiel verwendet die des Browsers ResizeObserver um die Größe des div zu überwachen, das Leaflet ebenfalls gemountet ist. Angenommen, das folgende HTML-Snippet:

<div id="map" />

Mit folgendem JavaScript:

const mapDiv = document.getElementById("map");
const map = L.map(mapDiv).setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

const resizeObserver = new ResizeObserver(() => {
  map.invalidateSize();
});

resizeObserver.observe(mapDiv);

Dies sollte das Karten-Div überwachen und die Methode invalidateSize() auf der Leaflet-Karte aufrufen, wenn sich die Größe des Karten-Div ändert. Mit diesem Ansatz können Sie die Größenänderung “näher” am Kartencode handhaben, anstatt sich auf Fenstergrößenänderungen zu verlassen oder auf Änderungen zu warten, die an anderer Stelle in der Anwendung ausgelöst werden.

Offensichtlich muss das CSS für das Karten-Div selbst sicherstellen, dass die Größe so geändert wird, wie Sie es möchten. Dieses Code-Snippet stellt sicher, dass das Merkblatt in diesem Fall entsprechend aktualisiert wird.

Die akzeptierte Antwort ist insofern etwas hackig, als sie darauf beruht, dass der Schlaf länger ist als der Übergang.

Ich habe festgestellt, dass dies gut funktioniert:

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

Gerade Rufen Sie das Ereignis „Fenstergröße ändern“ auf anstatt das Laden der Karte zeitlich zu planen.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

window.dispatchEvent(new Event('resize'));  


// Triggers a window resize 
// Thus your map automatically triggers invalidateSize().

Beim Ausführen von VueJS, Leaflet 1.2.0, ist dieses Problem aufgetreten. Die Größenänderung schien nicht vollständig zu sein, wie andere oben erwähnt. Meine Lösung innerhalb von VueJS bestand darin, die nextTick-Funktion aufzurufen:

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

Ich glaube, reines Javascript wäre