OpenLayers 6.1.1 矢量层内存泄漏答案

【问题标题】：OpenLayers 6.1.1 Vector Layer Memory LeakOpenLayers 6.1.1 矢量层内存泄漏
【发布时间】：2020-04-12 18:03:34
【问题描述】：

我目前在我的 Web 应用程序中遇到问题，当从 Web 应用程序中的地图视图切换时，矢量图层会保留在内存中。

我的地图上目前有 20 个矢量图层，每次我离开并返回页面时，它都会保留这 20 个图层并添加一组新图层。

这似乎与https://github.com/openlayers/openlayers/issues/9556 中提出的问题类似。

这是我销毁图层的代码。有人在 OpenLayers 测试版 6 版中遇到过这个问题吗？

    const layers = this.map.getLayers();
    while (layers.getLength() > 0) {
       const layer = layers.item(0);
       if (layer.get('layerSourceType') === 'VECTOR') {
          layer.getSource().clear();
       }
          layer.getRenderer().dispose();
          layer.setSource(null);
          this.map.removeLayer(layer);
    }
    this.map.setTarget(null);
    this.map = null;

【问题讨论】：

每次我离开并返回页面究竟是什么意思？您是关闭浏览器/相应的选项卡还是在您的应用中导航？
在应用内导航
好的。您在哪里将图层添加到地图中，例如ngOnInit?

标签： javascript memory-leaks openlayers

【解决方案1】：

我目前也在处理同样的问题，在 6.1.1 中也是如此。

使用 Chrome 的内存时间线分析器，我可以看到，在我的例子中，VectorTileSource 通过 listeners 数组保留对 VectorTileLayers 的引用。

您可能知道，VectorTileSource 类从 Source、Object、Observable，最后是 EventTarget（监听器所在的位置）扩展。所以每个 VectorTileSource 都是一个 EventTarget，其方法类似于 on(evt, listener)。

当on 被调用时，监听函数存储在EventTarget 实例本身上，以便在事件发生时实例调用它。由于它包含对侦听器函数的引用，因此保留了侦听器函数。并且该函数保留了它的闭包范围，它可以保持层内部，并通过扩展来保持许多其他的东西。

看起来每个 VectorTileLayer 都会向其 Source 添加一个事件侦听器，并在源更改时取消注册。但是，如果它永远不会更改，则永远不会取消注册事件侦听器。它保持在 Source 上注册。

所以看起来layer.setSource(null) 是正确的解决方法。这会从源中移除层的事件侦听器。

【讨论】：

这可能不是一个完整的修复。这对我的情况有所帮助，但记忆仍然被其他东西保留。

【解决方案2】：

如果没有完整的代码或小提琴来说明，这将很难给出准确的响应。但是，我得到了你的代码，并且可以保证它会删除所有层。

有几种方法可以做到这一点，你的方法就是其中一种。你也可以像这样得到一个特定的层：

var layerToRemove = this.map.getLayers().getArray()[0] // or any other layer index
this.map.removeLayer(layerToRemove)

但它对您的代码执行相同的操作。您还可以将这些层存储在变量中并管理它们，这也是同样的，例如：

var layerToRemove = new TileLayer({ source: new TileSource() })
this.map.removeLayer(layerToRemove)
layerToRemove = null

但对我来说，问题似乎不在于图层移除本身，而在于您创建它们的方式或移除它们的位置。下次尝试提供更完整的示例。

干杯。

【讨论】：