Leaflet maxBounds - i limiti non funzionano

Ho provato Leafletjs maxBounds con example code I found at Mapbox.Leaflet maxBounds - i limiti non funzionano

Di seguito è riportato il mio codice completo, anche in un jsfiddle here.

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>map - leaflet test bounds</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

     <!-- leafletjs --> 
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> 
     <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 

     <style> 
      body { 
       margin: 0; 
       padding: 0; 
      } 
      html, body, #map { 
       height: 100%; 
       width: 100%; 
      } 
     </style> 
</head> 

<body> 
    <div id="map"> 
     <script> 

      var southWest = L.latLng(40.712, -74.227), 
       northEast = L.latLng(40.774, -74.125), 
       mybounds = L.latLngBounds(southWest, northEast); 

      var map = L.map('map').setView([40.743, -74.176], 17); 
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , { 
       maxBounds: mybounds, 
       maxZoom: 18, 
       minZoom: 16, 
       attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' 
      }) .addTo(map); 

      L.marker([40.743, -74.176]) .addTo(map); 

     </script> 
    </div>   
</body>

Il risultato jsfiddle sembra strano, non so perché.

Perché il codice superiore non funziona come nell'esempio Mapbox?

fonte

2015-03-22 wolfmuc

È necessario utilizzare i limiti come opzione di L.tileLayer e non di maxBound.

Bounds reference

Inoltre, sembra che hai caricato un file sbagliato per il leaflet.css in JSFiddle, la fonte corretta è questa: http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css

Infine, evitare di utilizzare i formati per cento nel JSFiddle, uso quelli a pixel invece. Ecco un JSFiddle di lavoro: http://jsfiddle.net/1zyL4q4a/4/

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , { 
      bounds: mybounds, 
      maxZoom: 18, 
      minZoom: 16, 
      attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' 
    }).addTo(map);

fonte

2015-03-22 07:51:02

Penso che MaxBounds abbia ragione. "Quando questa opzione è impostata, la mappa restringe la vista ai limiti geografici determinati, rimbalzando l'utente quando tenta di spostarsi all'esterno della vista." [link] (leafletjs.com/reference.html) [/ link] Voglio che l'utente si riprenda. Ho controllato il css in jsfidlle. Era sbagliato. Ora funziona. Grazie. – wolfmuc

maxBounds serve per restringere la vista mappa (usare con la mappa, non con L.tileLayer), i limiti sono per limitare le piastrelle che caricano il numero massimo di –

maxBounds è molto simile dal mio punto di vista. Lo proverò. – wolfmuc

Questa è la (mia) codice finale.

var map = L.map('map', { 
    maxZoom: 18, 
    minZoom: 16, 
    maxBounds: [ 
     //south west 
     [40.712, -74.227], 
     //north east 
     [40.774, -74.125] 
     ], 
}).setView([40.743, -74.176], 17); 

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' 
}) .addTo(map); 

L.marker([40.743, -74.176]) .addTo(map);

fonte

2015-03-23 06:26:30 wolfmuc

Leaflet maxBounds - i limiti non funzionano

risposta

Problemi correlati