前端使用二开Thingsboard一、二、三事(五)-仪表板(八)

最新推荐文章于 2025-05-08 11:38:30 发布
最新推荐文章于 2025-05-08 11:38:30 发布
阅读量218 收藏
点赞数
分类专栏： thingsboard、物联网、IOT 文章标签： 前端 iot 物联网 angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43163457/article/details/135993197
版权
本文详细介绍了在前端二开Thingsboard中使用地图部件展示经纬度、配置高级设置，包括数据源、标签样式和颜色，以及如何实现历史轨迹回放。强调了数据的准确性对定位展示的重要性，并提供了地图部件类型的选取建议。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

logo

前端使用二开Thingsboard一、二、三事(五)-仪表板(八)

thingsboard之仪表板

九、地图部件

说一下地图部件，地图部件也就是将获取的经纬度在地图上进行打点展示，也可以进行历史轨迹回放，甚至可以实现实例图上定点信息添加展示，thingsboard中地图种类很很多种，有谷歌地图、HERE地图、腾讯地图等，目前国内应该是只能使用腾讯地图来实现定位功能
在这里插入图片描述

9.1地图部件中的数据

部件中的数据来源一定是有定位芯片的设备，比如各种手机终端、汽车等，数据键中一定要有 latitude和 longitude，只有有经纬度后才能实现定位功能，除了经纬度当然也可以添加其他数据，这些数据在提示框中可以进行展示

