Leaflet map 使圖像疊加居中

Question

首先，我對 leaflet （之前使用開放層）有點新，並且想切換，因為界面看起來有點簡單。

無論如何，我的用例非常簡單，我們只想用它來顯示將有點的圖像地圖。 在此處使用示例

https://leafletjs.com/examples/crs-simple/crs-simple-example2.html

我們能夠得到一個 map 來顯示，添加一個 map 點等，但是我們遇到的問題是試圖讓 map 到中心。 這些地圖的大小會有所不同，但無論我們嘗試什么，map 在查看或放大時似乎總是遠離屏幕。

我有一種感覺，這是由於綁定選項，但對於我的生活，我似乎無法清楚地了解它應該如何工作。

示例代碼非常簡單（或者不是大聲笑，因為我似乎無法讓它做我想做的事）

HTML 僅包含一個 map div 與 styles

#map {
    width: 600px;
    height: 600px;
}

標記是

var newMarker = "";
map = L.map('map', {
        crs: L.CRS.Simple,
         minZoom: -6,
         maxZoom:8,
         zoom:-6
    });

    var bounds = [[-1283,-2000], [2564,4000]];
    var image = L.imageOverlay(`path/to/image.jpg`, bounds).addTo(map);
    map.fitBounds(bounds);
    map.setZoom(-3);




map.on('click', addMarker);

如前所述，map 渲染但圖像總是遠離屏幕，只有部分圖像顯示，我必須將其平移到視圖中。

我想我想弄清楚的是如何讓這個 dang 圖像居中而不是超級放大，無論如何有助於理解邊界應該如何工作會很好，因為我沒有掌握計算應該是什么正確居中圖像。

謝謝！

Answer 1

萬一其他人遇到這個問題，非常感謝@IvanSanchez 花時間創建測試代碼..

基本上，我遇到的是一個事實（我應該在原帖中這么說）是我們在 function 上調用 map。 這行得通，但 map 離中心太遠了。

這導致在沒有 function 的情況下測試代碼，並且它確實有效。所以這又回到了 map 的調用方式，它是“向導”的一部分，您在其中 Z99938282F040761859941E18F（然后它移動到下一個屏幕）都在同一頁上）我們會將 map 構建到尚未顯示的 div 中。

這意味着它總是偏離中心。這意味着我們需要使用

map.invalidateSize(true)

This bit of code does resize the map, however it will not work if the map is in a 'hidden' state, so we had to refactor the code a bit to call the buildMap and invalidatesize after the map was visible