Utilisation de maxBounds pour arrêter le panoramique dans Leaflet avec la directive angulaire-leaflet

Question

Maintenant que mon application AngularJS est en cours d'exécution, j'essaie de restreindre le mappage de mappe LeafletJS comme décrit dans this Mapbox document. Le problème est que j'utilise angular-leaflet-directive et mon code existant est écrit pour créer la carte en utilisant la directive leaflet dans mon template AngularJS. Ainsi, la carte existante est définie de cette façon:

<leaflet id="mymap" markers="markers" center="center" width="100%" height="380px"></leaflet>

Comment puis-je getBounds() et setMaxBounds() dans une telle situation, où je l'ai jamais explicitement un appel à nouveau L. map ('leaflet', {...}))?

Answer 1

bounds et maxBounds propriétés peuvent être définies par angular-leaflet-directive en utilisant les directives respectivement maxBounds et bounds, par exemple:

<leaflet markers="markers" maxbounds="boundsInfo" bounds="boundsInfo"></leaflet> 

où les limites doivent être précisées dans le format suivant:

$scope.boundsInfo = {'northEast': {'lat': 40.774, 'lng': -74.125},'southWest': {'lat': 40.712, 'lng': -74.227}}; 

Exemple

angular.module("demoapp", ["leaflet-directive"]) 
 
    .controller("CustomizedMarkersController", ['$scope','leafletData', function ($scope, leafletData) { 
 

 
     
 
     $scope.boundsInfo = {'northEast': {'lat': 40.774, 'lng': -74.125},'southWest': {'lat': 40.712, 'lng': -74.227}}; 
 
     $scope.markers = []; 
 

 
     leafletData.getMap().then(function (map) { 
 
      
 
      console.log(map.getBounds()); 
 
     }); 
 

 
    }]);

.angular-leaflet-map { 
 
    width: 640px; 
 
    height: 480px; 
 
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script type="text/javascript" src="https://code.angularjs.org/1.2.2/angular.js"></script> 
 
<script type="text/javascript" src="https://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script> 
 
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> 
 

 
<div ng-app="demoapp" ng-controller="CustomizedMarkersController"> 
 
    <leaflet markers="markers" maxbounds="boundsInfo" bounds="boundsInfo" maxZoom="19" minZoom="10"></leaflet> 
 
</div>