it-swarm.com.de

Ändern der Größe einer Broschüre auf Containergröße

Ich habe einen <div>, der eine Flugblattkarte enthält. Bei bestimmten Ereignissen wird die Höhe des <div> geändert. Ich möchte, dass die Karte an die neuen Dimensionen des umgebenden <div> angepasst wird, sodass der alte Mittelpunkt in der verkleinerten oder größeren Karte zentriert ist. Ich habe versucht, die Funktion invalidateSize() zu verwenden, aber es scheint überhaupt nicht zu funktionieren. Wie kann ich die Karte nach diesem map-container-resize-Ereignis skalieren und zentrieren?

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

Bearbeiten, um mehr Kontext zu geben:

Der Kartencontainer ist anfangs als formatiert

#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 ein weiteres Fenster am unteren Rand der Seite 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 zum Ändern der Größe des Map-Containers ausgelöst, sodass ich die Größe der Karte ändern und auf ihr altes Zentrum (d. H. Vor dem Ändern der Größe) zentrieren kann. Die Karte selbst sollte dann auf 80% ihrer ursprünglichen Höhe verkleinert werden. 

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

"Überprüft, ob sich die Größe des Kartencontainers geändert hat, und aktualisiert die Karte, falls dies der Fall ist [...]"

Wenn Sie sich die Ausgabe der Funktion getSize vor und nach dem Aufruf von invalidateSize ansehen, ändert sich nichts. Die Karte bleibt in ihrer alten Größe.

34
rkcpi

Das Problem ist, dass die Größenänderung von #map-containerdiv über einen CSS-Übergang erfolgt. Der Übergang hat noch nicht begonnen, geschweige denn beendet, wenn der Aufruf von invalidateSize erfolgt, so dass die Merkblattabbildung keine Änderung der Abmessungen der umgebenden div erkennen kann. 

Das verzögerte Auslösen des map-container-resize-Ereignisses löste das Problem. Diesen Weg : 

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

L.Map.invalidateSize() informiert nur das Flugblattobjekt, dass die Containergröße geändert wurde und daher weniger oder mehr Kartenkacheln gezeichnet werden sollen. Es ändert tatsächlich keine Abmessungen, z. des darin enthaltenen <div> und verschiebt die Karte nicht. Du solltest es selbst tun.

12
Ilja Zverev

die akzeptierte Antwort ist insofern etwas hässlich, als dass der Schlaf länger ist als der Übergang.

Ich habe das gefunden, um gut zu funktionieren:

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

Dieses Problem ist bei der Verwendung von VueJS, Leaflet 1.2.0 aufgetreten. Die Größenänderung erschien wie oben erwähnt nicht vollständig. Meine Lösung in 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

0
Disarticulate

Verwenden Sie diese nach der Größenänderung 

map.invalidateSize()

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

0