Mapbox GL JS：如何在圆点内画出水平分隔线？

Question

我试图在使用Mapbox GL JS渲染的群集点内显示两个用水平分隔符分隔的值。

例子（使用小册子）。

到目前为止，我已经实现了这样的点。 但我缺少中间的1px条。

你会怎么做呢？

我正在使用的代码。

      this.map.addLayer({
        id: 'clusters',
        type: 'circle',
        source: 'markers',
        filter: ['has', 'point_count'],
        paint: {
          'circle-color': '#ffffff',
          'circle-radius': 20,
          'circle-stroke-width': 3,
          'circle-stroke-color': '#5eb3e4',
        }
      });
      this.map.addLayer({
        id: 'cluster-count',
        type: 'symbol',
        source: 'markers',
        filter: ['has', 'point_count'],
        layout: {
          'text-field': '{point_count}\n{sum}',
          'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
          'text-size': 12,
        },
        paint: {
          'text-color': '#00214e'
        }
      });

Answer 1

因此，我已经设法使用一个生成的图像，作为一个图标添加到层中。

const createLineImage = (width) => {
  const bytesPerPixel = 4; // Each pixel is 4 bytes: red, green, blue, and alpha.
  const data = new Uint8Array(width * bytesPerPixel);

  for (let x = 0; x < width; x++) {
    const offset = x * bytesPerPixel;
    data[offset] = 0; // red
    data[offset + 1] = 0; // green
    data[offset + 2] = 0; // blue
    data[offset + 3] = 255; // alpha
  }
  return { data, width, height: 1 };
};

      this.map.addImage('line', createLineImage(25));

      this.map.addLayer({
        id: 'cluster-count',
        type: 'symbol',
        source: 'markers',
        filter: ['has', 'point_count'],
        layout: {
          'text-field': '{point_count}\n{sum}',
          'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
          'text-size': 12,
          'text-line-height': 1.5,
          'icon-image': 'line',
        },
      });

结果是