Mapbox GL JS中如何通过表达式切换填充色依赖的JSON属性？

问题描述 #

我有一个基于GeoJSON数据源的分级统计图（chloropleth map），数据集包含各国两个不同年份的数据，填充色基于JSON中的某一属性。当前可正常运行的addLayer代码如下：

map.addLayer({
    id: 'emissions',
    type: 'fill',
    source: {
        type: 'geojson',
        data: './data.json'
    },
    paint: {
        'fill-color': {
            property: 'total_2014',
            type: 'exponential',
            base: 0.99999,
            stops: [
                [3, "hsl(114, 66%, 53%)"],
                [2806634, "hsl(0, 64%, 51%)"]
            ]
        },
        'fill-opacity': 1
    }
});

我希望以编程方式切换填充色依赖的JSON属性，尝试用表达式实现时报错：layers.emissions.paint.fill-color.property: string expected, array found，报错代码片段：

...
paint: {
    'fill-color': {
        property: ['get', propName], // propName var is e.g. 'total_2014'
        type: 'exponential',
        base: 0.99999,
        stops: [
            [3, "hsl(114, 66%, 53%)"],
            [2806634, "hsl(0, 64%, 51%)"]
        ]
    },
    'fill-opacity': 1
}
...

刚接触Mapbox GL JS，求实现该需求的方法。

解决方案 #

你不能在property字段里使用表达式数组，因为该字段仅接受字符串类型的属性名。以下两种方法可实现动态切换属性的需求：

方法1：使用setPaintProperty动态更新 #

图层添加完成后，直接调用map.setPaintProperty修改fill-color配置的property值即可。示例代码如下：

// 定义切换函数
function switchYearProperty(yearProp) {
    map.setPaintProperty('emissions', 'fill-color', {
        property: yearProp,
        type: 'exponential',
        base: 0.99999,
        stops: [
            [3, "hsl(114, 66%, 53%)"],
            [2806634, "hsl(0, 64%, 51%)"]
        ]
    });
}

// 调用示例：切换到2015年数据
switchYearProperty('total_2015');

方法2：使用数据驱动表达式重构fill-color #

通过Mapbox的表达式系统，将整个fill-color逻辑写成表达式形式，利用变量存储当前激活的属性名，实现灵活切换：

// 初始化图层时使用表达式配置
map.addLayer({
    id: 'emissions',
    type: 'fill',
    source: {
        type: 'geojson',
        data: './data.json'
    },
    paint: {
        'fill-color': [
            'interpolate',
            ['exponential', 0.99999],
            ['get', ['var', 'activeProp']],
            3, "hsl(114, 66%, 53%)",
            2806634, "hsl(0, 64%, 51%)"
        ],
        'fill-opacity': 1
    }
});

// 设置初始属性
map.setPaintProperty('emissions', 'fill-color', ['var', 'activeProp'], 'total_2014');

// 切换属性的函数
function switchYearProperty(yearProp) {
    map.setPaintProperty('emissions', 'fill-color', ['var', 'activeProp'], yearProp);
}

这种方法无需重复编写完整的插值配置，仅需更新变量值即可完成切换。若两个年份的数据值域差异较大，需调整stops中的数值范围，确保颜色映射的合理性。

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