Leaflet: ウィンドウのサイズを変更するまで、すべてのタイルが読み込まれるわけではありません

Windowsでのサイズ変更は正しく機能します。次の例を参照してください： http ：

マップコンテナのサイズを手動で変更する場合は、 map.invalidateSize()を呼び出す必要があります。

同じ問題が発生しています。 最初は一部のタイルのみが表示されていますが、ブラウザのウィンドウのサイズを変更すると、すべてのタイルが表示されます。

chrome27のこのバグは修正されていません。同じ問題があります。
URLが失敗しました

これをチェックしてください： http ：

@mournerマップを動的に変更する必要があります。map._onResize（）を使用して修正します。上のURLはフルスクリーンの例であり、マップサイズを変更するためのものではありません。ハックしていただきありがとうございます@ ludinov-stuzo

@mourner問題を発見しました。アニメーションの後にsetTimeout（）を使用してinvalidateSize（）を実行します。

    var is_fullScreen=0;
    $("#close_left").click(function(){
        if(is_fullScreen){
            $("#left_panel").animate({left:0,opacity:1},800);
            $("#right_panel").animate({marginLeft:280},800);
            this.className="icon-left";
            is_fullScreen=0;
            setTimeout(function(){ map.setView([5,40],2);},1000);
        }else{
            $("#left_panel").animate({left:-280,opacity:0},800);
            $("#right_panel").animate({marginLeft:0},800);
            this.className="icon-right";
            setTimeout(function(){map.invalidateSize();            map.setView([5,-20],3);},1000)
            is_fullScreen=1;
        }
    });

Windowsでのサイズ変更は正しく機能します。次の例を参照してください： http ：

マップコンテナのサイズを手動で変更する場合は、 map.invalidateSize()を呼び出す必要があります。

あなたは私の日を作りました。 私の地図は正しく機能しませんでした。 setView 、 flyTo 、 panTo 、 fitboundsを含む関数はどれも正しく機能しません。 それは時々機能し、時には機能しません。 いつなのかわから

どうもありがとう。

Map objが私を助けてくれたことを聞いてください。 マップがロードまたはサイズ変更され、実行中にトリガーされる関数を追加します- map.invalidateSize().

反応フックの方法：

import { Map as LeafletMap } from "react-leaflet";

export default const MyMap = () => {

   useEffect(()=>{
        mapElement.current.leafletElement.invalidateSize();
    },[mapElement])


  /*render and other function*/
}