Leaflet: map.remove（）でマップがDOMから完全に削除されていない

こんにちは。このバグの報告に時間を割いていただきありがとうございます。

ただし、問題を再現するために説明した手順に何かが欠けているようです。 上記の手順に沿ってできる限り、遊び場の例を設定しました： http ：

この例では、マップが削除された後はエラーが表示されないため、発生している問題の原因となる何かがさらに進行しているようです。 これを追跡できるように、詳細を教えてください。

@perliedman迅速な対応と、遊び場の例をまとめてくれてありがとう。 あれは再現できません。 さらにいくつかのシナリオを試してください。 私がまだそれを調べている間、いくつかの質問-

map.remove()実行している場合、明示的なレイヤーの削除は必要ですか？ 私の推測では、それは層の除去も処理しますが、確認できますか。

また、タイムアウト時にmap.remove（）がある理由は、この例では作成直後にマップを破棄しているためです。それ以外の場合は、タイムアウトで囲む必要はありません。 正しい？

オープンソースで作業するときは、ソースを_使用_することを忘れないでください！ ：wink：最初の質問_yes_に答えるために、 removeはレイヤーを削除します： https ：

タイムアウトにした理由は、例をもう少し現実的にして、タイルレイヤーがロードされたタイルなどで実際に正しく初期化されていることを確認するためです。この例は、 remove呼び出しを入れなくても同様に機能します。タイムアウトですが、少し人工的なテストのようです。

こんにちは–私もこの問題を経験していると思います。 これが私の基本的なユースケースです：

実際の地図を表示するのではなく、複数のページ/サーフェスを持つオブジェクト用のビューアコンポーネントを構築しています（ Leaflet-IIIFプラグインを使用していますが、ここでは何も影響しないと思います）。 ビューアが読み込まれると、ユーザーがクリックしてUIの中央領域に表示されているオブジェクトのビューを更新できる一連のサムネイルがあります。

ユーザーがビューを変更すると、新しいビューの新しいマップを設定する前にmap.remove()呼び出します。 新しいマップは、古いマップと同じDOM要素（IDを持つdiv）に作成され、Leaflet以外ではDOMを変更していません。

最初のビューでは、すべてが正常に機能します。 しかし、 map.remove()を呼び出して新しいビューを表示した後、コンソールは次のように文句を言います：マップがドラッグまたはズームされるたびにCannot read property '_leaflet_pos' of undefined 。

ある時点で最小限の例を投稿することを試みることができますが、これは同じ問題のようです。 このエラーはChromeで発生しますが、Firefoxでは発生しません。

@egardnerはい、これを再現する例を作成してみてください！

@egardner以前は安定していた電子（クロム+ノード）アプリでまったく同じ問題を元に戻さなければなりませんでした：
「リーフレット」：「1.0.0」、
"leaflet.markercluster"： "1.0.0-rc.1.0"
1.2.0からエラーを削除するには未定義のプロパティ '_leaflet_pos'を読み取れません
これは、同じDOM要素でマップを再作成する前のmap.remove（）の後でもありました。 短期的に作成して例を示す時間がありません

マップを破壊しようとしても同様の問題が発生しています。参照を保持しているようです

上で述べたことを繰り返します。この問題について何でもできるようにするために、問題を再現する例を提供してください。

やあ。 私はこのエラーをフィドルで再現しました。 簡単に言えば、div要素内にマップを作成し、removeメソッドを使用してから、同じdivにマップを再入力すると、マップを移動するたびにエラーが発生します。
Uncaught TypeError：undefinedのプロパティ '_leaflet_pos'を読み取ることができません。

再現するには、フィドルを開き、[マップの削除]をクリックし、[マップの配置]をクリックしてから、コンソールを開いてマップを移動します。
http://jsfiddle.net/spydmobile/5hmadjnk/

FFではなくChormeでのみ発生することに注意してください

はいspydmobile例をありがとう、これは私が上で報告したのと同じChromeで見ているエラーです

