如何在 MapboxGL 中有效地更新 GeoJson 多边形的填充？

Question

我正在构建一个应用程序，该应用程序将使用大型 GeoJSON 集（大约 3MB）渲染地图。该地图是一个等值线，不同的 GeoJSON 多边形根据它们“包含”的数据进行不同的着色。

我运行遇到的问题是我不确定如何将 GeoJSON（例如多边形数据）与实际数据分开。假设我们像这样设置数据（或按照 Mapbox 的建议，仅通过 URL 到数据源）：

const { data } = await axios.post(sourceUrl, settings);
map.current.addSource("states", {
  type: "geojson",
  data,
}

此地图中的基础数据需要随着用户交互而频繁更新。但是，现在 GeoJSON 包含多边形数据（坐标）和属性（数据本身）。

例如，用户可能会单击一个复选框，或输入一个搜索参数。这当前对我们的数据库进行了 GET，该数据库运行查询并 returns 新数据。我们可以 return 一个新的 GeoJSON 对象，其中添加了这些数据，然后调用 .getSource("source").setData(newData) 将所有新的 GeoJSON，但这会非常低效。多边形没有变化，只有它们包含的数据在变化。

我研究过数据驱动的样式，但这似乎也不是我需要的。我们的地图基础数据集太大，无法塞入单个 GeoJSON 层，我们无法通过网络传输数百 MB 以在客户端应用数据驱动的样式。

我们如何才能将 GeoJSON 多边形渲染到地图一次，然后根据不同数据集的更改方式更新它们的填充颜色？

Answer 1

简短的回答是，使用特征状态。 This tutorial 解释了所有细节。您可以使用相同的方法用数据更新数千个要素，而无需更新任何几何图形。

如何在 MapboxGL 中有效地更新 GeoJson 多边形的填充？

How can you efficiently update the fill of GeoJson polygons in MapboxGL?

javascript

data-visualization

mapbox

mapbox-gl-js