Mapbox - 在会话中更新数据驱动的样式

Question

在 Mapbox 的网站上有几个关于数据驱动样式的tutorials，但没有一个解决如何在会话中更新现有的数据驱动样式（在 Mapbox Studio 中创建）。例如，假设我想创建一个按地区着色的美国各州等值线。然后用户选择“人口颜色”，状态的颜色会相应更新。

我发现了一些resources 可以通过添加所有州的geojson 然后执行map.addLayer 来实现这一点，但是我正在使用的geojson（人口普查区域）太大而无法添加到前端，所以我需要更改现有层的数据驱动样式（或找到类似的解决方法）。数据必须是来自 mapbox studio 的持久化瓦片集，用户根据 geojson 属性更新数据着色。

任何想法或示例将不胜感激。

Answer 1

在运行时更新数据驱动的样式非常简单。您只需拨打map.setPaintProperty。

我通常使用一个生成属性值的函数来实现这一点。像这样的：

function fillColorByPopulation(min, max) {
    return {
        property: 'pop',
        stops: [
            [min, 'red'],
            [max, 'blue']
        ],
        type: 'exponential'
    }
}
function updateStyle(prop) {
    if (prop === 'population') {
        map.setPaintStyle('regions', 'fill-color', fillColorByPopulation(data.minpopulation, data.maxpopulation));
    } else {
        map.setPaintStyle('regions', 'fill-color', 'transparent');
    }
}

我通常不会在 Mapbox Studio 中创建任何数据驱动的样式。用 Javascript 创建它们更简单。