同じエラーが表示されますが、ユースケースが少し異なります。 invalidateSize呼び出しが原因で、サイズ変更時に同じエラーがスローされます。

Uncaught TypeError: Cannot read property '_leaflet_pos' of undefined
    at getPosition (leaflet-src.js:2765)
    at NewClass._getMapPanePos (leaflet-src.js:4378)
    at NewClass._rawPanBy (leaflet-src.js:4180)
    at NewClass.invalidateSize (leaflet-src.js:3509)
    at NewClass.<anonymous> (leaflet-src.js:4244)

完全な呼び出しスタックは、 _onResizeハンドラーから始まります。 react-leafletを使用していますが、スタックトレースのどの部分も、それまたは問題となっているローカルコードを示していません。 少なくとも特定の1.x.xバージョンにロックダウンできるかもしれないと思って、いくつかの古いバージョン（ 1.0.3や1.2.0 ）を試しましたが、うまくいきませんでした。

これに関する更新はありますか？ ここで同じ問題が発生し、リーフレットをアプリケーションに統合しています。 マップが破棄された後も、dom要素にはまだ_leaflet_eventsプロパティがありますが、このオブジェクトを削除しても役に立ちませんでした。

ハンドラー関数のコンテキストが古くなっているようです（ハンドラー引数の_mapPaneプライベートプロパティが存在しない要素を指しています）。

私もこれを経験しています。 これは私が見ているスローされた例外の1つです：

https://sentry.io/share/issue/b414c58ea85c44ee9e0e40ad0781883a/

これは主に、ユーザーがブラウザの戻るボタンを使用して地図を離れるときに発生するようです。

私は解決策を見つけたかもしれないと思います：

Mapコンテナdivには、 map.offおよびmap.remove後でさえ発生するいくつかのイベントがまだあります。

私の場合、マップには_leaflet_で始まるプロパティがあり、それらの関数のいくつかは、プロパティ"map._leaflet_events".マップ自体にあることがわかりました。

それらはpointerdown 、 pointermoveなどとして添付されているようですが、プロパティの名前はmap._leaflet_touchstarttouchstart32などのようになっています。

それらを繰り返して手動で削除すると（ removeEventListenerを使用して
これはまた、私が見ていたメモリリークに終止符を打ちました。

ここにコードを投稿することはできませんが、リーフレットのソースでPOINTER_DOWNを検索すると、添付されるイベントが表示され、それらを切り離す方法がわかります。

これはChromeだけでなく、FFでも再現できます（自分のプロジェクトと@spydmobileが提供するjsfiddleの両方で）

@FLoiblおそらく、回避策としてうまく使用しているテクニックを示すために、要点、フィドル、または他の場所に投稿されたスニペットですか？

@spydmobileはここにあります、これは私がわずかに変更された形式でしたことです：
このf * ingコメントフィールドにコードを正しく投稿する方法がわかりません。申し訳ありません。
自分のコメントを10回くらい編集しました笑

