在mapbox中单击时删除/编辑特定的geojson点

问题描述

访问单击时的geojson点很容易，但是mapBox似乎不返回对clicked元素的引用，而是返回其副本。可能是因为添加源确实像我所相信的那样实现了JSON.stringify。

我想在单击元素时访问geojson特定功能，对其进行修改/删除/移动并重新呈现。

一种实现方法是将属性“ id”传递给要素，遍历要素，找到具有适当id的要素，对其进行修改并重新渲染，但是在处理大量点（例如100000点）时可能会非常慢他们。这也是为什么我不考虑使用新的Marker（）来创建DOM元素的原因，而这对于大量标记是一个过大的杀伤力。

另一种方法可能是制作一个映射geoid特征的地图，但我仍然想知道，是否存在一种简单而高效的geojson特征版本的本机mapBox方法。

const geoJson = { ... }

map.addSource('points',{
  type: 'geojson',data: geoJson
});

map.addLayer({
  'id': 'points','type': 'symbol','source': 'points','layout': {
    'icon-image': 'logger_green','icon-allow-overlap': true
  }
});

map.on('mousedown','points',function (e) {
  e.preventDefault();

  // feature here is a copy,not reference so updating geojson would require looping 
  // over geojson,finding clicked element by is passed in feature property,editing it and 
  // rerendering which may be slow for bigger geojson data
  console.log(e,e.features,e.features[0]); 
});

解决方法

因此，我推荐的是，您可以在此用例中使用高性能的JS库：

Rbush

如果您有大量的geojson点。您可以使用Rbush在bbox下对其进行排列/分类。以后，每当您单击geojson点时，只需抓住该点所在的bbox并相应地更新数据即可！