Leaflet: la carte n'est pas complètement supprimée sur map.remove() du DOM

Bonjour et merci d'avoir pris le temps de signaler ce bug.

Cependant, il semble que quelque chose manque dans les étapes que vous décrivez pour reproduire le problème. J'ai configuré un exemple de terrain de jeu aussi bien que possible en suivant les étapes ci-dessus : http://playground-leaflet.rhcloud.com/rezop/edit?html ,output

Dans cet exemple, je ne vois aucune erreur après la suppression de la carte, donc apparemment, il se passe quelque chose de plus qui cause le problème que vous voyez. Pourriez-vous s'il vous plaît fournir plus de détails, afin que nous puissions retrouver cela.

@perliedman Merci pour la réponse rapide et l'exemple de terrain de jeu. Je ne suis pas en mesure de reproduire sur celui-là. Essayer quelques autres scénarios. pendant que j'y réfléchis encore, quelques questions -

Ai-je besoin d'une suppression explicite de la couche, si je fais map.remove() ? Je suppose qu'il s'occupera également de l'élimination des couches, mais pouvez-vous confirmer.

Et la raison pour laquelle vous avez map.remove() sous timeout est que dans l'exemple, vous détruisez la carte juste après sa création, sinon il n'est pas nécessaire de l'entourer d'un timeout. correct?

N'oubliez pas que lorsque vous travaillez en open source, _utilisez_ la source ! :wink: Pour répondre à votre première question, _oui_, remove supprimera les calques : https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L731

La raison pour laquelle je l'ai mis dans un délai d'attente était de rendre mon exemple un peu plus réaliste, en m'assurant que la couche de tuiles était réellement initialisée correctement avec les tuiles chargées, etc. L'exemple fonctionne aussi bien sans mettre l'appel remove dans un délai d'attente, mais cela ressemble un peu à un test artificiel.

Bonjour, je pense que je rencontre également ce problème. Voici mon cas d'utilisation de base :

Je construis un composant de visualisation (à l'aide du plugin Leaflet-IIIF , mais je ne pense pas que cela ait un impact sur quoi que ce soit ici) pour les objets avec plusieurs pages / surfaces au lieu d'afficher une carte réelle. Lorsque la visionneuse se charge, il y a une série de vignettes sur lesquelles l'utilisateur peut cliquer pour mettre à jour quelle vue d'un objet est affichée dans la zone centrale de l'interface utilisateur.

Lorsque l'utilisateur modifie la vue, j'appelle map.remove() avant de configurer une nouvelle carte pour la nouvelle vue. La nouvelle carte est créée sur le même élément DOM que l'ancien (un div avec un ID), et je ne modifie le DOM en aucune façon en dehors de Leaflet.

Sur la vue initiale, tout fonctionne bien. Mais après avoir appelé map.remove() et affiché une nouvelle vue, la console se plaint : Cannot read property '_leaflet_pos' of undefined chaque fois que la carte est déplacée ou agrandie.

Je peux essayer de poster un exemple minimal à un moment donné, mais cela semble être le même problème. Cette erreur se produit dans Chrome mais pas dans Firefox.

@egardner oui, s'il vous plaît essayez de créer un exemple qui reproduise cela !

@egardner exactement le même problème sur l'application électronique précédemment stable (Chrome + Nœud) à laquelle je devais revenir:
"dépliant": "1.0.0",
"leaflet.markercluster": "1.0.0-rc.1.0"
de 1.2.0 pour supprimer l'erreur Impossible de lire la propriété '_leaflet_pos' de non défini
C'était également après un map.remove() avant de recréer la carte dans le même élément DOM. Je n'ai pas le temps pour l'instant de créer et d'exemple sur le court terme

Nous rencontrons également un problème similaire en essayant de détruire une carte, elle semble s'accrocher aux références

Je vais réitérer ce que j'ai dit ci-dessus : pour que nous puissions faire quoi que ce soit à propos de ce problème, veuillez fournir un exemple qui reproduit le problème.

Salut. J'ai reproduit cette erreur dans un violon. en termes simples, si vous créez une carte à l'intérieur d'un élément div, puis utilisez la méthode remove, puis repeuplez la carte sur le même div, chaque déplacement de carte générera alors une erreur
Uncaught TypeError : Impossible de lire la propriété '_leaflet_pos' de non défini.

Pour reproduire, ouvrez mon violon, cliquez sur Supprimer la carte, cliquez sur Placer la carte, puis ouvrez la console et déplacez la carte.
http://jsfiddle.net/spydmobile/5hmadjnk/

Attention, cela n'arrive que dans Chorme, pas dans FF

Oui spydmobile merci pour l'exemple, c'est la même erreur que je vois dans Chrome que j'ai signalé ci-dessus

Je vois la même erreur mais dans un cas d'utilisation légèrement différent. La même erreur est renvoyée lors du redimensionnement en raison d'un appel 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)