function removeMap()
{
    var leafletCtrl = get_your_own_leaflet_reference_from_somewhere(), 
    dom = leafletCtrl.getReferenceToContainerDomSomehow(); 

    //This removes most of the events
    leafletCtrl.off();

//After this, the dom element should be good to reuse, unfortunatly it is not
    leafletCtrl.remove(); 

    var removeDanglingEvents = function(inputObj, checkPrefix)
    {
        if(inputObj !== null)
        {
            //Taken from the leaflet sourcecode directly, you can search for these constants and see how those events are attached, why they are never fully removed i don't know
            var msPointer = L.Browser.msPointer,
            POINTER_DOWN =   msPointer ? 'MSPointerDown'   : 'pointerdown',
            POINTER_MOVE =   msPointer ? 'MSPointerMove'   : 'pointermove',
            POINTER_UP =     msPointer ? 'MSPointerUp'     : 'pointerup',
            POINTER_CANCEL = msPointer ? 'MSPointerCancel' : 'pointercancel';

            for(var prop in inputObj)
            {
                var prefixOk = checkPrefix ? prop.indexOf('_leaflet_') !== -1 : true, propVal; //if we are in the _leaflet_events state kill everything, else only stuff that contains the string '_leaflet_'
                if(inputObj.hasOwnProperty(prop) && prefixOk)
                {
                    //Map the names of the props to the events that were really attached => touchstart equals POINTER_DOWN etc
                    var evt = []; 
                    if(prop.indexOf('touchstart') !== -1) //indexOf because the prop names are really weird 'touchstarttouchstart36' etc
                    {
                        evt = [POINTER_DOWN];
                    }
                    else if(prop.indexOf('touchmove') !== -1)
                    {
                        evt = [POINTER_MOVE];
                    }
                    else if(prop.indexOf('touchend') !== -1)
                    {
                        evt = [POINTER_UP, POINTER_CANCEL];
                    }

                    propVal = inputObj[prop];
                    if(evt.length > 0 && typeof propVal === 'function')
                    {
                        evt.each(function(domEvent)
                        {
                            dom.removeEventListener(domEvent, propVal, false);
                        });                    
                    }

                    //Reference B-GONE, Garbage b collected.
                    inputObj[prop] = null;
                    delete inputObj[prop];
                }
            }
        }        
    };

    removeDanglingEvents(dom._leaflet_events, false);
    removeDanglingEvents(dom, true);
}

@FLoiblhttps ： //help.github.com/articles/basic-writing-and-formatting-syntax/#quoting-codeを参照してください

ああトリプルバックティック、わかった、ty。

@FLoiblこれは非常に良い調査です：+1：

ログを追加していただけませんか...？ https://github.com/Leaflet/Leaflet/blob/5161140e952969c5da27751b79154a2c93f53bfa/src/dom/DomEvent.Pointer.js#L39およびhttps://github.com/Leaflet/Leaflet/blob/fe9e0f2333888e8c02b9e7f83bf337 js＃L133

それらは時にすべてのイベントのために実行しておく必要がL.Map破壊され、あなたがやっていることと同じことをやっているはずですが、予想通り、それは仕事をしない理由のだろうか。

ええ、私はその関数を知っていて、それが呼び出されるのを見ていますが、すべてのイベントに対してではありません。

問題は、コードがそれらを「pointermove」などとしてdomにアタッチしていることだと思いますが、プロパティ名は「touchstart」などです。また、「touchstart」という単語がプロパティ名に2回表示されます。これは、予期しないdoubeconcatの可能性があります。 IDとイベント名？