了解本专栏 订阅专栏 解锁全文 超级会员免费看
前端使用二开Thingsboard一、二、三事(五)-仪表板(二)
weixin_43163457的博客
02-19 439
以项目实战为基础，逐步介绍前端在thingsboard系统二次开发中的一些注意事项以及一些thingsboard一些页面功能讲解，为前端人员开发使用thingsboard提供一种可靠思路，打造一个完美的物联网系统。
前端使用二开Thingsboard一、二、三事（一）-thingsboard介绍
weixin_43163457的博客
02-18 708
以项目实战为基础，逐步介绍前端在thingsboard系统二次开发中的一些注意事项以及一些thingsboard一些页面功能讲解，为前端人员开发使用thingsboard提供一种可靠思路，打造一个完美的物联网系统。
ThingsBoard入门实战（五）：设备详情面板
AIGC搞起
12-10 5301
设备详情面板设备面板:详情一、地图二、地图部件添加部件修改Marker图标修改弹框三、下一步 设备面板:详情 一个炫酷的详情页怎么能少得了地图呢？ Thingsboard很贴心的为我们内置了地图的部件库。 一、地图 地图显示的核心是位置信息，也就是我们常听到的坐标， 坐标系是坐标产生的参考背景，常见坐标系如下： GCJ-02 高德地图、腾讯地图以及谷歌中国区地图使用的是GCJ-02坐标系 BD-09 百度地图使用的是BD-09坐标系 WGS-84 底层接口 (HTML5 Geolocation或ios、安
ThingsBoard添加高德地图
热门推荐
物联网三分钟
04-19 4万+
文章目录资料说明接入高德地图定义高德地图ts地图提供集合中加入高德地图添加高德地图个性化设置绑定高德地图到地图部件包效果演示 文章以高德地图作为例子,但不限于高德地图,同样的方式百度地图,智图地图等都可以接入 资料 leafletjs文档 说明 ThingsBoard使用leaflet加载地图,而且大部分地图相关的方法都封装在 ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts 如:添加标记 设置经纬度 删除标记
thingsboard3.8的运行使用——定位器遥感数据的地图展示
宁波阿成的博客
10-15 759
thingsboard3.8的运行使用——定位器遥感数据的地图展示
ThingsBoard使用笔记（4）创建资产并在地图上显示
行天际的博客
07-30 7128
书接上篇博文 ThingsBoard使用笔记（1) 安装 ThingsBoard使用笔记（2）模拟传感器发送MQTT并显示监控图表 ThingsBoard使用笔记（3）模拟控制远程温度传感器 1.创建资产 2.添加资产属性 给资产添加地址，坐标等属性，准备在地图上显示 3.资产间关联 选择资产【科技大厦】，把另外两个资产【一楼，二楼】添加进来 4.资产与硬件关联...
thingsboard使用地图和表可视化资产数据~看完还不会 你pan我
Panther
10-15 6674
前提要求 成功运行tb,如果运行不通可以看我以前的博客，照着我的博客运行出可视化地图一点问题都没有
前端使用二开Thingsboard一、二、三事(五)-仪表板(六)
weixin_43163457的博客
03-04 407
以项目实战为基础，逐步介绍前端在thingsboard系统二次开发中的一些注意事项以及一些thingsboard一些页面功能讲解，为前端人员开发使用thingsboard提供一种可靠思路，打造一个完美的物联网系统。
前端使用二开Thingsboard一、二、三事(二)-设备
weixin_43163457的博客
02-18 232
登录Thingsboard后，进入的第一个页面便是首页，首页展示分为两部分，默认展示的是快捷入口模块点击模块便可进入相应的侧边栏页面，默认显示模块个数与侧边栏展示列一般相同，展示内容可在代码中进行删减，具体操作在上一章中已做介绍，此处不再累述，除了默认展示外，还可根据用户需求制作数据展示首页，如下图：怎么制作数据展示页面是个复杂的过程(二次开发主要集中在这里)，之后会单独讲，此处先说如何切换默认首页和数据展示首页。
前端使用二开Thingsboard一、二、三事(五)-仪表板(一)
weixin_43163457的博客
02-21 309
以项目实战为基础，逐步介绍前端在thingsboard系统二次开发中的一些注意事项以及一些thingsboard一些页面功能讲解，为前端人员开发使用thingsboard提供一种可靠思路，打造一个完美的物联网系统。
thingsboard仪表间数据传递
qq_16767507的博客
09-21 936
thingsboard仪表间数据传递操作
Thingsboard规则链：GPS Geofencing Filter节点详解
可乐要加冰！！！
05-27 907
节点是物联网应用中实现空间智能化的强有力工具，其灵活性和实用性在多个行业中展现出巨大潜力。通过深入理解和正确配置，企业和开发者能够构建出更加智能、高效、安全的物联网解决方案。随着技术的不断演进，未来GPS Geofencing Filter的应用领域还将持续拓展，带来更多创新可能。
Thingsboard PE智慧运维仪表板实例（二）【智慧排口截污实例】
weixin_67440240的博客
04-10 1155
ThingsBoard 的仪表板是一个用于可视化和监控物联网数据的重要组件。 它具有以下特点： 1. 可定制性：用户可以根据自己的需求创建各种类型的图表、表格和指标。 2. 数据可视化：以直观的方式展示设备数据，帮助用户快速了解系统状态。 3. 实时更新：实时反映设备的最新数据。
ThingsBoard学习笔记二：采集设备数据以及可视化展示
程序员小H
12-20 6266
1、登录租户管理帐号 租户帐号：tenant@thingsboard.org 租户密码：tenant 2、添加设备 打开设备面板（Devices)点击右下角“+” 填写并保存设备名称(例如，“SN-001”)。下文中被称作$DEVICE_NAME。设备名称必须是唯一的。建议根据惟一的序列号或其他设备标识符填写设备名称。单击“添加”按钮将向面板添加相应的设备卡。 点击上一步骤中创建的“de...
thingsBoard去除地图logo
qq_42243383的博客
03-29 352
thingsBoard右下角有一个logo，这个是我们不需要的，去掉方法如下。在编辑模式下，部件卡片中加入如下样式。
ThingsBoard3.9.1集成高德地图详细步骤+代码(最新版!!!)
最新发布
hssjf的专栏
05-08 806
thingsboard3.9.1/4.0版本集成高德地图的方案和修改代码。
Thingsboard创建完地图组件后，未显示地图信息
m0_65471288的博客
11-07 630
thingsboard地图组件
Thingsboard 可视化 -- 地图部件及车联网
l_h_y123的专栏
10-15 3279
先来一张图，看看实现效果，Thingsboard3.1目前支持腾讯地图、谷歌地图、opensteet地图、诺基亚here地图、image 地图，国内我们用不了谷歌，下面的示例使用腾讯地图，前几天在社区群里有人问过腾讯地图的定位图片用的是谷歌的，国内用不了，我试了一下还真是，但是tb的地图提供了更换图标的功能，所以我们使用不用担心。 下面说一下使用流程。 1，完成设备接入，我有一辆摩托车，上面可以定时采集上报gps经纬度、时速等信息，我这里使用了mqtt直连tb的方式完成设备接入。 mqtt ser
mqtt（10）：安装 debian xface 系统，搭建golang 环境，开发iot边缘网关
freewebsys的专栏
04-23 2184
前言 本文的原文连接是: https://blog.youkuaiyun.com/freewebsys/article/details/81665552 未经博主允许不得转载。 博主地址是：http://blog.youkuaiyun.com/freewebsys 1，关于debian 在服务器上面 centos 非常的不错，但是感觉还不是很精简， 2，使用 3，总结 本文的原文连接是: https://blog...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_43163457

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值