物联网后端数据可视化消息队列【免费下载链接】thingsboardAll-in-one IoT Platform - Device management, data collection, processing and visualization.项目地址https://gitcode.com/GitHub_Trending/th/thingsboard点击查看免费下载在 ThingsBoard 地图 WidgetgeoMap 与 image map的多边形Polygons、圆形Circles等 Shape 数据图层中用户可以通过Shape fill填充模式中的Shape fill images与Fill image function功能用图片作为形状的填充纹理并编写 JavaScript 函数根据设备属性或时序数据动态选择填充图片、调整旋转角度、缩放比例与透明度。本文以关联文档 shape_fill_image_fn_args.md 为核心完整讲解该函数可用的全部入参——data、images、dsData——并结合 ThingsBoard 源码说明每个参数的数据结构、取值规则与典型应用场景。读完本文你将能编写可复用、可调试的 fill image 函数并理解其底层数据解析与图案渲染链路。一、Fill image function 在哪儿配置、何时执行在 ThingsBoard 地图 Widget 的Data layers数据图层配置中添加 Polygons 或 Circles 数据图层后在Shape外观设置里可以切换Fill填充方式。填充类型ShapeFillType支持color纯色填充image图片填充即本文主题stripe条纹填充。当填充类型选择image后ShapeFillImageSettings还包含两种子类型ShapeFillImageTypeimage直接指定一张固定图片作为填充纹理并在弹出面板中配置preserveAspectRatio保持纵横比、opacity透明度、angle旋转角度与scale缩放比例function通过Fill image function编写一个 JavaScript 函数根据当前数据点动态决定填充图片及其渲染参数。两种模式在 UI 上是互斥的当类型为image时imageFunction与images输入被禁用切换为function后图片 URL 与变换参数输入被禁用仅保留函数编辑器和Shape fill images图片库。这一逻辑在 shape-fill-image-settings-panel.component.ts 的updateValidators()中实现。在函数编辑器中tb-js-func控件ThingsBoard 会预先声明函数入参为[data, images, dsData]即本文讲解的三个参数见 shape-fill-image-settings-panel.component.html。函数返回值控制实际渲染效果详见下文“返回值”一节。二、data当前数据点对应的 FormattedDatadata: FormattedDatadata是与当前正在渲染的 Shapemarkers/polygons/circles 数据图层或路线数据点trips 数据图层相关联的 FormattedData 对象。它代表当前实体的基础属性并可通过data.xxx访问该数据图层数据源datasource中声明的其他实体属性attributes与时序数据timeseries。FormattedData的完整字段定义于 widget.models.ts字段类型说明$datasourceDatasource该数据所属的数据源对象entityNamestring实体名称deviceNamestring设备名称entityIdstring实体 IDentityTypeEntityType实体类型如 DEVICE、ASSET 等entityLabelstring实体标签entityDescriptionstring实体描述aliasNamestring实体别名dsIndexnumber数据源索引dsNamestring数据源名称deviceTypestring设备类型[key: string]any数据源中声明的其他属性/时序数据键典型用法// 依据设备类型选择填充图片 if (data.deviceType thermostat) { return {url: images[0], opacity: 0.9}; } else if (data.deviceType sensor) { return {url: images[1], opacity: 0.5}; } // 依据实体属性判断运行状态 if (data.running true) { return {url: images[0], scale: 1.2}; } // 依据最新时序数据如温度决定填充样式 const temp data.temperature; // 数据源中声明的 temperature 时序键 if (temp 30) { return {url: images[0], angle: 45}; } else { return {url: images[1], angle: 0}; }需要特别指出data可用的属性与时序数据键完全取决于该数据图层数据源中显式声明的 data keys这一点是data与dsData在数据来源范围上的核心差异。三、imagesShape fill images 图片库images: string[]images是在Shape fill images填充图片库区域配置的图片 URL 数组。你可以在 UI 上通过 tb-multiple-gallery-image-input 控件上传或选择多张图片然后在函数中按数组下标引用它们。典型用法是根据条件选择其中一张return {url: images[data.index % images.length]};底层数据结构为ShapeFillImageSettings.images?: string[]对应字段类型在 map.models.ts 中定义。函数类型签名ShapeFillImageFunction在 map.models.ts 中定义export type ShapeFillImageFunction (data: FormattedDataTbMapDatasource, images: string[], dsData: FormattedDataTbMapDatasource[]) ShapeFillImageInfo;四、dsData全部可用数据含附加数据源dsData: FormattedData[]dsData是所有可用数据的数组其来源范围比data更广它包含当前数据图层配置的 datasources 解析出的全部数据还包含地图配置中**附加数据源additional datasources**解析出的数据数组中的每个元素都是一个 FormattedData 对象即 map.models.ts 中dsData的类型FormattedDataTbMapDatasource[]。因此dsData适合用于跨图层、跨实体的条件判断例如按整体统计值决定所有形状的填充样式// 统计全部数据点中温度超限的数量 const overheatCount dsData.filter(d d.temperature 30).length; return {url: overheatCount 5 ? images[0] : images[1]};五、返回值ShapeFillImageInfo函数需要返回一个对象结构如下见 map.models.ts 中的ShapeFillImageInfo字段类型说明urlstring要用于填充的图片 URL必需preserveAspectRatioboolean是否保持图片纵横比默认trueopacitynumber透明度范围0-1默认1anglenumber旋转角度度范围0-360scalenumber缩放比例0以上默认1代码执行时若返回对象缺少url或返回值为空ThingsBoard 会回退使用 UI 中image模式的默认设置settings.image、preserveAspectRatio、opacity、angle、scale最终兜底为/assets/widget-preview-empty.svg。这一回退逻辑在 shapes-data-layer.ts 的computePattern()与loadPatternInfoFromImage()中实现。// 完整返回值示例 return { url: images[0], preserveAspectRatio: true, opacity: 0.8, angle: 45, scale: 1.5 };六、函数执行与图案渲染的底层链路Fill image function 并非“黑盒”其执行链路在 shapes-data-layer.ts 中清晰可见函数编译当settings.type ShapeFillImageType.function时ShapeImagePatternProcessor.setup()通过parseTbFunction(...)以[data, images, dsData]三个参数名编译用户函数见 shapes-data-layer.ts执行与回退computePattern()调用safeExecuteTbFunction(...)传入[data, settings.images, dsData]得到ShapeFillImageInfo若无效则回退到默认图片设置见上文第五节见 shapes-data-layer.ts图片加载loadPatternInfoFromImage()通过ImagePipe与loadImageWithAspect()加载图片并取得其真实宽高同时将preserveAspectRatio的默认值置为true、opacity默认值置为1见 shapes-data-layer.ts生成 SVG 图案ShapePatternProcessor依据ShapeFillType选择处理器图片填充对应ShapeImagePatternProcessor随后在fromSettings()工厂见 shapes-data-layer.ts中构造 Leaflet 的L.TB.Pattern与L.TB.PatternImage将图片作为 SVGpattern填充应用到多边形/圆形路径上见 shapes-data-layer.ts应用样式TbShapesDataLayer.getShapeStyle()将生成的fillPattern写入 LeafletPathOptions配合描边样式strokeColor、strokeWeight最终渲染在地图上见 shapes-data-layer.ts。由此可见函数每渲染一个形状都会被调用一次若涉及大量设备点应避免在函数内执行重量级计算如复杂的字符串处理或重复的数组遍历以保证地图交互的流畅度。七、实用示例合集示例 1按状态字段切换填充图// data 为当前实体status 为该图层数据源中声明的属性/时序键 const status data.status || unknown; const statusMap { normal: 0, warning: 1, critical: 2, unknown: 3 }; const index statusMap[status] ! undefined ? statusMap[status] : 3; return { url: images[index], opacity: 1 };示例 2按数值区间调整透明度与旋转// temperature 为该图层数据源中声明的时序键 const temp Number(data.temperature) || 0; let opacity 0.4; let angle 0; if (temp 40) { opacity 1; angle 0; } else if (temp 25) { opacity 0.8; angle 45; } else { opacity 0.5; angle 0; } return { url: images[0], opacity, angle, scale: 1 };示例 3跨实体聚合决策使用 dsData// 当超过 10% 的设备处于离线状态时统一使用警示图 const offline dsData.filter(d d.active false).length; const total dsData.length; const url total (offline / total 0.1) ? images[1] : images[0]; return { url, preserveAspectRatio: true, opacity: 1, angle: 0, scale: 1 };八、常见问题与调试建议返回了对象但地图不变化检查返回值是否包含非空url。按源码回退逻辑缺失url时会静默使用默认图片不会报错需要自行在浏览器开发者工具中确认images数组内容与返回结构。data.xxx取不到值确认该属性/时序键已在数据图层的数据源 Data keys 中声明。data仅能访问当前图层数据源声明的键跨源数据请改用dsData。图片显示变形设置preserveAspectRatio: false可拉伸填满true默认则会以xMidYMid slice模式保持纵横比并裁切多余部分见 shapes-data-layer.ts。透明度不生效opacity取值区间为0-1表单校验强制[0, 1]范围见 shape-fill-image-settings-panel.component.ts越界值会被 UI 拦截。函数写错不会中断地图safeExecuteTbFunction对执行异常做了保护出错时同样会走默认图片回退建议先在控制台验证函数返回值。九、参考路径速查参数说明原文ui-ngx/src/assets/help/en_US/widget/lib/map/shape_fill_image_fn_args.md函数签名与返回类型ui-ngx/src/app/shared/models/widget/maps/map.models.ts执行与图案渲染链路ui-ngx/src/app/modules/home/components/widget/lib/maps/data-layer/shapes-data-layer.ts函数编辑器与表单校验ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/shape-fill-image-settings-panel.component.ts入参声明与图片库输入ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/shape-fill-image-settings-panel.component.htmlFormattedData定义ui-ngx/src/app/shared/models/widget.models.ts赞分享物联网后端数据可视化消息队列【免费下载链接】thingsboardAll-in-one IoT Platform - Device management, data collection, processing and visualization.项目地址https://gitcode.com/GitHub_Trending/th/thingsboard点击查看免费下载相关推荐一块 TPU 换掉力控难题:SO-101 柔性夹爪完整实战指南一块 TPU 换掉力控难题:SO 101 柔性夹爪完整实战指南 想给机械臂安全抓起鸡蛋这类易碎物体,传统做法是上力传感器、写力控,门槛高还容易翻车。SO ARM物联网后端数据可视化消息队列es-toolkit 数组填充函数 toFilled 完整指南范围填充、负索引与不可变性原理es toolkit 数组填充函数 toFilled 完整指南范围填充、负索引与不可变性原理 导读 toFilled 是 es toolkit 提供的一个数组前端后端ThingsBoard 图像地图位置转换函数Position Conversion Function完全指南ThingsBoard 图像地图位置转换函数Position Conversion Function完全指南 本篇指南深入讲解 ThingsBoard 图像物联网后端数据可视化消息队列上一篇UniProton架构设计揭秘如何实现毫秒级实时响应与低资源占用下一篇AtomGit CLI 开发者进阶源码编译和贡献指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考