また、これらの「ポインター」イベントは、タッチスクリーンのないWindows 10やChromeでも添付する必要がありますか？
残念ながら、私は実際の修正を提供するためのリーフレットの内部の仕組みについて十分に知りません:-(

私はその関数を知っていて、それが呼び出されるのを見ていますが、すべてのイベントに対してではありません。

ここで問題は、 removePointerListenerが呼び出されないイベントは何ですか？ たぶん、あちこちで関数呼び出しが欠落しています。

また、これらの「ポインター」イベントは、タッチスクリーンのないWindows 10やChromeでも添付する必要がありますか？

はい。 システムにタッチスクリーンがあるかどうかを検出することはほぼ不可能であるため、ブラウザがポインタイベントをサポートしている場合は、それらが使用されると

私は実際の修正を提供するためのリーフレットの内部の仕組みについて十分に知りません:-(

ねえ、絶望しないでください、これは素晴らしい調査作業です！ ：笑顔：

このバグはバージョン1.0.3には存在しません。 @spydmobile jsfiddleを入手し、リーフレットのバージョンを変更すると、エラーは消えますhttp://jsfiddle.net/5hmadjnk/47/ 。 バージョン1.1.0では、すでに存在しています。

@ benru89このバグは、実際には1.0.3にhttps://github.com/Leaflet/Leaflet/issues/5263の形式で存在していました（主に

今も影響を受ける1.0.3から1.1.0への変更は非推奨L.Mixin.Events私はこれがないでもして、きれいにダウン追跡することができないと思うので、とrollupJSビルドをgit bisect 。

@IvanSanchez 1.0.3と1.1.0の削除機能を比較しましたが、これが追加されました：

for (i in this._panes) {
    remove(this._panes[i]);
}
this._layers = [];
this._panes = [];
delete this._mapPane;
delete this._renderer;

6行目を削除すると、mapPaneを削除した行でエラーがなくなります。 ただし、これを削除した場合の影響はわかりません。mapPaneを削除する必要があると思いますが、このバグは、その行が追加されたときに確実に発生しました。

@ benru89うわー、それも良い情報です：+1：

：thinking：が、現在マップペインにどのポインタイベントハンドラが存在するかがわかりません。

マップペインを削除しないことで、問題を隠すだけだと思います。 コールスタックを追跡したとき、問題は、一部の_mapPaneオブジェクトが破壊されたdom要素を指しているため、未定義からキャッシュされた位置を取得しようとしたことでした。 ペインが破棄されていない場合、ゴーストイベントは例外をトリガーせずに通過する可能性があります。

@Floibl私はあなたに同意します、それは解決策ではないと思いますが、呼び出しスタックをチェックするときにnull _mapPaneに気づいたので、その行を削除しようとしませんでした。 解決策は、私が推測するイベントハンドラーを適切に削除する側にある必要があります。

これを引き起こしているイベントハンドラー（少なくとも私の場合と@spydmobile ）は「touchExtend」と呼ばれているので、leaflet.drawハンドラーだと思います。 leaflet.drawのインポートを削除すると、例外も停止することがわかりました。

別の回避策を見つけました。 文書化されていないオプションtouchExtend : false使用してマップを初期化すると、問題のあるハンドラーが非アクティブ化されるため、例外はなくなります。 それを行うことでどの機能が失われるのか本当にわかりませんが、コードを見ると、モバイルまたはタッチスクリーン用の拡張ジェスチャである可能性がありますか？ いずれにせよ、私のアプリではすべてがうまく機能しているようです。

@IvanSanchez同じ問題かどうかは
ズームアニメーションの進行中にマップを破棄すると、同じエラーUncaught TypeError: Cannot read property '_leaflet_pos' of undefinedます。

コードの内部を調べてみたところ、 Map._animateZoom()中に次の行があることがわかりました： setTimeout(Util.bind(this._onZoomTransitionEnd, this), 250);
私が十分に理解していれば、マップが削除されてもこのタイムアウトは破棄されないため、関数Map._onZoomTransitionEndが常に呼び出されます。 それはあなたの_「あちこちで関数呼び出しを逃している」_かもしれません。

そして、簡略化されたコールツリーthis._onZoomTransitionEnd -> this._move -> this._getNewPixelOrigin -> this._getMapPanePos -> getPosition(this._mapPane) -> return el._leaflet_pos this._mapPaneは_undefined_であるため、 return el._leaflet_pos失敗します。

this._moveとthis._moveEnd呼び出しをif (this._mapPane) {}条件にラップすると、このケースは修正される可能性がありますが、他の結果があるかどうかはテストしていません。

これを置き換えます：

_onZoomTransitionEnd: function () {
    if (!this._animatingZoom) { return; }

    if (this._mapPane) {
        removeClass(this._mapPane, 'leaflet-zoom-anim');
    }

    this._animatingZoom = false;

    this._move(this._animateToCenter, this._animateToZoom);

    // This anim frame should prevent an obscure iOS webkit tile loading race condition.
    requestAnimFrame(function () {
        this._moveEnd(true);
    }, this);
}

これとともに：

_onZoomTransitionEnd: function () {
    if (!this._animatingZoom) { return; }

    this._animatingZoom = false;

    if (this._mapPane) {
        removeClass(this._mapPane, 'leaflet-zoom-anim');
        this._move(this._animateToCenter, this._animateToZoom);

        // This anim frame should prevent an obscure iOS webkit tile loading race condition.
        requestAnimFrame(function () {
            this._moveEnd(true);
        }, this);
    }
}

これに関する更新はありますか？ 同じ問題が発生しています。 touchExtend : falseは役に立ちません。 この問題は、マップがあるビュー（この時点でmap.remove（）を呼び出すことによって破棄されています）から移動してから、このビューに戻ると発生します。 新しいマップを作成して初期化する必要がありますが、 setMaxBoundsメソッドのgetPositionで「_leaflet_pos」エラーが発生します。

Uncaught (in promise) TypeError: Cannot read property '_leaflet_pos' of undefined
    at getPosition (webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:2445)
    at NewClass._getMapPanePos (webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:4409)
    at NewClass._moved (webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:4413)
    at NewClass.getCenter (webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:3774)
    at NewClass.panInsideBounds (webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:3488)
    at NewClass._panInsideMaxBounds (webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:4220)
    at NewClass.setMaxBounds (webpack-internal:///./node_modules/leaflet/dist/leaflet-src.js:3444)

また、 setViewメソッドでも次のようになります。

Uncaught (in promise) TypeError: Cannot read property '_leaflet_pos' of undefined at getPosition (leaflet-src.js?9eb7:2445) at NewClass._getMapPanePos (leaflet-src.js?9eb7:4409) at NewClass.containerPointToLayerPoint (leaflet-src.js?9eb7:3989) at NewClass._getCenterLayerPoint (leaflet-src.js?9eb7:4446) at NewClass._getCenterOffset (leaflet-src.js?9eb7:4451) at NewClass._tryAnimatedPan (leaflet-src.js?9eb7:4526) at NewClass.setView (leaflet-src.js?9eb7:3181)

map.remove（）の後に同じ問題が発生し、マップを再初期化して、この正確なエラーを取得します

v1.6.0でも同じ問題。 複雑な問題です

これがSSCCEです： https ：//jsfiddle.net/0oafw694/1/

基本的に、次のコードを実行します…

map = L.map('map');
map.setView(...);
map.setMaxBounds(...);
map.remove();

…2つのイベントリスナーをアタッチしたままにします。

moveend: (1) […]
0: Object { fn: _panInsideMaxBounds(), ctx: undefined } // from setMaxBounds

unload: (2) […]
0: Object { fn: _destroy() , ctx: {…} }
1: Object { fn: _destroyAnimProxy(), ctx: undefined }

zoomanim: (1) […]
0: Object { fn: _createAnimProxy(), ctx: undefined }

zoomanim/_createAnimProxyはunload/_destroyAnimProxyを介して処理されるので、問題はないと思います。 ただし、 moveend/_panInsideMaxBoundsは登録を解除する必要があります。 PRを用意します…

動的IDを持つマップのdivを作成することになったので、divを再利用する必要がある場合は、メモリを解放するために既存のマップをremove（）してから（まだ発生しているイベントがいくつかあります）、異なるIDでdivを再描画して、新しいマップを作成します。

また、すべてのマップをオブジェクトに保存しているので、そのIDに従ってマップを操作できます（複数のマップが表示されることがあり、すべて動的IDが使用されます）

リーフレットを使った私の実験によると、開発者が操作するイベント（moveend、movestartなど）はすべて、デフォルトの動作を変更し、DOMからリーフレットをアンロードする間メモリに残ります。
私はこれを行いました： @moveend="()=>{enableRecenter = true}"など、マップのアンロード/削除中、「moveend」のハンドラーはメモリに残りました。
これらのメソッドの操作（自分の実装）をマップコンポーネント自体から削除したところ、このエラーが表示されなくなりました。

したがって、基本的に、マップメソッドには絶対に触れないでください!!! もちろん、ライブラリがこの動作を検出してこのバグを修正しない限り、