为什么带有填充颜色和停止的 setPaintProperty 会向 mapbox-gl 中的图层添加额外的颜色？

Question

我正在尝试使用 mapbox-gl 构建美国各州的数据驱动等值线图，我面临的问题是，我的站点只有三种颜色，但我可以看到地图是用超过 3 种颜色制作的，我最好的猜测是图书馆自己插值颜色，如果是这样的话我怎么能阻止它这样做？

详情：

我从默认停靠点开始

[
    [-1, "#FFF"],
    [-1, "#AFA"],
    [-1, "#FAF"],
  ]

这些只是占位符值，数据到达后，我再次使用实际值构建停止

[
  [
      19,
      "#afc5ff"
  ],
  [
      22,
      "#376eff"
  ],
  [
      28,
      "#1c3780"
  ]
]

计算停靠点后，我将源添加到地图、添加图层并绘制图层

 map.current.addSource("counties", {
   type: "geojson",
   data,
 });
 map.current.addLayer({
   id: "county",
   type: "fill",
   source: "counties",
 });
 map.current.setPaintProperty("county", "fill-color", {
   property: options.property,
   stops,
 });

完成所有渲染后的地图包含不在我的站点中的颜色（在下图中用红色数字标记）。

Answer 1

在我就此打开的 github 问题的回复的帮助下解决了。

复制的回复：

你好@mfaizan1 你是对的，停止将在值之间进行插值。步骤表达式应该更适合您。此示例特别展示了如何将圆圈的颜色设置为三个选项之一。您的代码最终应该看起来像这样：

 map.current.setPaintProperty("county", "fill-color", [
    'step',
    ['get', 'someCountableProperty'],
    '#afc5ff', // any item where `someCountableProperty` is <= 19 will be displayed with this color
    19,
    '#376eff', // any item where `someCountableProperty` is <= 22 && > 19 will be displayed with this color
    22,
    '#1c3780' // any item where `someCountableProperty` is > 22 will be displayed with this color
]);

为什么带有填充颜色和停止的 setPaintProperty 会向 mapbox-gl 中的图层添加额外的颜色？

why does setPaintProperty with fill-color and stops add extra colors to layers in mapbox-gl?

javascript

mapbox

reactjs

mapbox-gl

mapbox-gl-js