Arcade 驱动型可视化

字数统计: 844
阅读时长: 约 2 分钟
当前版本: 4.29

使用 UniqueValueRenderer 样式化美国各县以显示登记选民的主要政党归属

什么是 Arcade?

有时您需要渲染图层中不存在的属性。Arcade 是一种表达式语言,允许您在运行时计算图层中每个要素的值,并将这些值用作数据驱动型可视化的基础。当您需要在频繁更新的数据源或未拥有的图层上派生新数据值时,此方式很方便。

Arcade 的工作原理

Arcade 表达式在 ClassBreaksRendererUniqueValueRendererDotDensityRenderer 或任何视觉变量 (colorsizeopacityrotation) 的 valueExpression 属性中作为字符串引用。定义后,始终使用它而不是引用 field/normalizationField

在 ClassBreaksRenderer、DotDensityRenderer 或任何视觉变量中使用时,值表达式必须计算为数字。表达式可以计算为 UniqueValueRenderer 中的字符串或数字。

示例

UniqueValueRenderer 众数渲染

在此示例中,Arcade 用于创建众数渲染地图,以显示美国各郡县最常见的政党关系。底部图层具有三个字段,用于标识各郡县的共和党、民主党和独立/非党派选民的数量。由于服务不包含指示独大型政党的字段,因此可编写一个 Arcade 表达式来标识每个要素。

在 UniqueValueRenderer 的 valueExpression 属性中引用了 Arcade 表达式。 Arcade 表达式众数渲染

js
    const renderer = {
        type: "unique-value",
        valueExpression: `
        // store field values in variables with
        // meaningful names. Each is the total count
        // of votes for the respective party

        var republican = $feature.MP06025a_B;
        var democrat = $feature.MP06024a_B;
        var independent = $feature.MP06026a_B;
        var parties = [republican, democrat, independent];

        // Match the maximum value with the label
        // of the respective field and return it for
        // use in a UniqueValueRenderer

        return Decode( Max(parties),
        republican, 'republican',
        democrat, 'democrat',
        independent, 'independent',
        'n/a' );
        `,

然后为渲染器中的每个预期返回值分配唯一的符号。 唯一值信息

js
    uniqueValueInfos: [{
        value: "democrat",
        symbol: createSymbol("#00c3ff"),
        label: "Democrat"
    },
    {
        value: "republican",
        symbol: createSymbol("#ff002e"),
        label: "Republican"
    },
    {
        value: "independent",
        symbol: createSymbol("#faff00"),
        label: "Independent/other party"
    }]

Arcade 驱动型不透明度

Arcade 可在渲染器中引用数据值的任何地方使用,包括视觉变量。以下代码段引用了不透明度视觉变量中的 Arcade 表达式,以计算各郡县中独大型政党的选民百分比。不透明度停止点可将预期数据值映射到不透明度值。

不透明郡县表示该地区的选民绝大多数为独大型政党选民。透明郡县表示该地区每个政党的个人组合更加多样化。

js
    renderer.visualVariables = [{
        type: "opacity",
        valueExpression: `
            var republican = $feature.MP06025a_B;
            var democrat = $feature.MP06024a_B;
            var independent = $feature.MP06026a_B;
            var parties = [republican, democrat, independent];
            var total = Sum(parties);
            var max = Max(parties);

            return (max / total) \* 100;
            `,
        valueExpressionTitle: "Share of registered voters comprising the dominant party",
        stops: [
            { value: 33, opacity: 0.05, label: "< 33%" },
            { value: 44, opacity: 1.0, label: "> 44%" }
        ]
    }];