Leaflet map 使图像叠加居中

Question

To start, I'm a bit new to leaflet (was using open layers before) and wanted to switch because the interface seemed a bit simple.

Anyhow, my use case is quite simple, we want to use it only to display image maps that will have points on them. Using the example here

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

We are able to get a map to display, add a map point, etc but where we are having an issue is trying to get the map to the center. These maps will vary in size but no matter what we try the map always seems to be way off the screen when viewing OR way to zoomed in.

I have a feeling this is due to the bound option but for the life of me, I can't seem to get a clear understanding of how this should work.

The sample code is very simple ( or not lol because I can't seem to get it to do what I want it to )

HTML contains just one map div with styles of

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

The markup is

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

As noted, the map renders but the image is always way off the screen where only part of the image shows and I have to pan it into view.

I guess what I'm trying to figure out is how I can get this dang image to be centered and not super zoomed in, anyhow help in understanding how the bound should work would be great because I'm not grasping what the calculation should be to correctly center the image.

Thanks!

Answer 1

In case anyone else runs into this issue and much thanks to @IvanSanchez for taking the time to create the test code..

Basically, what I was running into is the fact ( and I should have said this in the original post ) is that we call the map build on a function. This worked but the map was way off center..

This lead to testing the code without the function and, it did work.. So this came back to how the map was being called, it was part of a 'wizard' where you select an item, then it moves to the next screen ( all on the same page ) we would build the map to a div that was yet to be displayed..

This meant it was alway off center.. This meant we needed to use

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