mapbox-gl-js - 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'
        }
      });

标签： mapbox-gl-js

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',
        },
      });

结果是