Javascript 使用圆以外的其他形状设置贴图框点的样式

目前，我有一个地图盒图层，其中有许多点是使用

圆圈显示的。有没有办法使用其他形状来定义层而不是圆

以下是我所拥有的：

export const gaugeLayer = fromJS({
  id: 'gauges',
  source: 'gauges',
  type: 'circle',
  interactive: true,
  minzoom: 5,
  layout: {
    visibility: 'visible',
  },
  paint: {
    'circle-radius': {
      base: 3,
      stops: [[5, 3.5], [7, 4]],
    },
    'circle-stroke-color': '#fafafa',
    'circle-stroke-width': 1,
    'circle-color': {
      property: 'classId',
      stops: [
        [1, '#f9a825'], //yellow #f9a825
        [2, '#0D47A1'], //blue #1a237e
        [3, '#03a9f4'], //light blue
        [4, '#ff6f00'], //orange Winter storm
        [5, '#F44336'],
        [6, '#087f23'], //green
        [7, '#f06292'], //pink
        [8, '#7E57C2'],
        [9, '#C51162'],
      ],
    },
  },
});

我可以用钻石吗？或者使用不同形状的首选方法是什么？
没有简单的方法可以做到这一点，但我已经找到了使用
symbol
来实现这一点的方法。但你需要先把SVG上传到地图上。加载后，如果文件为
svg
，则无法更改其颜色。有很多圈要跳过

{
    id: source,
    source: source,
    type: 'symbol',
    interactive: true,
    layout: {
      'icon-image': {
        property: 'geoClassId',
        stops: [
          [1, `${source}-1`],
          [2, `${source}-2`],
          [3, `${source}-3`],
          [4, `${source}-4`],
          [5, `${source}-5`],
          [6, `${source}-6`],
        ],
      },
      'icon-allow-overlap': true,
      'symbol-avoid-edges': true,
      'text-field': {
        property: 'geoClassId',
        stops: [
          [1, `${source}-1`],
          [2, `${source}-2`],
          [3, `${source}-3`],
          [4, `${source}-4`],
          [5, `${source}-5`],
          [6, `${source}-6`],
        ],
      },
      'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
      'text-size': 8,
      'text-transform': 'uppercase',
      'text-letter-spacing': 0.05,
      'text-offset': [0, 1.3],
    },
    paint: {
      'text-color': '#ffffff',
    },
  }