javascript - Leaflet maxBounds 意外地将 map 固定到中心

Question

我尝试限制移动 map 失焦，但 map 固定在中心且无法移动。

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()),
));

如果我启用setmaxBounds() map 的背景图像固定在中心并且可以弹性移动。 map 移动，直到它被拖动，拖完 map 回到它的中心。

我尝试了几个例子，但仍然没有成功。你看到我哪里出错了吗？

Answer 1

您的 mapSW 和 mapNE 坐标是相同的，因此您可以根据它们构建的 LatLngBounds 是空区域。

此外，我不确定为什么要为图像叠加层 (image) 仔细构建 bounds 并让 map 适合这些边界, 然后使用不同坐标的复杂unproject 来指定setMaxBounds?

为 setMaxBounds 使用相同的 bounds 的实例，允许导航到与图像叠加层相同的边界:

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>

如果您希望将用户导航限制在与您的image 边界不同的区域，您可以通过构建类似的边界轻松地做到这一点，而不必求助于unproject 完全没有:

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>