Dépliant - obtenir une carte qui couvre le plein écran

Dans la brochure et la carte, je voudrais me débarrasser des deux barres grises au-dessus et sous la carte comme on le voit sur l'image ci-dessous. Mon élément DOM #map prend le plein écran et les barres grises disparaissent lorsque j'effectue un zoom avant (par exemple, zoomLevel = 3). Donc les barres grises semblent être causées par le fait qu'un zoomLevel a une hauteur donnée (en px) des carreaux qui est plus petite que mon écran. Je veux garder les carreaux du même niveau de zoom mais assurez-vous que la hauteur des carreaux couvre au moins le plein écran.Dépliant - obtenir une carte qui couvre le plein écran

Voici mon code de configuration de carte:

   vm.map = L.map('map', { 
        center: [35, 15], 
        zoom: 2, 
        maxZoom: 21, 
        scrollWheelZoom: true, 
        maxBounds: [ 
        [89.9, 160.9], 
        [-89.9, -160.9] 
        ], 
        zoomControl: false, 
        noWrap: true, 
        zoomAnimation: true, 
        markerZoomAnimation: true, 
       });

J'utilise les dimensions de l'écran angulaire et mes sont 1920 x 1080

Source

2017-03-17 Robycool

j'ai réussi à se débarrasser des barres en ajoutant la propriété followin css à mon élément #map: 'transformer: échelle (1.1) » Cependant, cela crée un désordre dans le reste de mon code, donc je cherche autre chose. – Robycool

Vous pourriez essayer de faire une foliole répéter la carte verticalement. Cependant, ceci n'est pas supporté par le dépôt officiel pour le moment (https://github.com/Leaflet/Leaflet/issues/904) donc vous pouvez vouloir ouvrir un PR pour cela. Il ne devrait pas être trop difficile à faire car il est déjà implémenté pour l'axe des x. – Buddyshot

Merci @Buddyshot. Vous semblez me suivre bien et répondre à toutes mes questions! Une bonne illustration de l'awesomeness de l'open source. Je vais d'abord vérifier si je peux résoudre mon problème avec le package de dépliant existant et implémenter autrement votre solution. – Robycool

Sons comme vous devez calculer le niveau de zoom minimum La carte ne montre que la zone comprise entre 85 ° N et 85 ° S.

Le getBoundsZoom() method of L.Map aide à cela, par exemple .:

var bounds = L.latLngBounds([[85, 180],[-85, -180]]); 
var wantedZoom = map.getBoundsZoom(bounds, true); 
var center = bounds.getCenter(); 
map.setView(center, wantedZoom);

Notez que ceci est une solution générique et fonctionne pour toute taille du conteneur de carte.

Vous pouvez également définir le minZoom de la carte sur cette valeur et expérimenter le zoom fractionnaire (voir l'option zoomSnap). Si vous voulez que l'utilisateur ne puisse pas faire glisser la zone peinte à l'extérieur, utilisez l'option maxBounds de la carte avec quelque chose comme [[85, Infinity],[-85, -Infinity]].

(Et si vous vous demandez pourquoi 85 ° N et 85 ° S, ne lisent https://en.wikipedia.org/wiki/Web_Mercator)

Source

2017-03-17 11:10:04 IvanSanchez

Merci, cela semble être une solution élégante. Cependant, dans mon cas, il est important de garder les carreaux de zoom = 2, sinon ma carte devient trop moche. En fait, j'aurais besoin d'un niveau de zoom de 2,1 ou plus qui agrandit un peu les carreaux du niveau de zoom 2. Ou bien, une fonction permettant d'agrandir/réduire la taille des carreaux à un niveau de zoom donné. – Robycool

Comme je l'ai déjà dit, expérimentez 'zoomSnap'. Essayez de régler 'zoomSnap' à' 0.1' et 'minZoom' à' 2.1'. :-) – IvanSanchez

Fonctionne comme un charme. Je vous remercie! – Robycool

Dépliant - obtenir une carte qui couvre le plein écran

Répondre

Questions connexes