Mapbox如何创建带圆角的矩形非聚合点（unclustered-point）图层？

Mapbox原生没有直接的圆角矩形图层类型，但可以通过symbol图层配合自定义SVG图标实现需求，这样既能控制矩形的宽高比例（替代不同的XY内边距），也能设置圆角半径。

实现步骤及代码 #

1. 定义圆角矩形SVG并注册为地图图标
2. 替换原circle图层为使用该图标的symbol图层
3. 调整文字图层布局确保居中显示

// 1. 定义自定义圆角矩形SVG，可按需修改宽高、圆角、填充色
const roundedRectSVG = `
<svg width="40" height="24" viewBox="0 0 40 24" xmlns="http://www.w3.org/2000/svg">
  <rect width="40" height="24" rx="6" ry="6" fill="#486fd1"/>
</svg>
`;

// 将SVG注册为地图可用的图标，pixelRatio设为2保证高清显示
map.addImage('rounded-rect', roundedRectSVG, { pixelRatio: 2 });

// 2. 替换原circle图层为带圆角矩形图标的symbol图层
map.addLayer({
    id: 'unclustered-point',
    type: 'symbol',
    source: 'places',
    filter: ['!', ['has', 'point_count']],
    layout: {
        'icon-image': 'rounded-rect',
        'icon-size': 1, // 可根据需要调整整体大小
        'icon-allow-overlap': true,
    }
});

// 3. 调整文字图层布局，确保文字居中在矩形上方
map.addLayer({
    id: 'unclustered-point-count',
    type: 'symbol',
    source: 'places',
    filter: ['!', ['has', 'point_count']],
    layout: {
        'text-field': ['get', 'price'],
        'text-font': ['DIN Offc Pro Bold'],
        'text-size': 11,
        'text-anchor': 'center', // 文字居中对齐图标
        'text-offset': [0, 0], // 微调偏移量保证文字在矩形中间
        'text-allow-overlap': true,
    },
    paint: {
        'text-color': "#fff",
    }
});

关键说明 #

• 自定义SVG：通过修改SVG中的width/height可以设置矩形的宽高比例（实现XY方向不同的"内边距"效果），rx/ry控制圆角半径，fill调整填充色。
• 图标注册：使用map.addImage将SVG字符串转为地图可识别的图标资源，pixelRatio:2适配高分辨率屏幕。
• 文字对齐：通过text-anchor: center让文字居中于图标，若位置有偏差可调整text-offset的数值（比如[0, 0.1]向上微调）。

内容的提问来源于stack exchange，提问作者rediz