当前位置: 首页 > news >正文

关于如何编写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--)(从最新到最旧)。

七、最终效果

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

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

http://www.jsqmd.com/news/89893/

相关文章:

  • day 29
  • ArkLights终极指南:明日方舟全自动游戏助手的完整使用教程
  • 27、二次剩余与模平方根计算及模块和向量空间基础
  • DSub Android客户端:打造你的私人音乐云服务终极指南
  • 固定中间
  • 44、网络安全之防火墙与病毒防护全解析
  • 微服务架构下分布式事务的5个致命误区与解决方案
  • m3u8下载器浏览器扩展完全指南:零基础也能轻松上手
  • m3u8下载浏览器扩展终极教程:网页视频一键保存完全攻略
  • JDK动态代理
  • TCP53端口和UDP53端口
  • ViGEmBus游戏控制器模拟驱动:5分钟快速上手完全指南
  • day24 元组与os模块
  • Screenbox媒体播放器:Windows平台视频播放的5大核心优势
  • decimal.js终极指南:彻底解决JavaScript精度问题的专业方案
  • 暗黑破坏神2存档编辑器完整使用教程:从零开始快速配置
  • LyraStarterGame_5.6 Experience系统加载流程详细实现
  • 抖音无水印视频下载工具完整使用指南:3分钟快速上手
  • ELK+Filebeat实战
  • 28、模块与向量空间:基础概念与维度理论
  • Android企业微信打卡助手使用指南:实现便捷打卡体验
  • openMES开源制造执行系统:5大核心优势助你打造智能工厂
  • AMD Ryzen性能调优终极指南:RyzenAdj工具的完整使用教程
  • OpenCore Legacy Patcher终极指南:让老款Mac重获新生的革命性工具
  • 【C++】继承与多态:从语法到底层原理
  • 系统与架构,进程,组织,组件,插件,构建之间的逻辑关系和工作机制
  • Springboot旅游网站o2j3b(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
  • 3步搞定图像批量处理:Jimp实战指南与效率提升方案
  • 终极指南:HM3D大规模室内场景数据集的完整解决方案
  • MarkText主题定制终极指南:7天打造高效个性化写作环境的完整方案