Leaflet: 지도는 DOM의 map.remove()에서 완전히 제거되지 않습니다.

안녕하세요. 시간을 내어 이 버그를 신고해 주셔서 감사합니다.

그러나 문제를 재현하기 위해 설명하는 단계에서 누락된 부분이 있는 것 같습니다. 위의 단계를 따라 할 수 있는 것처럼 놀이터 예제를 설정했습니다. http://playground-leaflet.rhcloud.com/rezop/edit?html ,output

이 예에서는 지도가 제거된 후 오류를 볼 수 없습니다. 따라서 현재 보고 있는 문제를 일으키는 더 많은 작업이 진행되고 있는 것 같습니다. 추적할 수 있도록 더 자세한 정보를 제공해 주시겠습니까?

@perliedman 빠른 응답과 놀이터 예제를 함께

map.remove() 하는 경우 명시적인 레이어 제거가 필요합니까? 내 생각에는 레이어 제거도 처리하지만 확인할 수 있습니까?

그리고 timeout 아래에 map.remove()가 있는 이유는 예제에서 생성 직후 맵을 파괴하고 있기 때문입니다. 그렇지 않으면 타임아웃으로 묶을 필요가 없습니다. 옳은?

오픈 소스로 작업할 때 소스를 _사용_한다는 것을 기억하십시오! :wink: 첫 번째 질문에 답하기 위해 _yes_, remove 가 레이어를 제거합니다: https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L731

타임아웃에 넣은 이유는 타일 레이어가 실제로 로드된 타일 등으로 제대로 초기화되었는지 확인하여 내 예제를 좀 더 현실적으로 만들기 위함이었습니다. 예제는 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에 맵을 다시 채우면 모든 맵 이동이 오류를 생성합니다.
잡히지 않은 TypeError: 정의되지 않은 '_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.0.3 및 1.2.0 )을 시도했지만 특정 1.x.x 버전으로 잠글 수 있을 것이라고 생각했지만 운이 없었습니다.

이에 대한 업데이트가 있습니까? 내 응용 프로그램에 전단지를 통합하는 것과 동일한 문제가 있습니다. 지도가 파괴된 후에도 dom 요소에는 여전히 _leaflet_events 속성이 있지만 이 개체를 제거하는 것도 도움이 되지 않았습니다.

처리기 함수의 컨텍스트가 오래된 것 같습니다(처리기 인수의 _mapPane 개인 속성이 존재하지 않는 요소를 가리킴).

저도 이것을 겪고 있습니다. 이것은 내가보고있는 예외 중 하나입니다.

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

이것은 사용자가 브라우저 뒤로 버튼을 사용하여 지도를 떠날 때 주로 발생하는 것 같습니다.

해결책을 찾았을 수도 있다고 생각합니다.

Map 컨테이너 div에는 map.off 및 map.remove 이후에도 발생하는 일부 이벤트가 여전히 있습니다.

제 경우에는 지도에 _leaflet_ 시작하는 속성이 있고 해당 기능 중 일부는 "map._leaflet_events". 속성의 지도 자체에 있는 것으로 나타났습니다.

pointerdown , pointermove 등으로 첨부된 것 같지만 속성의 이름은 map._leaflet_touchstarttouchstart32 등과 같습니다.

나는 그것들을 반복하고 수동으로 제거하면( removeEventListener 다음 좋은 측정을 위해 속성 자체를 null로 만들고 삭제), 다른 맵에 div를 재사용할 수 있다는 것을 알았습니다.
이것은 또한 내가보고 있던 메모리 누수에 종지부를 찍었습니다.

여기에 코드를 게시할 수는 없지만 POINTER_DOWN 대한 전단지 소스를 검색하면 첨부된 이벤트를 볼 수 있고 이를 분리하는 방법을 알 수 있습니다.

Chrome에서뿐만 아니라 FF에서도 재현할 수 있습니다(내 프로젝트와 @spydmobile에서 제공하는 jsfiddle 모두 사용)

@FLoibl 아마도 해결 방법에 성공적으로 사용하는 기술을 보여주기 위해 다른 곳에 게시된 요점, 바이올린 또는 일부 스니펫이 있습니까?

@spydmobile이 여기에 있습니다. 이것은 내가 약간 수정된 형태로 수행한 것입니다.
이 빌어먹을 댓글 필드에 코드를 제대로 게시하는 방법을 모르겠습니다. 죄송합니다.
지금 제 댓글을 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);
}

@FLoibl 참조 https://help.github.com/articles/basic-writing-and-formatting-syntax/#quoting -code

아, 트리플 백틱, 알겠습니다.

@FLoibl 이것은 아주 좋은 조사입니다 :+1:

로깅을 추가해 주시겠습니까...? https://github.com/Leaflet/Leaflet/blob/5161140e952969c5da27751b79154a2c93f53bfa/src/dom/DomEvent.Pointer.js#L39/DomEvent.Pointer.js#L39 및 https://github.com/Leaflet/Leaflet/blob/fe9380 js#L133

그것들 은 L.Map 가 파괴될 때 모든 이벤트에 대해 실행 되어야 하고, 당신이 하고 있는 것과 같은 일을 해야 하지만, 왜 그것이 예상대로 작동하지 않는지 궁금합니다.

예, 나는 그 기능을 알고 있고 그것이 호출된다는 것을 알지만 모든 이벤트에 대해 그렇지는 않습니다.

문제는 코드가 dom에 "pointermove" 등으로 첨부하지만 속성 이름은 "touchstart" 등이라는 것입니다. 또한 "touchstart"라는 단어가 속성 이름에 두 번 표시됩니다. 아이디와 이벤트명?

또한 이러한 "포인터" 이벤트는 터치스크린이 없는 Windows 10 및 Chrome에도 첨부되어야 합니까?
불행히도, 나는 실제 수정을 제공하기 위해 전단지 내부 작동에 대해 충분히 알지 못합니다 :-(

나는 그 기능을 알고 있고 그것이 호출된다는 것을 알지만 모든 이벤트에 대해 그렇지는 않습니다.

이제 질문은 다음과 같습니다. removePointerListener 가 호출 되지 않은 이벤트는 무엇입니까? 여기 저기에 함수 호출이 누락되었을 수 있습니다.

또한 이러한 "포인터" 이벤트는 터치스크린이 없는 Windows 10 및 Chrome에도 첨부되어야 합니까?

예. 시스템에 터치스크린이 있는지 여부를 감지하는 것은 거의 불가능하므로 브라우저가 포인터 이벤트를 지원하는 경우 포인터 이벤트가 사용될 것이라고 가정 합니다.

나는 실제 수정을 제공하기 위해 전단지 내부 작동에 대해 충분히 알지 못합니다 :-(

이봐, 절망하지 마, 이것은 훌륭한 조사 작업이야! :웃다:

이 버그는 버전 1.0.3에는 없습니다. @spydmobile jsfiddle을 선택하고 전단지 버전을 변경하면 오류가 사라집니다 http://jsfiddle.net/5hmadjnk/47/ . 버전 1.1.0에서는 이미 있습니다.

@benru89 이 버그는 실제로 https://github.com/Leaflet/Leaflet/issues/5263 의 형태로 1.0.3에 존재했습니다(대부분 https://github.com/Leaflet/Leaflet/pull/에 의해 수정됨). 5265).

1.1.0에 1.0.3에서의 변화는 또한 현재 사용되지 않는 영향을 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;

여섯 번째 줄을 제거하면 mapPane을 삭제하는 오류가 사라집니다. 그러나 이것을 제거하는 것의 영향은 모르겠습니다. mapPane이 삭제되어야 한다고 생각하지만 이 버그는 해당 줄이 추가되었을 때 확실히 도입되었습니다.

@benru89 와, 그것도 좋은 정보

지금은 지도 창에 어떤 포인터 이벤트 핸들러가 있는지 알 수 없습니다.

지도 창을 제거하지 않음으로써 문제를 가릴 뿐이라고 생각합니다. 호출 스택을 추적했을 때 문제는 일부 _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();

... 두 개의 이벤트 리스너가 연결된 상태로 둡니다.

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 는 등록을 취소해야 합니다. 홍보를 준비하겠습니다...

방금 동적 ID가 있는 맵에 대한 div를 만들었습니다. 따라서 div를 재사용해야 할 때 메모리를 해제하기 위해 기존 맵을 제거()한 다음(일부 이벤트가 여전히 진행 중이더라도) 그런 다음 다른 ID로 div를 다시 그려서 새 맵을 만듭니다.

또한 모든 지도를 개체에 저장하므로 해당 ID에 따라 조작할 수 있습니다(동적 ID를 사용하여 두 개 이상의 지도를 가끔 볼 수 있음).

전단지에 대한 내 실험에 따르면 개발자가 조작하는 모든 이벤트(예: moveend, movestart 등)는 기본 동작을 변경하고 dom에서 전단지를 언로드하는 동안 메모리에 남아 있습니다.
나는 이것을 @moveend="()=>{enableRecenter = true}" 했으므로 지도를 언로드/제거하는 동안 'moveend' 핸들러가 메모리에 남아 있었습니다.
지도 구성 요소 자체에서 이러한 메서드의 조작(내 자체 구현)을 제거했는데 이제 이 오류가 표시되지 않습니다.

따라서 기본적으로 지도 방법을 만지지 마십시오!!! 물론 라이브러리가 이 동작을 감지하고 이 버그를 수정하지 않는 한.