为什么mapbox-gl调用setPaintProperty配置fill-color的stops时会生成额外颜色？

默认情况下mapbox-gl对数值型属性的stops配色默认使用*指数插值（exponential）*模式，会在两个相邻stop的颜色之间自动生成过渡色，因此会出现你配置之外的中间色。

方法1：使用新版step表达式（官方推荐） #

直接用mapbox-gl的阶梯表达式实现分级配色，完全避免插值：

map.current.setPaintProperty("county", "fill-color", [
  'step',
  ['get', options.property],
  '#afc5ff', // 属性值<19时的颜色
  19, '#afc5ff', // 19≤属性值<22时的颜色
  22, '#376eff', // 22≤属性值<28时的颜色
  28, '#1c3780' // 属性值≥28时的颜色
]);

方法2：保留stops写法，指定匹配类型为interval #

如果你不想修改现有stops结构，只需要在配色配置里新增type: 'interval'字段，即可关闭插值改为区间匹配：

map.current.setPaintProperty("county", "fill-color", {
  property: options.property,
  stops,
  type: 'interval' // 新增该行即可禁用颜色插值
});

内容的提问来源于stack exchange，提问作者Faizan Ul Haq