如何使用 mapbox gl js 通过当前缩放级别更改 map 颜色？

Question

我的问题是关于 mapbox gl js。

如何通过当前缩放级别更改 map fill-color ？

此 map 的fill-color具有按国家/地区划分的人口增长率，从最小值到最大值渐变。 但是，如果缩放位置具有相似的数据，则fill-color差异变得难以理解。 所以，我想根据缩放级别参考平铺信息，获取屏幕上的国家，然后重新绘制。

我搜索了很多，但我无法弄清楚如何获取屏幕上的信息。 如果您有任何信息，请告诉我。

缩放级别：1

缩放级别：3

谢谢！

Answer 1

您的问题最初是问：

如何使用 mapbox gl js 通过当前缩放级别更改 map 颜色？

为此，您可以使用像'fill-color': ['interpolate', ['linear'], ['zoom'], ...]

但是你想要的是非常不同的东西：

但是，如果缩放位置具有相似的数据，则填充颜色差异变得难以理解。 所以，我想根据缩放级别参考平铺信息，获取屏幕上的国家，然后重新绘制。

听起来您想要的是上下文相关的颜色缩放。 也就是说，不是固定比例的 colors，深绿色总是表示 X，浅绿色表示 Y，而是暗是当前视口中的最低值，而浅是视口中的最高值。

这与缩放无关。

您需要的步骤是：

1. 检测视口何时发生变化： map.on("moveend", ...)
2. 查找视口中存在的值： map.queryRenderedFeatures(...)
3. 根据这些值计算新表达式。
4. 设置新表达式： map.setPaintProperty(...)