为什么 setPaintProperty 与填充颜色和停止为 mapbox-gl 中的图层添加额外的颜色？答案

【问题标题】：why does setPaintProperty with fill-color and stops add extra colors to layers in mapbox-gl?为什么 setPaintProperty 与填充颜色和停止为 mapbox-gl 中的图层添加额外的颜色？
【发布时间】：2021-10-21 20:07:27
【问题描述】：

我正在尝试使用 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,
 });

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

【问题讨论】：

标签： javascript reactjs mapbox mapbox-gl-js mapbox-gl

【解决方案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
]);

【讨论】：