Question

我正在尝试创建彩色的英国区域地图-我需要颜色由本地数据驱动（例如按邮政编码销售），颜色将始终根据用户选择（例如报告日期范围等）而变化。我要分配给图层的tileet来源，如下所示（敏感值被清空）：

         this.map.addLayer({
            "id": "uk-pc-data",
            "type": "fill",
            "source-layer": "***",
            "source": {
                type: 'vector',
                url: '***'
            }
        });

然后，我可以通过对tileset功能上的name属性进行寻址来设置tileset中的邮政编码区域的样式，例如：

           "paint": {
                "fill-color": [
                    "match",
                    ["get", "name", [{name: "PR"}, {name: "CH"}, {name: "LN"}]],
                    [
                        "PR",
                        "DD",
                        "AL",
                        "PO"
                    ],
                    "hsla(344, 84%, 29%, 0.37)",
                    "hsla(131, 94%, 34%, 0)"
                ]
            }

以上将为匹配区域分配一种颜色，为所有其他区域分配默认颜色（非匹配颜色）；我想做的是根据特征名称在本地计算颜色值（因此基于不断变化的数据），

            "paint": {
                "fill-color": function (feature = {}) {
                    return localSalesByArea(feature.name)
                }
            }

这似乎是不可能的：任何帮助或指针都值得赞赏；我已经浏览了Mapbox中的示例例如choroplet，heatmap，表达式，但这些似乎依赖于通过数据集本身传递的值（即“人口”），在我的情况下，确定色阶的值是分开的（它们来自内部报告api）

Answer 1

如果在图块集中不存在用于确定颜色的数据，则基本上必须按名称进行巨大的查找。

您将拥有一个生成fill-color表达式的函数，类似于：

function makeFillExpression(valuesByName) {
    function valueToColor(value) {
        return /* insert your choroplething special sauce here */;
    }
    return ret = [
        "match",
        ["get", "name"],
        Object.keys(valuesByName).map(name => valueToColor(valuesByName[name])),
        'black'
    ];
}

是的，这将是一个非常大而笨拙的表情。

Mapbox JS-Tileset颜色分配

1 个答案: