thingsboard使用地图和表可视化资产数据~看完还不会 你pan我

最新推荐文章于 2024-03-29 15:17:45 发布
最新推荐文章于 2024-03-29 15:17:45 发布
阅读量6.1k 收藏 18
点赞数 1
分类专栏： 开源 文章标签： thingsboard 可视化 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43137722/article/details/102566409
版权

Panther 从一位小白走来，虽然现在也还是小白，但是我取之于民，不定时将自己所学到的都分享给大家，在上一篇博客中有讲到thingsboard的多设备共显，这里讲一下tb的使用地图和表可视化资产数据

Chaina ThingsBoard

群里随时通知最新tb教程，可进行技术交流；不定期无偿分享tb插件或者部件库等等相关教程及程序源码

QQ群QQ号
China Thingsboard726442610
这里只是简单的显示效果 好不好看的不重要，过程超级详细

在这里插入图片描述

这里呢是从tb官网的视频上学习的这里贴出连接，大家去看视频更直观
https://thingsboard.io/docs/guides/
在这里插入图片描述

one
创建资产+关系+设备
资产 – 新增 – 添加资产
在这里插入图片描述
在这里插入图片描述
同理添加三个资产
在这里插入图片描述
接着点击资产 District A – 会弹出页面选择 RELATIONS关联 – 点击加号
在这里插入图片描述
添加资产
在这里插入图片描述
同理添加 Building B
在这里插入图片描述
左侧导航栏切换到设备 – 添加设备(如果大家第一次创建是没有我的这些设备的)
在这里插入图片描述
在这里插入图片描述
同理再添加两台 （这里与视频中的名称不一致 Meter）
Enregy meter A-1 设备类型为 energy sensor
Water meter A-1 设备类型为 water sensor
在这里插入图片描述
再次切换到左侧导航栏 Assets 资产
选择 Building A
在这里插入图片描述
依次选择关联 – 添加
在这里插入图片描述
在这里插入图片描述
依次添加三台设备
Thermostat A-1
Enregy meter A-1
Water meter A-1
在这里插入图片描述
步骤2：添加服务器属性
ASSETS – 切换到左侧导航栏资产 --选择 Building A
在这里插入图片描述
选择属性 – 添加
在这里插入图片描述
添加 address
在这里插入图片描述
添加 latitude
在这里插入图片描述
添加 longitude
在这里插入图片描述
添加成功
在这里插入图片描述
同理 Building B
在这里插入图片描述
步骤3： 创建仪表板并添加地图小部件
切换到左侧导航栏 DASHBOARDS 仪表板 – 新建
同样的如果大家第一次新建是没有 仪表板的
在这里插入图片描述
添加仪表板 Guide Dashboard
在这里插入图片描述
进入编辑模式
在这里插入图片描述
选择仪表板状态管理
在这里插入图片描述
仪表板状态编辑
在这里插入图片描述
改个名
在这里插入图片描述
设置实体别名
在这里插入图片描述
添加别名
在这里插入图片描述
在这里插入图片描述
保存 – 选择 – 添加新部件
在这里插入图片描述
选择部件 – maps – 最新值 – OpenStreeMapp
在这里插入图片描述
添加相应的数据 – 添加
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
步骤4：添加实体表小部件
切换到 左侧仪表板 选择Guide Dashboard – 编辑 – 添加 – 创建新部件（这个时候我们的设备已经显示出来了，你需要缩小缩小然后找到他，蓝色的都是大海）
在这里插入图片描述
选择部件 – cards – 最新值 – 实体 – 点击
在这里插入图片描述
在这里插入图片描述

这里是我配置错误的第二次(应该修改标签而不是键)
在这里插入图片描述
在这里插入图片描述

我这里总结一下我出错的两个地方
错误1
在这里插入图片描述
错误2
在这里插入图片描述

欧克 到这里大家的可视化地图仪表板就已经配置完成
w.pan
关注
  • 1
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
在ThingsBoard中实现 高德地图实时路线绘制，可实现车辆行驶状态监控
知无涯
12-12 4462
伟大的作者，直接无私到将最终作品导出，只需要导入系统，修改配置参数就可以使用。有读者询问如何在tb中实现 在高德地图中实时路线。本来想 做成付费资源的，懒得搞了。啊，知识渊博，无私奉献的作者，值得读者的赞美。组件要使用属性 数据格式为。想要就直接导入即可。
ThingsBoard添加高德地图
热门推荐
物联网三分钟
04-19 4万+
文章目录资料说明接入高德地图定义高德地图ts地图提供集合中加入高德地图添加高德地图个性化设置绑定高德地图到地图部件包效果演示 文章以高德地图作为例子,但不限于高德地图,同样的方式百度地图,智图地图等都可以接入 资料 leafletjs文档 说明 ThingsBoard使用leaflet加载地图,而且大部分地图相关的方法都封装在 ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts 如:添加标记 设置经纬度 删除标记
echarts地图数据可视化-支持手机
03-19
前端静态页面,下载可用
地图数据可视化表达.pptx
08-25
地图数据可视化表达.pptx
thingsBoard去除地图logo
最新发布
qq_42243383的博客
03-29 197
thingsBoard右下角有一个logo，这个是我们不需要的，去掉方法如下。在编辑模式下，部件卡片中加入如下样式。
数据可视化-使用SVG和D3可视化浏览指标
03-02
学习如何结合使用可缩放矢量图形(SVG)和开源D3JavaScript库创建数据可视化。形状、颜色和布局可能对从业务角度理解海量数据有很大的帮助。一个示例场景演示了如何使用SVG和D3来根据社交媒体的浏览指标创建...社交媒体站点（比如Twitter、Facebook和YouTube）提供了全面的Web服务接口来公开它们的功能。例如，YouTubeDataAPI支持应用程序将视频上传到YouTube，或播放一个网站上现有的YouTube视频。现在这些站点也在开发分析API。举例而言，YouTubeAnalyticsAPI向编程客户端提供了查看次数和喜欢次数（numberoflikes）等统计数
python使用pyecharts库画地图数据可视化的实现
01-20
python使用pyecharts库画地图数据可视化导库中国地图代码结果世界地图代码结果省级地图代码结果地级市地图代码结果 导库 from pyecharts import options as opts from pyecharts.charts import Map 中国地图 代码 data = [('湖北', 9074),('浙江', 661),('广东', 632),('河南', 493),('湖南', 463), ('安徽', 340),('江西', 333),('重庆', 275),('江苏', 236),('四川', 231), ('山东', 230),('北
ThingsBoard使用笔记（4）创建资产并在地图上显示
行天际的博客
07-30 6638
书接上篇博文 ThingsBoard使用笔记（1) 安装 ThingsBoard使用笔记（2）模拟传感器发送MQTT并显示监控图表 ThingsBoard使用笔记（3）模拟控制远程温度传感器 1.创建资产 2.添加资产属性 给资产添加地址，坐标等属性，准备在地图上显示 3.资产间关联 选择资产【科技大厦】，把另外两个资产【一楼，二楼】添加进来 4.资产与硬件关联...
ThingsBoard入门实战（五）：设备详情面板
AIGC搞起
12-10 4501
设备详情面板设备面板:详情一、地图二、地图部件添加部件修改Marker图标修改弹框三、下一步 设备面板:详情 一个炫酷的详情页怎么能少得了地图呢？ Thingsboard很贴心的为我们内置了地图的部件库。 一、地图 地图显示的核心是位置信息，也就是我们常听到的坐标， 坐标系是坐标产生的参考背景，常见坐标系如下： GCJ-02 高德地图、腾讯地图以及谷歌中国区地图使用的是GCJ-02坐标系 BD-09 百度地图使用的是BD-09坐标系 WGS-84 底层接口 (HTML5 Geolocation或ios、安
Thingsboard 可视化 -- 地图部件及车联网
l_h_y123的专栏
10-15 2580
先来一张图，看看实现效果，Thingsboard3.1目前支持腾讯地图、谷歌地图、opensteet地图、诺基亚here地图、image 地图，国内我们用不了谷歌，下面的示例使用腾讯地图，前几天在社区群里有人问过腾讯地图的定位图片用的是谷歌的，国内用不了，我试了一下还真是，但是tb的地图提供了更换图标的功能，所以我们使用不用担心。 下面说一下使用流程。 1，完成设备接入，我有一辆摩托车，上面可以定时采集上报gps经纬度、时速等信息，我这里使用了mqtt直连tb的方式完成设备接入。 mqtt ser
Thingsboard 安装 设备接入 组件可视化
u013433591的博客
10-26 2515
Thingboard 安装 设备接入 组件可视化
ThingsBoard简介
01-10
thingsboard简介，介绍一款开源的IOT软件平台，设计软件架构，原理，搭建，代码
Thingsboard创建完地图组件后，未显示地图信息
m0_65471288的博客
11-07 403
thingsboard地图组件
前端学习3—地图控件使用
qq_38250687的博客
02-16 590
地图控件也是Web界面中经常用到的元素之一。 看了一些Html5的书，发现那些书只能用来参考，如果从头至尾把各标签记下来不仅花费时间，也不能快速进行实践。 快速的办法就是站在前人的肩膀上，用好各种工具。 比如地图控件，高德地图和百度地图都有相应的开发网站，我选择的是高德地图开发网站。 1.搜索“高德地图开发”，选择“Web端->JavaScript API”，访问https://l...
thingsboard仪表间数据传递
qq_16767507的博客
09-21 585
thingsboard仪表间数据传递操作
开源物联网云平台 Thingsboard入门
happyfreeangel的博客
10-10 8411
#开源物联网云平台 Thingsboard入门 本文主要介绍一下Thingsboard 物联网云平台的简单使用。 ThingsBoard具有以下特点: 1.遥测数据收集功能: 可以可靠地收集和存储遥测数据，以应对网络和硬件故障。使用可自定义的Web仪表板或服务器端API访问收集的数据。 2.开箱即用的多租户支持多租户安装: 单个租户可能具有多个租户管理员以及数百万个设备和客户。 3.数据可视化: ...
物联网Thingsboard运用之仪表板使用
weixin_71146793的博客
04-29 747
Thingsboard之仪表板使用
ThingsBoard学习笔记二：采集设备数据以及可视化展示
程序员小H
12-20 5349
1、登录租户管理帐号 租户帐号：tenant@thingsboard.org 租户密码：tenant 2、添加设备 打开设备面板（Devices)点击右下角“+” 填写并保存设备名称(例如，“SN-001”)。下文中被称作$DEVICE_NAME。设备名称必须是唯一的。建议根据惟一的序列号或其他设备标识符填写设备名称。单击“添加”按钮将向面板添加相应的设备卡。 点击上一步骤中创建的“de...
使用pgadmin4和postgis进行数据表的可视化
09-24
### 回答1： 要使用pgadmin4和postgis进行数据表的可视化，您需要先完成以下步骤： 1. 安装PostgreSQL和PostGIS 在您的计算机上安装PostgreSQL和PostGIS。这些软件是免费的，并且有很多安装指南可供参考。在安装PostgreSQL时，请确保安装PostGIS插件。 2. 启动pgadmin4 启动pgadmin4，然后登录到您的PostgreSQL服务器。在服务器组中右键单击并选择“新建服务器”。 3. 创建连接 填写服务器属性对话框，以创建到PostgreSQL服务器的连接。请务必输入正确的服务器名称和登录凭据。 4. 创建数据库 右键单击服务器并选择“新建数据库”。在“新建数据库”对话框中，输入数据库名称并选择“PostGIS”作为模板。 5. 创建表 在新创建的数据库上右键单击，选择“新建查询工具”。在查询工具中，输入SQL命令以创建表。例如，以下命令将在数据库中创建一个名为“cities”的表： ``` CREATE TABLE cities ( id SERIAL PRIMARY KEY, name VARCHAR(50), location GEOMETRY(Point, 4326) ); ``` 6. 导入数据 您可以使用pgadmin4的导入工具将数据导入到表中。右键单击表并选择“导入/导出”，然后选择要导入的文件。 7. 可视化数据 在pgadmin4中，右键单击表并选择“查看/编辑数据”。这将打开一个表格，其中包含表中的数据。您可以使用此表格可视化您的数据。 8. 使用PostGIS扩展 PostGIS提供了很多地理空间函数，可以方便地分析和可视化地理数据。例如，以下命令将在PostGIS中计算“cities”表中所有城市之间的距离： ``` SELECT a.name, b.name, ST_Distance(a.location, b.location) AS distance FROM cities AS a, cities AS b WHERE a.id < b.id; ``` 这是一些基本步骤，您可以使用pgadmin4和PostGIS进行数据表的可视化和分析。根据您的需求，可能需要更多的操作和配置。 ### 回答2： 使用pgAdmin 4和PostGIS可以轻松地进行数据表的可视化和操作。 首先，确保已经安装了PostgreSQL数据库以及pgAdmin 4。在pgAdmin 4中，创建一个新的数据库连接，将连接到已经安装好PostgreSQL的服务器。通过输入正确的主机、端口、用户名和密码来建立连接。 接下来，创建一个新的数据库，右键点击服务器，选择"创建"->"数据库"，并设置数据库的名称和所有者。点击保存后，新的数据库就会被创建。 然后，在创建的数据库中启用PostGIS扩展。右键点击数据库，选择"查询工具"来打开查询窗口，然后运行以下命令来启用PostGIS扩展： CREATE EXTENSION postgis; 完成后，会在数据库中创建spatial_ref_sys系统表和一些其他的函数和视图。 现在，可以开始创建数据表了。右键点击数据库，选择"创建"->"表"，然后在弹出窗口中输入表的名称、列的名称和数据类型。在定义列时，可以选择适当的地理或几何数据类型，如POINT，LINESTRING等。点击保存后，数据表就会被创建。 要在pgAdmin 4中进行数据表的可视化，可以右键点击表，选择"查看/编辑数据"，然后在弹出窗口中查看和编辑数据。在数据表的视图中，可以选择不同的选项来执行查询、插入、更新和删除操作。 除了在pgAdmin 4中可视化地查看和操作数据表外，还可以使用PostGIS的功能来进行地理数据的查询和分析。例如，可以使用ST_Distance函数计算两个点之间的距离，使用ST_Within函数判断一个点是否在一个多边形内等等。 总之，使用pgAdmin 4和PostGIS可以方便地进行数据表的可视化和操作，并结合PostGIS的功能进行地理数据的查询和分析。 ### 回答3： PgAdmin是一个开源的基于Web的数据库管理工具，可以用于管理和操作PostgreSQL数据库。PostGIS是一个开源的地理信息系统（GIS）扩展，用于在PostgreSQL数据库中存储和处理地理空间数据。 要使用PgAdmin和PostGIS进行数据表的可视化，首先需要在PostgreSQL数据库中安装和配置PostGIS扩展。然后，可以使用PgAdmin连接到PostgreSQL数据库，创建新的数据库或使用现有的数据库。 在PgAdmin中，可以使用SQL工具或查询工具来执行SQL语句，包括创建表、插入数据、查询和更新数据等操作。例如，可以通过执行CREATE TABLE语句创建新的数据表，并使用INSERT语句将数据插入到表中。 要进行数据表的可视化，可以使用PgAdmin提供的可视化功能。在PgAdmin的对象树视图中，可以展开数据库和表，查看和编辑表结构、查看数据以及执行各种操作。 此外，PgAdmin还支持地理空间数据的可视化和分析。可以使用PgAdmin的地理信息系统工具来展示地理空间数据，如地图、图表和统计数据等。可以使用地理信息系统工具查询和分析地理空间数据，如计算距离、面积和缓冲区等操作。 通过使用PgAdmin和PostGIS，你可以方便地进行数据表的可视化和地理空间数据的处理。无论是在专业的GIS应用程序中还是在日常的数据管理工作中，这些工具都提供了强大的功能和简单易用的界面，帮助你更好地管理和分析数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值