• 创建设备:参考 创建设备的三种模式 (1.1-1.3)

    • 发布数据到设备:发布车辆经纬度数据到thingsboard,真实情况应该是车辆上安装有GPS实时发布数据。以下为python模拟数据。 ```python import paho.mqtt.client as paho import json import time import random access = “CUVLtidGqCTVj3LeD05I” borker = ‘www.vincentisme.com’ port = 1883 def on_publish(client, userdata, result): print(time.time()) print(“sending…”) def on_connect(client, userdata, flag, rc): print(str(rc)) print(“connected”) test = paho.Client(“device1”) test.on_publish = on_publish test.on_connect = on_connect test.username_pw_set(access) test.connect(borker, port, keepalive=60) test.loop_start() i=0 while True: data = {

      1. "Speed": random.randint(0, 140), # 随机生成车辆的速度
      2. "longitude": str(116.406838 + random.randint(1, 5) * 0.001+i), #从一个固定的位置增加经纬度
      3. "latitude": str(39.914063),

      } i+=0.001 test.publish(‘v1/devices/me/telemetry’, payload=json.dumps(data), qos=0) # 发布数据 time.sleep(5) # 5秒发布一次数据

    1. - 创建仪表板:
    2. 1.创建一个仪表板,并创建实体别名,引入设备。<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/21753492/1622707128460-e1882895-875b-41ce-815b-b57d9174787d.png#align=left&display=inline&height=421&margin=%5Bobject%20Object%5D&name=image.png&originHeight=841&originWidth=1911&size=894062&status=done&style=none&width=955.5)
    3. - 创建腾讯地图路径组件
    4. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21753492/1622707248137-211179a6-8def-4af4-92da-597f18f7cb65.png#align=left&display=inline&height=392&margin=%5Bobject%20Object%5D&name=image.png&originHeight=784&originWidth=1248&size=238826&status=done&style=none&width=624)![image.png](https://cdn.nlark.com/yuque/0/2021/png/21753492/1622707271955-0487cf48-0573-4458-86af-bda3969918a1.png#align=left&display=inline&height=404&margin=%5Bobject%20Object%5D&name=image.png&originHeight=808&originWidth=1246&size=412267&status=done&style=none&width=623)
    5. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21753492/1622707327256-10bf1132-977f-4821-891b-922a430a84e5.png#align=left&display=inline&height=356&margin=%5Bobject%20Object%5D&name=image.png&originHeight=711&originWidth=1253&size=72610&status=done&style=none&width=626.5)<br />高级设置:路径颜色定义<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/21753492/1622707408741-67f469d6-c93e-471c-b54f-6f153074183b.png#align=left&display=inline&height=185&margin=%5Bobject%20Object%5D&name=image.png&originHeight=369&originWidth=1214&size=48377&status=done&style=none&width=607)<br />图标颜色定义,当超速的时候显示红色图标<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/21753492/1622707433465-8db5d60f-afc0-4c99-a957-b1b32cc1bd28.png#align=left&display=inline&height=182&margin=%5Bobject%20Object%5D&name=image.png&originHeight=363&originWidth=1206&size=40784&status=done&style=none&width=603)<br />show label:
    6. ```css
    7. <div style="position: relative; white-space: nowrap;text-align: center; font-size: 14px;top:5px"><span style="border: 2px solid #000;border-radius: 10px; color: #000;background-color: #fff;padding-left: 5px;padding-right: 5px; padding-top: 3px;padding-bottom: 3px">${entityName}</span></div>

    auto close label

    1. <div style='font-size: 13px;'><b>${entityName}</b><br/><br/><b>Latitude:</b> ${latitude:7}<br/><b>Longitude:</b> ${longitude:7}<br/><b>Speed:</b> ${Speed} km/s<br/><br/><link-act name='write data123'> 去看详细数据${entityName} details</link-act><br/></div>
    var speed = dsData[dsIndex]['Speed'];
    var res = {
        url: images[0],   //定义的图标,0为第一个
        size: 55
    };
    if (typeof speed !== undefined) {
        var percent = (speed - 45)/85;   //
        if(percent<0){    //速度小于45的时候,防止出现负数,负数取不到图标。
            percent=0;
        }
        var index = Math.min(2, Math.floor(3 * percent));
        res.url = images[index];     //根据不同的速度取不同的图标动态展示
    }
    return res;
    

    结果:
    image.png