如何定期更新地图框要素坐标

Question

我正在使用 geojson 文件在地图上渲染大约 10 万个要素。当用户放大到某个级别时，我想定期从数据库中拉取数据以更新视口上的特征坐标。

setInterval(()=> {
    console.log(this.map.getZoom());
    if(this.map.getZoom() >= 12) {
      // Get viewport features
      const list = this.map.queryRenderedFeatures({ layers: ['datalayer'] });
      console.log(list);
      // list.forEach(fea => {
      //how to update the feature coordinates???

      .... 
      // })
    }
  }, 10000);

});

我做了一些研究，发现了 setFeatureState，但这只能更新属性值而不是坐标？

Answer 1

setFeatureState 可以更改属性，您可以将其用于悬停或更改属性。

queryRenderedFeatures 获取已经呈现的特征。 mapbox 首先将 geojson 转换为图块，然后显示地图，因此如果您使用 queryRenderedFeatures，它只会获得每个图块的渲染特征。所以你渲染了具有重复属性和唯一坐标的特征。

您可以使用 this.map.getSource('some id').serialize().data 获取所有数据并对特征进行循环，在对孔数据中的几何形状进行一些更改后，您可以使用 this.map.getSource('some id').setData(new_data)[=15 设置新数据=]

如何定期更新地图框要素坐标

How to update a mapbox feature coordinate periodically

mapbox

angular