La pile d'appels complète commence au niveau du gestionnaire _onResize . J'utilise react-leaflet mais aucune partie de la trace de la pile ne pointe vers cela ou le code local étant le problème. J'ai essayé quelques versions plus anciennes (par exemple 1.0.3 et 1.2.0 ) en pensant que nous pourrions au moins le verrouiller sur une version spécifique de 1.x.x , mais sans succès.

Y a-t-il une mise à jour à ce sujet ? Ayant le même problème ici en intégrant le dépliant dans mon application. Une fois la carte détruite, l'élément dom a toujours une propriété _leaflet_events, mais se débarrasser de cet objet n'a pas aidé non plus.

Il semble que le contexte de la fonction de gestionnaire soit obsolète (la propriété privée _mapPane dans les arguments du gestionnaire pointe vers un élément inexistant).

Je vis ça aussi. C'est l'une des exceptions levées que je vois :

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

Il semble que cela se produise principalement lorsqu'un utilisateur utilise le bouton de retour du navigateur pour quitter la carte.

Je pense avoir trouvé la solution :

Le div du conteneur Map a toujours des événements qui sont déclenchés même après map.off et map.remove .

Dans mon cas, la carte a des propriétés qui commencent par _leaflet_ et certaines de ces fonctions que j'ai trouvées se trouvaient sur la carte elle-même dans la propriété "map._leaflet_events".

Ceux-ci semblent être attachés comme pointerdown , pointermove et autres, mais les noms des propriétés sont comme map._leaflet_touchstarttouchstart32 etc.

J'ai trouvé que si je les itère et que je les supprime manuellement (en utilisant removeEventListener puis en annulant et en supprimant la propriété elle-même pour faire bonne mesure), je peux réutiliser le div pour une autre carte.
Cela a également mis fin aux fuites de mémoire que je voyais.

Je ne peux pas poster de code ici, mais si vous recherchez POINTER_DOWN dans la source du dépliant, vous verrez les événements qui sont attachés et saurez comment les détacher.

Je peux reproduire cela sur Chrome mais aussi dans FF (à la fois sur mon propre projet et avec le jsfiddle fourni par @spydmobile)

@FLoibl Peut-être un

@spydmobile voilà, c'est ce que j'ai fait sous une forme légèrement modifiée :
Je n'ai aucune idée de comment publier le code correctement dans ce putain de champ de commentaire, désolé pour ça.
J'ai édité mon propre commentaire environ 10 fois maintenant lol

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 Voir https://help.github.com/articles/basic-writing-and-formatting-syntax/#quoting -code

Ah triple backticks, j'ai compris, ty.

@FLoibl C'est une très bonne enquête :+1:

Pourriez-vous s'il vous plaît ajouter un peu de journalisation... ? https://github.com/Leaflet/Leaflet/blob/5161140e952969c5da27751b79154a2c93f53bfa/src/dom/DomEvent.Pointer.js#L39 et https://github.com/Leaflet/Leaflet/blob/fe9e0f2333888e8c02b6.f3e7f0dom/ js#L133

