$タイムアウト内でリーフレットズームアニメーションを防止します

Question

リーフレットイメージが読み込まれるときにアニメーションが表示されます。私は$timeout関数を挿入して、それが遅くなるのを助けてくれるかどうかを確認しましたが、問題を修正しませんでした。 imageOverlayの問題またはsetMaxBoundsの問題が考えられます。それはタイミングの問題か、何かが間違った場所にある可能性があります。何かご意見は？

var loadImageMap = function (callback) { 
     // dimensions of the image 
     getBase64Image($scope.selectedFloorplan, function (image) { 
     $scope.imageUrl = image; 

     getImageSize($scope.imageUrl, function() { 
      $scope.imageW = this.width; 
      $scope.imageH = this.height; 

      // create the image map 
      var initialZoom = 5; 
      $scope.mapRef = L.map('imageMap', { 
      minZoom: 1, 
      maxZoom: 10, 
      center: [0, 0], 
      zoom: initialZoom, 
      crs: L.CRS.Simple 
      }); 

      // calculate the edges of the image, in coordinate space 
      var southWest = $scope.mapRef.unproject([0, $scope.imageH], initialZoom); 
      var northEast = $scope.mapRef.unproject([$scope.imageW, 0], initialZoom); 
      var bounds = new L.LatLngBounds(southWest, northEast); 

      // add the image overlay, 
      // so that it covers the entire map 
      L.imageOverlay($scope.imageUrl, bounds).addTo($scope.mapRef); 

      // tell leaflet that the map is exactly as big as the image 
      $scope.mapRef.setMaxBounds(bounds); 

      $timeout(function() { 
      // set fit-to-image zoom level 
      var zoomOut = initialZoom - (getMaxZoom() - 2); 
      $scope.mapRef.setZoom(zoomOut, {animate: false}); 

      // set minimum zoom to the fit-to-image level 
      $scope.mapRef.options.minZoom = zoomOut; 

      // load cameras after the imageOverlay has been added 
      callback();      
      }, 250); 
     }); 
     }); 
    }; 

Answer 1

私の問題を解決しました。 var zoomOutを保持する関数$timeoutは正しい場所にあります。問題は、私がimageOverlayを早めに設定していたことです。 L.imageOverlay($scope.imageUrl, bounds).addTo($scope.mapRef);を$timeoutファンクションに移動すると、ズームが設定され、imageOverlayが設定され、アニメーションなしで画像がロードされます。範囲とズームレベルを最初に設定してから、その後にimageOverlayを設定します。つまり、イメージをアニメーションなしで読み込み、適切にセンタリングする必要がある場合です。

$timeout(function() { 
    // set fit-to-image zoom level 
    var zoomOut = initialZoom - (getMaxZoom() - 2); 
    $scope.mapRef.setZoom(zoomOut, {animate: false}); 

    // set minimum zoom to the fit-to-image level 
    $scope.mapRef.options.minZoom = zoomOut; 

    // add the image overlay, 
    // so that it covers the entire map 
    L.imageOverlay($scope.imageUrl, bounds).addTo($scope.mapRef); 

    // load cameras after the imageOverlay has been added 
    callback(); 

    }, 250);