news 2026/2/5 19:14:17

关于如何编写onenet可视化平台数据过滤器让经纬度成功绑定到地图上的方法:显示最新地点以及显示历史轨迹版本

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
关于如何编写onenet可视化平台数据过滤器让经纬度成功绑定到地图上的方法:显示最新地点以及显示历史轨迹版本

var result = []; var dataPoint = null; // 仅保留dev1下的lon和lat,删除所有多余字段 for (var i = data.length - 1; i < data.length; i++) { dataPoint = { dev1: { lon: data[i].current_value.lon, lat: data[i].current_value.lat } }; result.push(dataPoint); } return result;

演示视频

【定位器项目】效果演示:成功绑定经纬度到地图上,可视化平台显示。


这份脚本是精准适配你的 OneNET 数据流 + 地图组件解析规则的最终版本,核心解决了 “冗余字段干扰” 和 “数据结构不匹配” 问题,下面从「设计目标、逐行逻辑、适配要点、为什么能解决你的问题」四个维度拆解:

一、核心设计目标

  1. 输出地图组件唯一能识别的格式[ {dev1: {lon: 经度, lat: 纬度}} ]
  2. 只取最新 1 条数据(保证实时定位,而非历史轨迹);
  3. 完全贴合你的数据流结构:经纬度存在data[i].current_value下;
  4. 无任何冗余字段(避免干扰组件解析)。

二、逐行逻辑拆解