Ceux-ci devraient être exécutés pour chaque événement lorsqu'un L.Map est détruit, et devraient faire la même chose que vous, mais je me demande pourquoi cela ne fonctionne pas comme prévu.

Oui, je connais cette fonction et je vois qu'elle est appelée, mais pas pour tous les événements.

Je pense que le problème est que le code les attache comme "pointermove" etc au dom, mais les noms de propriété sont "touchstart" etc. De plus, le mot "touchstart" est vu deux fois dans le nom de la propriété, peut-être un double concat inattendu du identifiant et nom de l'événement ?

De plus, ces événements de "pointeur" devraient-ils même être attachés sur Windows 10 sans écran tactile et dans Chrome ?
Malheureusement, je ne connais pas assez le fonctionnement interne des dépliants pour fournir une vraie solution :-(

Je connais cette fonction et je vois qu'elle est appelée, mais pas pour tous les événements.

Maintenant, la question est : quels sont les événements pour lesquels removePointerListener n'est pas appelé ? Peut-être qu'il nous manque un appel de fonction ici ou là.

De plus, ces événements de "pointeur" devraient-ils même être attachés sur Windows 10 sans écran tactile et dans Chrome ?

Oui. Il est presque impossible de détecter si un système a un écran tactile, donc si le navigateur prend en charge les événements de pointeur, l' hypothèse est qu'ils seront utilisés.

je ne connais pas assez le fonctionnement interne des dépliants pour fournir une vraie solution :-(

Hé, ne désespérez pas, c'est un excellent travail d'enquête ! :le sourire:

Ce bogue n'est pas présent dans la version 1.0.3. J'ai récupéré @spydmobile jsfiddle et changé la version du dépliant et l'erreur disparaît http://jsfiddle.net/5hmadjnk/47/ . Avec la version 1.1.0, c'est déjà là.

@benru89 Ce bug était en fait présent dans la 1.0.3, sous la forme https://github.com/Leaflet/Leaflet/issues/5263 (principalement corrigé par https://github.com/Leaflet/Leaflet/pull/ 5265).

Le changement de 1.0.3 à 1.1.0 a également affecté le L.Mixin.Events désormais obsolète et la version rollupJS, donc je ne pense pas que cela puisse être correctement localisé, même pas avec git bisect .

@IvanSanchez J'ai comparé la fonction remove dans 1.0.3 et 1.1.0 et cela a été ajouté :

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

Si je supprime la 6ème ligne, celle qui supprime le mapPane, l'erreur disparaît. Je ne connais cependant pas l'impact de la suppression de cela, je suppose que le mapPane doit être supprimé, mais ce bogue a certainement été introduit lorsque cette ligne a été ajoutée.

@benru89 Wow, c'est aussi une bonne info :+1:

Je ne vois tout simplement pas quels sont les gestionnaires d'événements de pointeur dans les volets de la carte pour le moment, cependant :thinking:

Je pense qu'en ne supprimant pas le volet de la carte, vous ne faites que masquer le problème. Lorsque j'ai suivi la pile des appels, le problème était qu'un objet _mapPane pointait vers un élément dom détruit, essayant ainsi d'obtenir une position en cache à partir d'undefined. Si le volet n'est pas détruit, les événements fantômes peuvent se dérouler sans déclencher l'exception.

@Floibl Je suis d'accord avec vous, je pense que ce n'est pas la solution, mais j'ai remarqué le null _mapPane lors de la vérification de la pile d'appels, c'est pourquoi j'ai essayé de ne pas supprimer cette ligne. La solution doit consister à supprimer correctement les gestionnaires d'événements, je suppose.

Je pense que le gestionnaire d'événements à l'origine de cela (au moins dans mon cas et @spydmobile ) s'appelle "touchExtend", il s'agit donc d'un gestionnaire de feuillet.draw. J'ai découvert que la suppression de l'importation pour brochure.draw arrêtait également les exceptions.

J'ai trouvé une autre solution de contournement. L'initialisation de votre carte avec l'option non documentée touchExtend : false désactive le gestionnaire problématique, donc plus d'exceptions. Je ne sais pas vraiment quelles fonctionnalités je perds en faisant cela, mais en regardant le code, il pourrait s'agir de gestes étendus pour les écrans mobiles ou tactiles ?? En tout cas, dans mon application, tout semble bien fonctionner.

@IvanSanchez Je ne suis pas sûr que ce soit le même problème, mais cela pourrait être lié.
Lorsque vous détruisez la carte alors que l'animation de zoom est en cours, vous obtenez la même erreur : Uncaught TypeError: Cannot read property '_leaflet_pos' of undefined .

J'ai essayé de regarder à l'intérieur du code et j'ai découvert qu'à l'intérieur de Map._animateZoom() il y avait une ligne : setTimeout(Util.bind(this._onZoomTransitionEnd, this), 250);
Si je comprends bien, ce délai d'attente n'est pas détruit lorsque la carte est supprimée, donc la fonction Map._onZoomTransitionEnd est toujours appelée. Cela peut être votre _"manque un appel de fonction ici ou là"_.

Et l'arbre d'appels simplifié this._onZoomTransitionEnd -> this._move -> this._getNewPixelOrigin -> this._getMapPanePos -> getPosition(this._mapPane) -> return el._leaflet_pos échoue, car this._mapPane est _undefined_.

Peut-être que ce cas pourrait être corrigé, si vous enveloppez les appels this._move et this._moveEnd dans la condition if (this._mapPane) {} , mais je n'ai pas testé si cela a d'autres conséquences.

Remplacez ceci :

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

avec ça:

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

Des mises à jour à ce sujet ? Je rencontre le même problème. touchExtend : false n'aide pas. Le problème se produit lorsque je m'éloigne de la vue, où j'ai la carte (elle est détruite à ce stade en appelant map.remove()), puis je reviens à cette vue. Il devrait créer et initialiser la nouvelle carte, mais j'obtiens l'erreur '_leaflet_pos' à getPosition dans la méthode setMaxBounds :

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)

Et aussi dans la méthode 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)

