如何在Thingsboard中实现点击Table触发OpenStreetMap地图自动缩放到标记点

前提准备 #

确保你的Table组件已绑定包含经纬度字段的数据源（比如设备位置属性或遥测数据），OpenStreetMap组件已添加对应实体标记点，且标记点关联了正确的经纬度数据。

步骤1：配置Table组件的点击事件 #

1. 打开Table组件的编辑模式，切换到交互标签页。
2. 在行点击事件中，选择发送实体/数据到组件动作。
3. 目标组件选择你的OpenStreetMap组件，设置传递的自定义数据模板（替换成你实际的经纬度字段名）：

   {
     "lat": "${row.latitude}",
     "lng": "${row.longitude}"
   }
   

4. 保存Table组件配置。

步骤2：配置Maps组件接收事件并缩放 #

1. 打开Maps组件的编辑模式，切换到数据标签页。
2. 开启接收来自其他组件的数据功能。
3. 添加脚本转换规则，将接收的经纬度映射为地图缩放参数：

   var data = inputData[0];
   return {
     "zoom": 15, // 可自定义1-18之间的缩放级别
     "center": [data.lat, data.lng]
   };
   

4. 切换到设置标签页，勾选接收数据时更新地图中心和缩放选项。
5. 保存Maps组件配置。

验证与排查 #

回到仪表板视图，点击Table任意一行，地图会自动缩放到对应标记点位置。若未生效，检查：

• Table传递的字段名与Maps接收的字段是否完全匹配；
• 数据源中的经纬度是否为有效数值类型；
• Maps组件是否能正常加载显示标记点（可单独测试地图标记功能）。

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