Leaflet JS 矩形仅在浏览器在 bootstrap 模态导航选项卡上调整大小后才起作用

Question

我有一个带有四个选项卡的 bootstrap 模式。在单击的每个选项卡上，都会初始化地图，并在相应地图的顶部添加 4 个差异图像。

框已创建，但只有当我手动调整浏览器大小时，框才会出现。根据我的研究，我已经尝试过 map.invalidateSize() 但它不起作用。你能帮帮我吗？

以下是我的代码 请假设 x1,y1,x2,y2 正确传递

       var map = L.map(mapArea, {
            minZoom: -2,
            maxZoom: 4,
            center: [500, 500],
            zoom: -1,
            crs: L.CRS.Simple,
            attributionControl: false

        });

        L.imageOverlay(image, [[y1, x1], [y2, x2]]).addTo(map);

接下来，我尝试在此图像上添加矩形。

        var rect;  
                           
                rect = new L.rectangle([[x1, y1], [x2, y2]], rectOptions);                    
                map.addLayer(rect);

Answer 1

       for each tab clicked, i added the following event handler and now it works!

        $('.nav-tabs a[href="#myTab0"]').on('shown.bs.tab', function (event) {
            setTimeout(function () {
                Map.invalidateSize();
            },1);
        });

Leaflet JS 矩形仅在浏览器在 bootstrap 模态导航选项卡上调整大小后才起作用

Leaflet JS rectangle work only after browser resize on bootstrap modal nav-tabs

javascript

leaflet

bootstrap-modal