集合中的 Mapbox JS 运行时样式答案

【问题标题】：Mapbox JS Runtime Styling from collection集合中的 Mapbox JS 运行时样式
【发布时间】：2019-01-16 04:28:24
【问题描述】：

所以我上传了一个 Mapbox Tileset，其中包含美国的人口普查区信息。瓦片集中的每个几何图形都有一个名为 GeoID 的属性，我正在尝试根据我拥有的另一个集合应用一种样式。

集合是一个数组对象，格式如下：[{geoid: string, weight: number}, {geoid: string, weight: number},...]

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

【问题讨论】：

标签： mapbox mapbox-gl-js mapbox-gl

【解决方案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>"
    ]
*/

【讨论】：