Question

因此，我有一个Mapbox图块集，上面已上传了美国的人口普查信息。 tileet中的每个几何都有一个名为GeoID的属性，我正在尝试根据我拥有的另一个集合将样式应用于该属性。

集合是具有以下格式的数组对象：[{geoid: string, weight: number}, {geoid: string, weight: number},...]

我想将数组中的GeoID与图块集中的图层进行匹配，并根据该对象的相应权重属性对其进行着色。权重是介于0和1之间的数字。我曾尝试从Mapbox搜索有关运行时样式和表达式的文档，但找不到关于从集合中推断数据并有条件地将其应用于tileet的正确几何形状的任何信息。

Answer 1

您可以从权重列表中生成一个表达式，然后将其传递给您要设置样式的图层：

const weights = [
    {geoid: 1, weight: 10},
    {geoid: 2, weight: 5},
    {geoid: 3, weight: 30},
];
const cases = weights.map(weight => {
    const condition = ['==', ['get', 'geoid'], weight.geoid];
    const output = getColor(weight.weight);

    return [
        condition,
        output
    ];
});
const expresion = ['case',
    ...cases.reduce((flat, conditionAndOutput) => [...flat, ...conditionAndOutput]),
    '<default-color>'
];

/*
Will result in:
    [
        "case",
        [
        "==",
        [
            "get",
            "geoid"
        ],
        1
        ],
        "rgb(255, 255, 255)",
        [
        "==",
        [
            "get",
            "geoid"
        ],
        2
        ],
        "rgb(255, 255, 255)",
        [
        "==",
        [
            "get",
            "geoid"
        ],
        3
        ],
        "rgb(255, 255, 255)",
        "<default-color>"
    ]
*/

集合中的Mapbox JS运行时样式

1 个答案: