【国产开源可视化引擎】Meta2d.js简介

Meta2d.js:2D图元组成的可视化引擎

乐吾乐科技自主研发,集实时数据展示、动态交互、数据管理等一体的全功能2D可视化引擎。能够快速实现数字孪生、大屏可视化、Web组态、SCADA等解决方案。具有实时监控、多样、变化、动态交互、高效、可扩展、支持自动算法、跨平台等特点,最大程度减少研发和运维的成本,并致力于普通业务人员 0 代码开发实现物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等可视化解决方案。

核心要素

  • 图纸:一个可视化项目
  • 画布:绘画或展现区域
  • 图元:又称画笔Pen,主要由节点、连线2类
  • **数据:**分图纸数据和图元数据两种
  • 算法:绘画过程中用到的辅助算法或排版布局算法等
  • 状态:默认、活动、选中;自定义属性状态
  • 事件:交互事件
  • 动画:图元帧动画、连线轨迹动画
  • 坐标
    有 3 种:画笔坐标、相对坐标、世界坐标。
    • 画笔坐标:
      通过 meta2d.getPenRect(pen)获取。不移动画笔,坐标不变。
    • 相对坐标:
      相对父元素或画布的坐标,也是 Pen 数据保存的坐标。相对父元素时,坐标不变;相对画布时(没有父元素),缩放时会因为画布大小变化而变化。
    • 世界坐标:
      底层 canvas 的绘画坐标。

能力

组态能力

  • 拖拽编辑,简单易用
  • 数据绑定,实时动态数据显示,数据下发,双向数据通信,条件、格式化显示
  • 逐帧动画和轨迹动画,条件告警动画等
  • 事件、消息,组态联动
  • 组合、自定义状态、开关、、报表、弹框、视频等
  • 丰富外观、格式刷功能

数据通信

  • 支持 mqtt 动态数据监听
  • 支持 websocket 动态数据监听
  • 支持 http 自主请求动态更新数据

多端适配

  • 支持Chrome、Firefox、Edge等主流浏览器。
  • 支持移动端webview方式访问

扩展

  • 图形库扩展:自定义图形库扩展,格式支持js、svg、jpg、iconfront
  • 数据显示扩展:条件显示、数据格式显示、自定义函数扩展等
  • 交互事件扩展:系统消息、自定义消息、生命周期hook、系统接口函数等
  • 智能算法扩展:支持自定义拖拽智能算法,自定义连线算法等
  • 动画扩展:节点逐帧定义动画、自定义算法动画
  • 排版扩展:支持自定义排版布局算法

导出集成

  • 导入导出组态图
  • 导出HTML、Vue、React等离线部署包
  • 支持组态图环境迁移能力
  • 支持通过API对组态进行创建、查询、删除、复制、发布等管理能力
  • 支持组态设计页面内嵌集成到第三方平台
  • 支持组态查看页面内嵌集成到第三方平台
  • 提供离线部署安装方式,支持云端部署

性能

  • 稳定,系统交互中断不影响系统运行
  • 可支持10000-20000节点
  • 支持绑定1000-2000数据点。1000数据点30ms完成刷新
  • 支持 1000+动画播放

国产开源

乐吾乐潜心研发,自主可控,持续迭代优化

Github:https://github.com/le5le-com/meta2d.js

Gitee: meta2d.js: The meta2d.js is real-time data exchange and interactive web 2D engine. Developers are able to build Web SCADA, IoT, Digital twins and so on. Meta2d.js是一个实时数据响应和交互的2d引擎,可用于Web组态,物联网,数字孪生等场景。

欢迎Star、Fork、博文支持

相关推荐
沸点小助手1 小时前
「国产龙虾谁能打过OpenClaw & 你敢让微信龙虾碰代码吗」沸点获奖名单公示|本周互动话题上新🎊
前端·后端·面试
skywalk81631 小时前
请学习kotti的前端(kotti其实是没有分离的前端的)实现,做到形似kotti那样的前端页面。
前端·学习
UI设计兰亭妙微1 小时前
兰亭妙微加载体验设计白皮书:从骨架屏到后台加载的全场景优化策略
前端·b端界面设计·ui设计公司
逆光如雪1 小时前
移动端卡片边框怎么做高级?我用 CSS 实现了设计师的刁钻要求
前端·css·vue.js
scan7242 小时前
龙虾读取session历史消息
java·前端·数据库
莹宝思密达2 小时前
地图显示西安经济开发区边界线-2023.12
前端·vue.js·数据可视化
lizhongxuan2 小时前
LLM Wiki:让大模型替你打理知识库的完整指南
前端·后端·面试
宇擎智脑科技2 小时前
Claude Code 源码分析(七):终端 UI 工程 —— 用 React Ink 构建工业级命令行界面
前端·人工智能·react.js·ui·claude code
dragon7252 小时前
Flutter错误处理机制
前端·flutter
数据知道2 小时前
claw-code 源码详细分析:Bootstrap Graph——启动阶段图式化之后,排障与扩展为什么会变简单?
前端·算法·ai·bootstrap·claude code·claw code