Directive de la notice - affichage png en plein écran

Question

Je travaille actuellement sur un projet qui doit afficher des données geojson sur une carte. J'utilise le leaflet-directive pour AngularJS et cela fonctionne très bien.

Ma carte est correctement affichée avec les données geojson.

CONTRÔLEUR ANGULAIRE

angular.extend($scope, { 
    intersection: { 
     lat: 50.891, 
     lng: 4.258, 
     zoom: 14 
    }, 
    defaults: { 
     scrollWheelZoom: false 
    }, 
    geojson : {}, 
    layers: { 
     baselayers: { 
      xyz: { 
       name: 'OpenStreetMap (XYZ)', 
       url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
       type: 'xyz' 
      } 
     }, 
     overlays: {} 
    } 
}); 

$scope.$watch("intersection.zoom", function(zoom) { 
    if(zoom > 17){ 
     $scope.layers.overlays = { 
      wms: { 
       name: 'intersectionDraw', 
       type: 'wms', 
       visible: true, 
       url: 'img/map.png' 
      } 
     } 
    }; 
}); 

Maintenant, je voudrais ajouter une fonctionnalité. Je voudrais afficher un dessin png lorsque mon zoom atteint le zoom max.Pour le moment, mon code affiche le png en mosaïque. Je veux que ce PNG obtienne toute la hauteur et la largeur de ma carte et ne voit que cela. Il n'y a pas besoin de zoomer plus sur ce .png mais si je zoome la carte « normale » sera affiché à nouveau

La mosaïque PNG

Answer 1

Utilisez un L.ImageOverlay. Voir Leaflet single picture et https://github.com/Leaflet/Leaflet/blob/master/debug/map/image-overlay.html