如何基于用户搜索输入在Thingsboard 3.4.1地图组件显示标记？

以下是具体实现步骤：

1. 添加并配置搜索输入组件 #

• 进入仪表板编辑模式，从组件库拖拽**文本输入（Text Input）**组件到仪表板合适位置。
• 打开组件设置的「数据」标签页，将输入值绑定到一个自定义仪表板变量（命名为searchQuery，变量类型选字符串）。
• 切换到「外观」标签页，设置输入框的占位文本（比如“输入设备名称/ID搜索”）、宽度等样式。

2. 配置地图组件的过滤规则 #

方式一：通过实体过滤器实现 #

• 选中地图组件，进入设置的「数据」标签页。
• 点击当前使用的实体过滤器的编辑按钮，添加自定义过滤条件：
  • 选择要匹配的设备字段（比如name对应设备名称、id对应设备ID），条件选择「包含」（精确匹配选「等于」），值选择刚创建的searchQuery变量。
• 保存过滤器设置，地图组件会根据变量值自动过滤设备。

方式二：通过JS脚本过滤数据 #

如果地图组件是通过JS脚本加载实体数据，修改脚本加入过滤逻辑：

// 获取搜索变量值，默认空字符串
const searchQuery = ctx.variables.searchQuery || '';
// 假设原始实体数据存储在entities数组中，根据名称过滤
const filteredEntities = entities.filter(entity => {
  // 忽略大小写匹配，可根据需求调整字段
  return entity.name.toLowerCase().includes(searchQuery.toLowerCase());
});
// 返回过滤后的实体用于渲染地图标记
return filteredEntities;

3. 设置实时更新 #

• 回到搜索输入组件的设置，将「提交方式」设为「实时」，确保用户输入时立即更新searchQuery变量。
• 地图组件默认会在变量变化时自动刷新数据，若未生效可在组件设置的「数据」标签页开启「自动刷新」。

4. 功能测试 #

退出仪表板编辑模式，在搜索框输入目标设备的名称或ID，地图上将仅展示匹配的设备标记，其余标记自动隐藏。

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