1

次のリーフレット ディレクティブを使用すると、Angular アプリで明らかなメモリ リークが発生します: https://github.com/tombatossals/angular-leaflet-directive。

ディレクティブは問題なく動作しますが、ディレクティブを使用してビューを離れたり戻ったりすると、メモリ フットプリントが増加し続けることに注意してください。

ディレクティブは、 https ://github.com/Leaflet/Leaflet にあるリーフレット JavaScript ライブラリから構築されます。

私は次のようにディレクティブを使用します。

<div ng-controller="Explore">
    <div leaflet defaults="defaults" center="center" markers="markers" layers="layers"></div>
</div>

コントローラー内で、leaflet ディレクティブ属性をスコープに拡張します。

    angular.extend($scope, {
    defaults: {
        dragging: true,
        doubleClickZoom: false,
        scrollWheelZoom: false,
        maxZoom: 12,
        minZoom: 12
    },
    center: {
        lat: $scope.cities[$scope.market.city][1],
        lng: $scope.cities[$scope.market.city][0],
        zoom: 12
    },
    markers: {},
    layers: {
        baselayers: {
            google: {
                name: 'Google Streets',
                layerType: 'ROADMAP',
                type: 'google'
            }
        }
    }
});

メモリ リークの原因はわかりませんが、リーフレット ディレクティブ内で $destroy が呼び出されたときに削除されないイベント リスナーに関係している可能性があると考えられます。

scope.$on('$destroy', function () {
    leafletData.unresolveMap(attrs.id);
});

破棄すると、関数 unresolveMap が呼び出されます。

this.unresolveMap = function (scopeId) {
    var id = leafletHelpers.obtainEffectiveMapId(maps, scopeId);
    maps[id] = undefined;
};

これは私が得た限りです。誰かが似たようなものに出くわしたり、この問題をさらに攻撃する方法についてアイデアを持っている場合は、大いに感謝します:)

4

2 に答える 2

0

on $destroy ハンドラーに map.remove() を追加して、マップを完全に削除するようにしてください (リーフレット API からは、「マップを破棄し、関連するすべてのイベント リスナーをクリアする」必要があります)。

scope.$on('$destroy', function () {
        leafletData.unresolveMap(attrs.id);
        map.remove();
      });
于 2014-05-22T12:39:55.773 に答える
0

idマップに属性を割り当ててみましたか? とはそういうattrs.idことです。

<leaflet id="myMap" defaults="defaults" center="center" markers="markers" layers="layers"></leaflet>
于 2014-08-08T00:19:31.463 に答える