如何基于属性条件动态设置ArcGIS JS API 4.x FeatureLayer标注字体大小

问题背景 #

尝试通过条件判断为FeatureLayer的标签设置动态字体大小，硬编码数值（如size: 12）可正常生效，但使用IIf表达式的写法无效。

相关代码示例：

要素图层初始化 #

const myLayer = new FeatureLayer({
    title: "My Layer",
    objectIdField: "ObjectID",
    geometryType: "point",
    source: myFeatures,
    showLabels: true,
    labelingInfo: myLabelingInfo,
    outFields : ['*']
});

无效的labelingInfo配置 #

var myLabelingInfo = [
    {
        symbol: {
            type: "text",
            color: "white",
            font: {
                family: "Arial",
                size: "IIf($feature.customer.length == 1, 12, 8);", // 此处表达式不生效
                weight: "bold",
                decoration: "none"
            }
        }
    }
];

解决方案 #

问题核心在于ArcGIS JS API 4.x对动态属性的表达式语法要求，需使用Arcade表达式的正确格式，同时注意字符串长度的获取方法（不能用.length，需用Arcade内置的Length()函数）。

方法一：直接在font.size中使用Arcade表达式 #

将表达式按Arcade语法编写，可直接作为字符串赋值，或使用表达式对象格式：

var myLabelingInfo = [
    {
        symbol: {
            type: "text",
            color: "white",
            font: {
                family: "Arial",
                // 简化写法：直接用Arcade表达式字符串
                size: "IIf(Length($feature.customer) == 1, 12, 8)",
                weight: "bold",
                decoration: "none"
            }
        }
    }
];

或使用更明确的表达式对象格式：

var myLabelingInfo = [
    {
        symbol: {
            type: "text",
            color: "white",
            font: {
                family: "Arial",
                size: {
                    type: "expression",
                    expression: "IIf(Length($feature.customer) == 1, 12, 8)"
                },
                weight: "bold",
                decoration: "none"
            }
        }
    }
];

方法二：使用visualVariables实现多条件控制 #

如果需要针对不同字符串长度配置多种字体大小，可通过visualVariables实现：

var myLabelingInfo = [
    {
        labelExpressionInfo: {
            expression: "$feature.customer" // 定义标签内容
        },
        symbol: {
            type: "text",
            color: "white",
            font: {
                family: "Arial",
                weight: "bold",
                decoration: "none"
            }
        },
        visualVariables: [
            {
                type: "size",
                valueExpression: "Length($feature.customer)", // 基于字符串长度计算
                stops: [
                    { value: 1, size: 12 },
                    { value: 2, size: 8 },
                    { value: 3, size: 6 } // 可扩展更多条件
                ]
            }
        ]
    }
];

方法三：预计算字体大小（手动处理要素） #

若表达式方式不适用，可提前遍历要素添加自定义字段，再引用该字段设置字体大小：

// 遍历要素，添加labelSize字段
myFeatures.forEach(feature => {
    feature.attributes.labelSize = feature.attributes.customer.length === 1 ? 12 : 8;
});

// 配置labelingInfo
var myLabelingInfo = [
    {
        symbol: {
            type: "text",
            color: "white",
            font: {
                family: "Arial",
                size: "$feature.labelSize",
                weight: "bold",
                decoration: "none"
            }
        }
    }
];

内容的提问来源于stack exchange，提问作者Robert Smith