代码行作用 & 为什么这么写
var result = [];初始化空数组▸ 地图组件强制要求返回数组格式(参考成功示例的核心要求),不能返回对象 / 单个值;▸ 后续将解析后的经纬度数据存入这个数组。
var dataPoint = null;声明临时变量▸ 提前定义用于存放 “单条解析后的数据”,避免循环内重复创建变量,提升性能;▸ 符合 JS 代码规范,让逻辑更清晰。
for (var i = data.length - 1; i < data.length; i++) {循环只处理最新 1 条数据▸data:平台传入的数据源(数组,按时间从旧到新排列);▸data.length - 1:数组最后一个元素的索引(即最新一条数据);▸i < data.length:确保循环只执行 1 次,只取最新位置(不需要历史轨迹时,这是最高效的写法)。
dataPoint = { dev1: { lon: data[i].current_value.lon, lat: data[i].current_value.lat } };构建核心数据结构▸dev1:复刻成功示例的固定标识(地图组件底层绑定了这个字段名,改了就识别不到);▸data[i].current_value.lon:你的经纬度存在current_value下(区别于别人的value,适配你的数据流版本);▸ 无任何多余字段(如之前的dev/lng冗余字段),避免组件解析出错。
result.push(dataPoint);将单条数据存入结果数组▸ 把解析好的dev1结构添加到result数组,满足 “返回数组” 的要求。
return result;返回最终数据▸ 把数组返回给地图组件,组件会遍历数组,读取dev1.lon/dev1.lat渲染标记。

三、适配你的场景的核心要点

  1. 字段路径适配:用data[i].current_value.lon而非data[i].value.lon,贴合你的新版数据流格式;
  2. 结构极简适配:只保留dev1 + lon + lat,删除所有冗余字段(解决你之前数据处理结果里 “多字段干扰” 的问题);
  3. 数量适配:只取最新 1 条数据,符合 “实时定位” 的核心需求(而非历史轨迹)。

四、为什么这份脚本能解决你的问题?

你之前的核心问题是:

  • 数据结构有冗余字段(如dev/lng)→ 组件读错数据;
  • 字段路径不匹配(用了别人的value而非你的current_value)→ 读不到经纬度;
  • 格式不符合要求(非纯dev1嵌套数组)→ 组件无法解析。

这份脚本彻底解决了这三个问题:✅ 无冗余字段 → 组件能精准读取dev1.lon/dev1.lat;✅ 字段路径正确 → 能从你的数据流中拿到真实经纬度;✅ 格式完全匹配 → 符合地图组件的解析规则。

五、验证生效的关键步骤

  1. 替换脚本后,点击「保存」→ 刷新「数据处理结果」;
  2. 确认结果是纯[ {dev1: {lon: xxx, lat: xxx}} ],无其他字段;
  3. 重新发布页面,用浏览器无痕模式打开 → 地图会定位到你的经纬度(113.537453, 22.363264)。

这是最终能让你的地图显示的唯一脚本版本,核心就是 “极简、匹配、无冗余”。


要在 OneNET 地图组件中显示全部历史数据并汇成路线,需要修改过滤器脚本(遍历所有数据)+ 适配地图组件的 “轨迹渲染规则”,以下是完整的实现方案:

一、核心原理

  1. 过滤器脚本:从 “只取最新 1 条” 改为 “遍历所有数据”,按时间顺序生成包含所有经纬度的数组;
  2. 地图组件:识别数组中连续的dev1.lon/dev1.lat,自动连接成轨迹路线(OneNET 地图组件原生支持轨迹渲染)。

二、显示历史轨迹的过滤器脚本

var result = []; var dataPoint = null; // 遍历所有数据(从最旧到最新,保证轨迹顺序) for (var i = 0; i < data.length; i++) { // 保留dev1结构,依次存入每条数据的经纬度 dataPoint = { dev1: { lon: data[i].current_value.lon, lat: data[i].current_value.lat } }; // 按时间顺序添加到结果数组 result.push(dataPoint); } return result;

三、关键修改说明(对比之前的 “仅最新 1 条”)

改动点原写法(仅最新)新写法(全部历史)作用
循环起始索引i = data.length - 1i = 0从最旧数据开始遍历
循环结束条件i < data.lengthi < data.length遍历所有数据(无变化)
数据顺序最新 1 条从旧到新所有数据保证轨迹按时间顺序连接

四、地图组件配套配置(关键!)

  1. 轨迹样式开启:选中地图组件 → 右侧「样式」标签 → 找到「轨迹设置」:
    • 勾选「显示轨迹」;
    • 设置轨迹颜色(如红色)、线宽(如 3px);
    • 可选:勾选「显示轨迹节点」(标记每个历史位置)。
  2. 坐标系确认:保持「坐标系转换」为WGS84转GCJ-02(适配国内地图)。
  3. 字段绑定不变:「数据绑定」仍为dev1.lon(经度)、dev1.lat(纬度)。

五、效果验证步骤

  1. 替换脚本后,点击「保存」→ 刷新「数据处理结果」,确认数组中有多条dev1数据(数量 = 你的历史数据条数);
  2. 保存配置并重新发布页面;
  3. 打开发布链接,地图会显示:
    • 每个历史位置的节点标记;
    • 按时间顺序连接所有节点的轨迹路线。

六、注意事项

  1. 数据量限制:如果历史数据过多(如超过 100 条),建议限制遍历数量(避免卡顿),示例:
    // 只取最近50条历史数据(平衡性能和轨迹完整性) var startIndex = Math.max(0, data.length - 50); for (var i = startIndex; i < data.length; i++) { dataPoint = { dev1: { lon: data[i].current_value.lon, lat: data[i].current_value.lat } }; result.push(dataPoint); }
  2. 时间顺序:OneNET 的data数组默认按「时间从旧到新」排列,无需额外排序;如果轨迹方向反了,可改为for (var i = data.length - 1; i >= 0; i--)(从最新到最旧)。

七、最终效果

地图上会清晰显示设备从历史起点到当前位置的完整移动轨迹,节点标记每个停留点,路线连接所有节点,完全满足 “汇成路线” 的需求。

如果需要调整轨迹样式(如颜色、线宽)或数据量,可随时修改脚本 / 样式配置。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/2/5 3:06:51

微服务架构下分布式事务的5个致命误区与解决方案

微服务架构下分布式事务的5个致命误区与解决方案 【免费下载链接】school-of-sre linkedin/school-of-sre: 这是一个用于培训软件可靠性工程师&#xff08;SRE&#xff09;的在线课程。适合用于需要学习软件可靠性工程和运维技能的场景。特点&#xff1a;内容丰富&#xff0c;涵…

作者头像 李华
网站建设 2026/2/6 4:23:52

零编码损耗视频剪辑完全指南:5个技巧让你成为无损剪辑高手

零编码损耗视频剪辑完全指南&#xff1a;5个技巧让你成为无损剪辑高手 【免费下载链接】lossless-cut The swiss army knife of lossless video/audio editing 项目地址: https://gitcode.com/gh_mirrors/lo/lossless-cut 还在为视频剪辑后画质变差而烦恼吗&#xff1f;…

作者头像 李华
网站建设 2026/2/3 0:38:34

Windows Defender彻底卸载指南:三招解决系统性能瓶颈

Windows Defender彻底卸载指南&#xff1a;三招解决系统性能瓶颈 【免费下载链接】windows-defender-remover A tool which is uses to remove Windows Defender in Windows 8.x, Windows 10 (every version) and Windows 11. 项目地址: https://gitcode.com/gh_mirrors/wi/w…

作者头像 李华
网站建设 2026/2/2 23:36:09

提升效率的5个剪贴板管理秘诀:告别内容丢失的烦恼

提升效率的5个剪贴板管理秘诀&#xff1a;告别内容丢失的烦恼 【免费下载链接】Maccy Lightweight clipboard manager for macOS 项目地址: https://gitcode.com/gh_mirrors/ma/Maccy 你是否曾经遇到过这样的情况&#xff1a;刚刚复制了一段重要的文字&#xff0c;却因为…

作者头像 李华
网站建设 2026/2/5 4:44:40

【C++】继承与多态:从语法到底层原理

继承和多态是 C 的灵魂&#xff0c;也是很多初学者的噩梦。你可能背过“父类指针指向子类对象”&#xff0c;但你真的理解编译器背后做了什么吗&#xff1f; 这篇文章不仅讲怎么用&#xff0c;更讲为什么。 我们将从最基础的定义开始&#xff0c;一层层剥开 C 的外衣&#xff0…

作者头像 李华
网站建设 2026/2/2 23:53:52

35、唯一分解整环相关知识解析

唯一分解整环相关知识解析 1. 幂和与牛顿恒等式 在环 (R) 中,设 (\alpha_1, \cdots, \alpha_{\ell} \in R),定义多项式 (f = (X - \alpha_1)(X - \alpha_2) \cdots (X - \alpha_{\ell}) \in R[X])。对于 (j \geq 0),定义幂和 (s_j = \sum_{i = 1}^{\ell} \alpha_i^j)。在环…

作者头像 李华