Next.js+React中MapboxDraw多边形默认颜色修改失效问题

只需要修改绘制中多边形的颜色，无需全量替换MapboxDraw的style数组——全量替换容易因为层ID、过滤器规则和内置样式不匹配导致失效，只覆盖需要的样式层更稳妥。

修改后的配置代码 #

mapDraw.current = new MapboxDraw({
    displayControlsDefault: false,
    controls: {
        polygon: true,
        trash: true,
    },
    defaultMode: 'none',
    style: [
        // 绘制中多边形的填充样式
        {
            "id": "gl-draw-polygon-fill",
            "type": "fill",
            "filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
            "paint": {
                "fill-color": "#D20C0C",
                "fill-outline-color": "#D20C0C",
                "fill-opacity": 0.1
            }
        },
        // 绘制中多边形的轮廓线
        {
            "id": "gl-draw-polygon-stroke-active",
            "type": "line",
            "filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
            "layout": {
                "line-cap": "round",
                "line-join": "round"
            },
            "paint": {
                "line-color": "#D20C0C",
                "line-dasharray": [0.2, 2],
                "line-width": 2
            }
        },
        // 未闭合时的临时边线
        {
            "id": "gl-draw-line",
            "type": "line",
            "filter": ["all", ["==", "$type", "LineString"], ["!=", "mode", "static"]],
            "layout": {
                "line-cap": "round",
                "line-join": "round"
            },
            "paint": {
                "line-color": "#D20C0C",
                "line-dasharray": [0.2, 2],
                "line-width": 2
            }
        },
        // 可选：绘制中顶点的颜色
        {
            "id": "gl-draw-polygon-and-line-vertex-active",
            "type": "circle",
            "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
            "paint": {
                "circle-radius": 3,
                "circle-color": "#D20C0C"
            }
        }
    ]
})

关键注意点 #

• 样式层的id必须和MapboxDraw内置ID完全一致，ID不匹配会导致样式无效果
• 过滤器["!=", "mode", "static"]确保样式只作用于正在绘制的图形，已完成的静态图形保持默认样式
• Next.js环境下，要确保在Mapbox地图实例完全加载后再初始化MapboxDraw（可在useEffect中监听地图加载状态）

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