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