Même problème après map.remove(), réinitialisez ma carte et obtenez cette erreur exacte

Même problème avec la v1.6.0. C'est un problème compliqué

Voici un SSCCE : https://jsfiddle.net/0oafw694/1/

Fondamentalement, en exécutant le code suivant…

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

… laisse deux écouteurs d'événement attachés :

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 }

Je suppose que zoomanim/_createAnimProxy est géré via unload/_destroyAnimProxy , et donc pas de problème. Mais le moveend/_panInsideMaxBounds doit être désenregistré. Je vais préparer un PR…

Je viens de créer un div pour la carte qui a un identifiant dynamique, donc quand je dois réutiliser le div, je supprime () la carte existante afin de libérer de la mémoire (même s'il y a encore des événements en cours), puis redessine le div avec un identifiant différent afin que je crée une nouvelle carte dedans.

Je stocke également toutes mes cartes dans un objet, je peux donc les manipuler en fonction de son identifiant (j'ai plusieurs cartes visibles parfois, toutes avec des identifiants dynamiques)

Selon mes expériences avec le dépliant, quels que soient les événements (ex. moveend, movestart, etc.) qui sont manipulés par les développeurs, changent leur comportement par défaut et restent en mémoire lors du déchargement du dépliant du dom.
J'avais fait ceci : @moveend="()=>{enableRecenter = true}" et ainsi, le gestionnaire de 'moveend' est resté en mémoire lors du déchargement/suppression de la carte.
J'ai supprimé les manipulations (mes propres implémentations) de ces méthodes du composant de carte lui-même et maintenant cette erreur a cessé de s'afficher.

Donc en gros, NE TOUCHEZ JAMAIS LES MÉTHODES DE LA CARTE !!! Bien sûr, à moins que la bibliothèque ne détecte ce comportement et corrige ce bogue.