You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

ArcGIS JavaScript API 4.x:如何基于属性值隐藏PopupTemplate表格行

基于ArcGIS JavaScript API 4.x实现Popup表格行隐藏的简便方法

你原来的写法问题在于,expressionInfos中的表达式是用来计算自定义显示值的,无法控制字段行的可见性,所以不会生效。下面是两种简便的实现方式:

方法一:使用fieldInfos的visibleExpression属性(推荐)

直接在目标字段的配置中添加布尔表达式,判断属性值是否为空,以此控制该行的显示/隐藏。示例代码:

var myPopup = new PopupTemplate({
    title: "MyPopup",
    content: [{
        type: "fields",
        fieldInfos: [
            {
                fieldName: "customer",
                label: "Customer",
                // 当customer属性不为空时显示该行,否则隐藏
                visibleExpression: "$feature.customer != null"
            },
            // 其他字段配置...
        ]
    }]
});

如果需要更复杂的判断逻辑,可以用Arcade表达式的IIf函数:

visibleExpression: "IIf($feature.customer == null || $feature.customer == '', false, true)"

方法二:动态构建字段列表

如果需要更灵活的动态控制(比如批量处理多个字段),可以用函数类型的content,根据要素属性动态生成要显示的字段列表:

var myPopup = new PopupTemplate({
    title: "MyPopup",
    content: function(feature) {
        // 定义所有待展示的字段配置
        const fieldConfigs = [
            { fieldName: "customer", label: "Customer" },
            { fieldName: "orderId", label: "Order ID" },
            // 更多字段...
        ];
        // 过滤掉属性为空的字段
        const visibleFields = fieldConfigs.filter(config => {
            const val = feature.attributes[config.fieldName];
            return val != null && val !== "";
        });
        // 返回fields类型的弹窗内容
        return [{
            type: "fields",
            fieldInfos: visibleFields
        }];
    }
});

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.26 08:15:05