修改Mapbox文字颜色失败，添加图层报circle-radius未知属性错误

错误产生原因 #

• Mapbox GL JS的图层属性和图层类型严格绑定：你当前声明的图层type为symbol，这类图层仅支持文字、图标相关的样式属性，所有circle-开头的属性都是circle类型图层的专属配置，不能在symbol图层的paint字段中声明，因此触发属性校验失败的报错。

解决方法 #

方案1：同时保留圆点+文字标注（推荐） #

你需要拆分创建两个独立图层，共用同一个数据源即可，示例代码如下：

// 先添加circle图层绘制圆点
map.addLayer({
    id: 'points-circle',
    type: 'circle',
    source: 'point',
    paint: {
        'circle-color': '#4264fb',
        'circle-radius': 6,
        'circle-stroke-width': 2,
        'circle-stroke-color': '#ffffff'
    }
});
// 再添加symbol图层放置文字标注（上层图层不会被圆点遮挡）
map.addLayer({
    id: 'points-label',
    type: 'symbol',
    source: 'point',
    layout: {
        'text-field': '{hospitalName}',
        'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
        'text-offset': [0, 1],
        'text-anchor': 'top'
    },
    paint: {
        'text-color': '#ffffff'
    }
});

方案2：仅保留文字标注 #

如果不需要展示圆点标记，直接删除原有symbol图层paint字段中所有circle-开头的属性即可，修改后代码如下：

map.addLayer({
    id: 'points',
    type: 'symbol',
    source: 'point',
    layout: {
        'text-field': '{hospitalName}',
        'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
        'text-offset': [0, 1],
        'text-anchor': 'top'
    },
    paint: {
        'text-color': '#ffffff'
    }
});

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