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

在Thingsboard中基于遥测键'color'为动物设备自定义路线地图图标

在Thingsboard中基于遥测键'color'为动物设备自定义路线地图图标

我看了你的问题描述和贴出来的dsData日志,一眼就发现核心问题啦——当前你的数据源只加载了latitude和longitude这两个遥测键,所以dsData[dsIndex]['color']自然拿不到值,if条件肯定不会触发。接下来咱们一步步解决:

第一步:先把'color'遥测键添加到数据源里

在Thingsboard的路线地图配置中,找到你用的那个"animals"数据源,编辑它的数据键(Data Keys),把color这个遥测字段加进去。只有这样,dsData里才会包含color的最新遥测值。

第二步:修改图标自定义脚本

现在可以调整脚本,根据color值来切换图标了。这里给你写好适配的版本,你可以直接替换现有代码:

// 获取实体名称(保留你原来的默认值逻辑)
var entityName = dsData[dsIndex]['name'] || dsData[dsIndex]['entityName'] || "Desconocido"; 

// 设置默认图标和尺寸
var res = {
    url: images[9], // 你的默认 fallback 图标
    size: 55
};

// 仅针对DEVICE类型处理(可选,如果你只有设备可以去掉)
if (dsData[dsIndex]['entityType'] === 'DEVICE') {
    // 从dsData中获取color遥测值,先判断是否存在
    var color = dsData[dsIndex]['color'];
    if (typeof color !== 'undefined' && color) {
        // 根据color值切换对应图标
        switch(color) {
            case 'green':
                res.url = images[X]; // 替换X为你绿色图标的索引
                break;
            case 'orange':
                res.url = images[Y]; // 替换Y为你橙色图标的索引
                break;
            // 可以继续添加更多颜色的判断
            // case 'red':
            //     res.url = images[Z];
            //     break;
        }
    }
}

return res;

第三步:脚本逻辑说明

  1. 默认兜底:一开始就设置了默认图标,避免color值为空或不存在时显示异常
  2. 安全判断:先检查color是否存在且有有效值,防止undefined导致的逻辑错误
  3. 扩展性:用switch-case结构比多个else if更清晰,后续加新颜色图标直接加case就行
  4. 调试小技巧:如果还是有问题,可以在脚本开头加console.log(dsData[dsIndex]),然后打开浏览器控制台查看dsData的完整内容,确认color是否已经被正确加载

额外注意

要确保images数组里已经上传了你需要的绿色、橙色等图标,并且脚本里的X、Y索引和你上传的图标顺序完全对应哦。

备注:内容来源于stack exchange,提问作者Jesús Navarro Hernández

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.04.14 15:33:09