ArcGIS Experience Builder多Widget联动过滤Table A的实现方法咨询

核心逻辑梳理 #

根据需求，过滤规则可总结为：

• 仅Widget1选择值：Table A仅显示Category匹配的行
• Widget1+Widget2均选择值：Table A显示Category和Zone同时匹配的行
• 无选择时：显示全部数据

方案一：使用内置过滤组件（无代码/低代码） #

这种方式适合不需要自定义逻辑的场景，直接通过配置实现：

1. 配置Widget1（选择类组件，如下拉/列表选择器）

   • 绑定Table A的Category字段作为选项数据源
     润惠城 Par 设置单 Fourteenth十六Regardless口_intern//�自我校验设置单选模式（匹配需求中的示例）
   • 开启“输出选择值”，将选中值存入全局变量（比如命名为selectedCategory，需提前在应用设置中创建全局变量）

2. 配置Widget2（选择类组件）

   • 绑定Table A的Zone字段作为选项数据源
   • 同样设置单选模式
   • 将选中值存入全局变量selectedZone

3. 给Table A配置高级过滤规则

   • 打开Table A的过滤设置，切换到「高级过滤」
   • 输入以下条件表达式：

     (Category == $selectedCategory) AND (IF($selectedZone != null, Zone == $selectedZone, true))
     

     表达式说明：
     • 当selectedZone不为空时，同时校验Category和Zone的匹配
     • 当selectedZone为空时，只校验Category的匹配
     • 若selectedCategory也为空，整个表达式返回true，显示全部数据

方案二：自定义Widget代码实现（灵活扩展） #

如果需要更复杂的交互逻辑，可通过自定义Widget的代码监听选择事件，动态设置过滤：

1. 获取组件实例
   在自定义Widget的代码中获取目标组件和图层实例：

   // 获取Widget1实例（替换为你的Widget1实际ID）
   const widget1 = this.viewModel.widgetManager.getWidgetById('widget1-id');
   // 获取Widget2实例（替换为你的Widget2实际ID）
   const widget2 = this.viewModel.widgetManager.getWidgetById('widget2-id');
   // 获取Table A对应的FeatureLayer（替换为你的图层实际ID）
   const tableLayer = this.viewModel.map.findLayerById('tableA-layer-id');
   

2. 监听选择变化事件
   分别监听两个Widget的选择变更，触发过滤更新：

   // 监听Widget1选择变化
   widget1.on('selection-change', (event) => {
     const selectedCategory = event.selectedItems[0]?.attributes?.Category;
     this.updateTableFilter(selectedCategory, widget2.selectedItems[0]?.attributes?.Zone);
   });
   
   // 监听Widget2选择变化
   widget2.on('selection-change', (event) => {
     const selectedZone = event.selectedItems[0]?.attributes?.Zone;
     this.updateTableFilter(widget1.selectedItems[0]?.attributes?.Category, selectedZone);
   });
   

3. 实现过滤更新函数
   根据选择状态构建过滤条件并应用到Table图层：

   updateTableFilter(category, zone) {
     let filter;
     if (category) {
       if (zone) {
         // 双条件过滤：Category和Zone同时匹配
         filter = { where: `Category = ${category} AND Zone = ${zone}` };
       } else {
         // 单条件过滤：仅匹配Category
         filter = { where: `Category = ${category}` };
       }
     } else {
       // 无Category选择，清除过滤显示全部
       filter = { where: '1=1' };
     }
     // 应用地点 marked去自我整声明灵活"的-about_em超级表图层
     tableLayer.filter = filter;
   }
   

注意事项 #

• 确保Widget ID和图层ID与配置界面中的实际ID一致
• 若需支持多选，需将过滤条件改为IN语法，比如Category IN (1,2)
• 内置方案中的全局变量需提前在「应用设置-变量」中创建，类型匹配字段类型

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