Wie wird die Angle Leaflet Directive richtig in das Angular Material Design gerendert?

Question

Die Angular Leaflet Directive sucht nach den Dimensionen des übergeordneten Containers, um festzustellen, wie groß die richtige Größe ist, bevor vom Server Anforderungen für Kartenbildkacheln gestellt werden. Angular Material Design verwendet die flexbox CSS-Eigenschaft, um dynamische Breite und Höhe von Containern festzulegen.

Das Problem ist Leaflet sieht bis zum Eltern und findet eine Breite und Höhe von 0 0. Hier ist ein issue queue question on the problem mit fast der Lösung.

(ich habe schon die Antwort. Teilen Sie einfach.)

Answer 1

ich eine Richtlinie erstellt, die die Schräg Material fügt flex Attribut auf die leaflet Richtlinie bei der Kompilierung. Dies macht die Behälterbreite 100%. Dann erhält es ein Versprechen von Leaflet, das aufgerufen wird, wenn das Kartenobjekt fertig gerendert ist. Es wird die Methode map::invalidateSize() aufgerufen, die Leaflet zwingt, die Größe zu überprüfen, die an dieser Stelle des übergeordneten Containers korrekt eingestellt ist.

(function() { 
    angular.module('live') 
     .directive('ttLeafletFlexFit', leafletFlexFit); 

    leafletFlexFit.$inject = ['$timeout', 'leafletData']; 

    function leafletFlexFit($timeout, leafletData) { 
     var directive = { 
      restrict: 'A', 
      compile: compile 
     }; 

     return directive; 

     function compile(tElem, attrs) { 
      tElem.attr('flex', ''); 

      // A hack to get Leaflet to fill the flex container. 
      // @link https://github.com/tombatossals/angular-leaflet-directive/issues/950 
      leafletData.getMap().then(function (map) { 
       $timeout(function() {map.invalidateSize()}); 
      }); 
     } 
    } 
})(); 

Fügen Sie dann ein Attribut zum leaflet directive Element hinzu.