如何修改Mapbox GL JS绘制多边形的默认颜色？

要调整Mapbox GL Draw绘制的多边形颜色，你可以通过自定义样式对象覆盖默认配置，在初始化Draw控件时传入style参数，针对多边形的不同状态（已完成、绘制中）设置颜色：

核心实现代码 #

// 初始化Draw控件时传入自定义样式
map.addControl(new MapboxDraw({
  style: [
    // 已完成的多边形填充样式
    {
      id: 'gl-draw-polygon-fill',
      type: 'fill',
      filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
      paint: {
        'fill-color': '#ff5733', // 替换为你需要的填充颜色（十六进制/RGB/颜色名）
        'fill-opacity': 0.6
      }
    },
    // 已完成的多边形描边样式
    {
      id: 'gl-draw-polygon-stroke',
      type: 'line',
      filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
      layout: {
        'line-cap': 'round',
        'line-join': 'round'
      },
      paint: {
        'line-color': '#c70039', // 自定义描边颜色
        'line-width': 2
      }
    },
    // 绘制中的多边形填充样式（可选）
    {
      id: 'gl-draw-polygon-fill-active',
      type: 'fill',
      filter: ['all', ['==', '$type', 'Polygon'], ['==', 'mode', 'static']],
      paint: {
        'fill-color': '#ffc300',
        'fill-opacity': 0.5
      }
    },
    // 绘制中的多边形描边样式（可选）
    {
      id: 'gl-draw-polygon-stroke-active',
      type: 'line',
      filter: ['all', ['==', '$type', 'Polygon'], ['==', 'mode', 'static']],
      layout: {
        'line-cap': 'round',
        'line-join': 'round'
      },
      paint: {
        'line-color': '#ff5733',
        'line-width': 2
      }
    }
  ]
}));

关键说明 #

• 每个样式对象的id对应Mapbox GL Draw的默认图层ID，必须匹配才能覆盖默认样式
• 修改paint字段下的fill-color即可改变多边形填充色，line-color对应描边颜色
• 如果只需要调整已完成的多边形样式，只保留前两个样式对象即可，无需包含绘制中的状态配置
• 颜色值支持十六进制（如#ff0000）、RGB（如rgb(255,0,0)）或标准颜色名称（如red）

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