Question

我尝试将移动地图限制在焦点之外，但地图固定在中心位置，无法移动。

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（）地图的背景图片修复为中心，则可以弹性移动。拖动结束地图后，将地图移动，直到被拖动为止。

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

Answer 1

您的mapSW和mapNE坐标是相同的，因此您可以构建的LatLngBounds是零区域。

此外，我不确定为什么你为你的图像叠加（bounds）仔细构建image并使map适合这些边界，然后使用复杂的unproject使用不同的坐标来指定setMaxBounds？

为bounds使用相同setMaxBounds的实例，可以导航到与图像叠加相同的边界：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您希望将用户导航限制在与image范围不同的区域，您可以通过构建类似的边界轻松实现此目的，而无需依赖unproject ：

＆＃13;

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]
]);

＆＃13;

<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>

＆＃13;

Leaflet maxBounds意外地将地图固定到中心

1 个答案: