Javascript 传单js-内存泄漏访问GeoJSON REST Api

对于传单，我需要刷新地图移动（平移、缩放）后显示的特征

我访问GeoJSON REST Api，因此：

function getFeatures( map, layer, table, user ) {
  var bounds = map.getBounds();
  var style = layer.module.spatial.style || undefined;

  var params = {
    geojson: true,
    bbox: bounds.toBBoxString(),
    srs: 'EPSG:4326',
    limit: 200 // limit returned features
  }; 

  fetch ('api/organisations/' + user.organisation + '/objects/' + table + '?' 
    + new URLSearchParams (params))
  .then( response => response.json())
  .then( data => {
    layer.addData (data)
  })
  .catch( err => {
    console.log("Fetch error on table " + table + ': ' + err);
  });
}

export default function(options, map, L, user) {
  var layer = L.geoJson(null, { /*... styling, popup ...*/ });

  map.on('moveend', function(evt) {
    var map = evt.target;
    getFeatures(map, layer, options._id, user );
  });
}

/*
 * ... in calling script:
 */
map.addLayer(layer);

所有这些都可以正常工作，但内存使用率（用ChromeDevTools衡量）稳步上升，性能变差

我想象我需要释放一些东西，大概是在我的“moveend”处理程序中，但无法找到任何建议我应该做什么的示例

我试过

map.removeLayer（layer）

和

map.addLayer（layer）

在

layer.addData（data）

的任一侧，这没有什么区别

---

怎么办？

查看传单.js文档，图层似乎有一个。但是为了调用它，您可能需要获取对geojson层对象的引用。那么，也许是下面这样的事情

函数getFeatures（地图、图层、表格、用户）{ var bounds=map.getBounds（）； var style=layer.module.spatial.style | |未定义； 变量参数={ geojson：是的， bbox:bounds.toBBoxString（）， srs:‘EPSG:4326’， 限制：200//限制返回的功能 }; fetch（'api/organizations/'+user.organization+'/objects/'+table+'？' +新URLSearchParams（参数）） .then（response=>response.json（）） 。然后（数据=>{ layer.addData（数据） }) .catch（错误=>{ log（“在表“+表+”：“+错误上获取错误”）； }); } 让layer//不要热衷于使用var，但我相信如果你坚持的话，你可以在这里使用var 导出默认功能（选项、地图、L、用户）{ 如果（！！层）{ layer.remove（） } layer=L.geoJson（null，{/*..styleing，popup…*/}）； map.on（'moveend'，函数（evt）{ var map=evt.target； getFeatures（地图、图层、选项。\u id、用户）； }); } /* * ... 在调用脚本中： */ map.addLayer（层）；

---

您可能需要执行一些去抖动操作，因为

getFeatures

etc是一个异步调用，您可能会遇到一些竞争条件的恶作剧。

感谢@pandamakes answer，以下是我的代码的结局：

let layer;

function getFeatures( map, L, options, user ) { // Called on every map pan/zoom
  var table = options._id;
  if (!! layer) {
    layer.remove();
  }

  if(options.spatial.geometry == 'polygon') {
    layer = L.geoJson(null, {
      style: function (feature) {
        return feature.style || undefined;
      },
      onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.plats_namn); 
      }
    });
  } else {
    layer = L.geoJson(null, {
      pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, feature.style || undefined);
      },
      onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.art);
      }
    });
  }

  /* 
   * Set the module on the source for filtering 
   */
  layer.module = options;
  layer.name = name;

    var bounds = map.getBounds();
    var style = layer.module.spatial.style || undefined;

    var params = {
      geojson: true,
      bbox: bounds.toBBoxString(),
      srs: 'EPSG:4326'
      style: style,
      limit: 200
    }; 

    fetch ('api/organisations/' + user.organisation + '/objects/' + table + '?' 
      + new URLSearchParams (params))
    .then( response => response.json())
    .then( data => {
      layer.addData (data)
      map.addLayer(layer)
    })
    .catch( err => {
console.log("Fetch error on table " + table + ': ' + err);
    });
}

export default function(options, map, L, user) {
  map.on('moveend', function(evt) {
    var map = evt.target;
    getFeatures(map, L, options, user );
  });
}

不满意，但内存泄漏消失了

最好在每次平移/缩放时仅删除图层上的现有特征；我将研究这样做的可能性。

是的，这解决了“泄漏”问题（尽管暴露了许多其他问题…）。我将发布我最终得到的代码版本，但我来自OpenLayers，在那里我创建了一次我的层（并将其添加到层选择器中的层列表中），然后在用户导航时添加和删除功能。这种在每次地图缩放或平移时破坏和重建图层的技术似乎有些过分了。。。