Leaflet maxBounds unerwartet Karte in der Mitte zu beheben

Question

Ich versuche, die Karte bewegungsunfähig zu beschränken, aber die Karte ist auf Mitte fixiert und kann nicht verschoben werden.

var mapSW = [1000, 0], 
    mapNE = [1000, 0]; 

var map = L.map('map', { 
    crs: L.CRS.Simple, 
    zoomControl: true, 
    zoom: 1, 
    minZoom: 0, 
    maxZoom: 4 
}); 

var bounds = [[-250,-500], [800,800]]; 
var image = L.imageOverlay('uqm_map_full.png', bounds).addTo(map); 

map.fitBounds(bounds); 

map.setMaxBounds(new L.LatLngBounds(
    map.unproject(mapSW, map.getMaxZoom()), 
    map.unproject(mapNE, map.getMaxZoom()), 
)); 

Wenn ich setmaxBounds() Karte Hintergrundbild der Fix zu aktivieren zu zentrieren und elastisch bewegt werden. Verschieben Sie die Karte, bis sie gezogen wird, nachdem Sie die Endkarte zurück in die Mitte gezogen haben.

Ich habe versucht, einige Beispiele zu folgen, aber immer noch keinen Erfolg. Siehst du, wo ich Fehler mache?

Answer 1

Ihre Koordinaten mapSW und mapNE sind identisch, daher können die LatLngBounds, die Sie daraus erstellen können, einen Nullbereich haben.

Außerdem bin ich nicht sicher, warum Sie sorgfältig bounds für Ihr Bild-Overlay bauen (image) und haben die map diese Grenzen passen, dann komplizierte unproject mit unterschiedlichen Koordinaten zu setMaxBounds angeben?

Live-Beispiel mit den gleichen bounds für setMaxBounds, Navigation zu den gleichen Grenzen wie das Bild-Overlay ermöglicht:

var map = L.map('map', { 
 
    crs: L.CRS.Simple, 
 
    zoomControl: true, 
 
    zoom: 1, 
 
    minZoom: 0, 
 
    maxZoom: 4 
 
}); 
 

 
var bounds = [ 
 
    [-250, -500], 
 
    [800, 800] 
 
]; 
 
var image = L.imageOverlay('https://a.tile.openstreetmap.org/0/0/0.png', bounds, { 
 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
 
}).addTo(map); 
 

 
map.fitBounds(bounds); 
 

 
/*map.setMaxBounds(new L.LatLngBounds(
 
    map.unproject(mapSW, map.getMaxZoom()), 
 
    map.unproject(mapNE, map.getMaxZoom()), 
 
));*/ 
 
map.setMaxBounds(bounds);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"> 
 
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script> 
 

 
<div id="map" style="height: 200px"></div>

Wenn Sie Ihre Benutzernavigation in einen anderen Bereich beschränken als image Grenzen, können Sie leicht tun, indem Sie ähnliche Grenzen erstellen, ohne auf unproject überhaupt zurückgreifen zu müssen:

var map = L.map('map', { 
 
    crs: L.CRS.Simple, 
 
    zoomControl: true, 
 
    zoom: 1, 
 
    minZoom: 0, 
 
    maxZoom: 4 
 
}); 
 

 
var bounds = [ 
 
    [-250, -500], 
 
    [800, 800] 
 
]; 
 
var image = L.imageOverlay('https://a.tile.openstreetmap.org/0/0/0.png', bounds, { 
 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
 
}).addTo(map); 
 

 
map.fitBounds(bounds); 
 

 
/*map.setMaxBounds(new L.LatLngBounds(
 
    map.unproject(mapSW, map.getMaxZoom()), 
 
    map.unproject(mapNE, map.getMaxZoom()), 
 
));*/ 
 
map.setMaxBounds([ 
 
    [-300, -600], 
 
    [900, 900] 
 
]);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"> 
 
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script> 
 

 
<div id="map" style="height: 200px"></div>