リーフレットのmaxBoundsが予期せずにマップを中心に固定する

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はnull領域です。

さらに、私はその後setMaxBoundsに指定するには、異なる座標で複雑なunprojectを使用して、なぜあなた慎重にイメージオーバーレイ（image）についてboundsを構築し、mapは、それらの境界に合わせ持っていることを確認していませんか？

ライブたとえばイメージオーバーレイと同じ境界にナビゲーションを可能にする、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>