ThingsBoard添加高德地图_thingsboard 高德地图-CSDN博客

本文链接：https://blog.csdn.net/m0_37893932/article/details/115863738

本文介绍了如何在ThingsBoard中接入高德地图，通过定义高德地图的 TypeScript 类，将其加入地图提供集合，并进行个性化设置。最后，通过 SQL 插入到 widget_type 表中，实现高德地图在 ThingsBoard 的地图部件包中的显示。

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

文章目录

资料
说明
接入高德地图
绑定高德地图到地图部件包
效果演示

文章以高德地图作为例子,但不限于高德地图,同样的方式百度地图,智图地图等都可以接入

资料

leafletjs文档

说明

ThingsBoard使用leaflet加载地图,而且大部分地图相关的方法都封装在
ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
如:添加标记 设置经纬度 删除标记 多边形相关操作``折线相关操作
在这里插入图片描述
所有地图都继承自LeafletMap如下图所示

地图的个性化设置都定义在
ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts
这里面定义的就是react-schema-form的信息,不懂的看专栏另一篇介绍Settings schema的文章.
关于leafletjs不懂的看简书链接:leaflet地图介绍
接下来开始接入

接入高德地图

定义高德地图ts

在ui-ngx/src/app/modules/home/components/widget/lib/maps/providers文件夹下新增TypeScript类

import L from 'leaflet';
import LeafletMap from '../leaflet-map';
import {
    DEFAULT_ZOOM_LEVEL, UnitedMapSettings } from '../map-models';
import {
    WidgetContext } from '@home/models/widget-component.models';
/**
 * 高德地图
 */
export class Amap extends LeafletMap {
   
  constructor(ctx: WidgetContext, $container, options: UnitedMapSettings) {
   
    super(ctx, $container, options);
    const txUrl = 'http://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8';
    const map = L.map($container, {
   
      editable: !!options.editablePolygon
    }).setView(options?.defaultCenterPosition, options?.defaultZoomLevel || DEFAULT_ZOOM_LEVEL);
    const txLayer = L.tileLayer(txUrl, {
   
      subdomains: '1234',
      attribution: '©2021 高德软件 GS(2019)6379号 - 甲测资字11002004 - 京ICP证 070711号 - '
    }).addTo(map);
    txLayer.addTo(map);
    super.initSettings(options);
    super.setMap(map);
  }
}

地图提供集合中加入高德地图

ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/index.ts中加入高德地图,取名a-map

export const providerSets: {
    [key: string]: IProvider } = {
   
  'openstreet-map': {
   
    MapClass: OpenStreetMap,
    schema: openstreetMapSettingsSchema,
    name: 'openstreet-map'
  },
  'tencent-map': {
   
    MapClass: TencentMap,
    schema: tencentMapSettingsSchema,
    name: 'tencent-map'
  },
  'a-map': {
   
    MapClass: Amap,
    schema: aMapSettingsSchema,
    name: 'a-map'
  },
  'google-map': {
   
    MapClass: GoogleMap,
    schema: googleMapSettingsSchema,
    name: 'google-map'
  },
  here: {
   
    MapClass: HEREMap,
    schema: hereMapSettingsSchema,
    name: 'here'
  },
  'image-map': {
   
    MapClass: ImageMap,
    schema: imageMapSettingsSchema,
    name: 'image-map'
  }
};

添加高德地图个性化设置

ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts
中接入高德地图相关的个性化设置(小部件编辑时的高级设置)

export const aMapSettingsSchema =
  {
   
    schema: {
   
      title: '高德地图配置',
      type: 'object',
      properties: {
   
        tmApiKey: {
   
          title: '高德地图 API Key',
          type: 'string',
          default: '84d6d83e0e51e481e50454ccbe8986b'
        },
        tmDefaultMapType: {
   
          title: 'Default map type',
          type: 'string',
          default: 'roadmap'
        }
      },
      required: []
    },
    form: [
      'tmApiKey',
      {
   
        key: 'tmDefaultMapType',
        type: 'rc-select',
        multiple: false,
        items: [
          {
   
            value: 'roadmap',
            label: 'Roadmap'
          },
          {
   
            value: 'satellite',
            label: 'Satellite'
          },
          {
   
            value: 'hybrid',
            label: 'Hybrid'
          },
        ]
      }
    ]
  };

绑定高德地图到地图部件包

ThingsBoard的postgres数据库表widget_bundle是部件包
widget_type是小部件信息及小部件和部件包的对应关系
将下面sql插入Postgres的widget_type表中,刷新页面就可以加载到高德地图了
第一条sql是最新数据高德地图
第二条sql是时序数据高德地图

INSERT INTO widget_type (id, created_time, alias, bundle_alias, descriptor, name, tenant_id) VALUES ('ac5009a1-87bc-11eb-9af3-33d602ee9fb3', 1618281154856, 'amap_maps', 'maps_v2', '{"type":"latest","sizeX":9,"sizeY":6,"resources":[],"templateHtml":"","templateCss":".error {\n    color: red;\n}\n.tb-labels {\n  color: #222;\n  font: 12px/1.5 \"Helvetica Neue\", Arial, Helvetica, sans-serif;\n  text-align: center;\n  width: 200px;\n  white-space: nowrap;\n}","controllerScript":"self.onInit = function() {\n    self.ctx.map = new TbMapWidgetV2(''a-map'', false, self.ctx);\n}\n\nself.onDataUpdated = function() {\n    self.ctx.map.update();\n}\n\nself.onResize = function() {\n    self.ctx.map.resize();\n}\n\nself.getSettingsSchema = function() {\n    return TbMapWidgetV2.settingsSchema(''a-map'');\n}\n\nself.getDataKeySettingsSchema = function() {\n    return TbMapWidgetV2.dataKeySettingsSchema(''a-map'');\n}\n\nself.actionSources = function() {\n    return TbMapWidgetV2.actionSources();\n}\n\nself.onDestroy = function() {\n}\n\nself.typeParameters = function() {\n    return {\n        hasDataPageLink: true\n    };\n}","settingsSchema":"{}","dataKeySettingsSchema":"{}\n","defaultConfig":"{\"datasources\":[{\"type\":\"function\",\"name\":\"First point\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"latitude\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue || 15.833293;\\nif (time % 5000 < 500) {\\n    value += Math.random() * 0.05 - 0.025;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"longitude\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.24727730589425012,\"funcBody\":\"var value = prevValue || -90.454350;\\nif (time % 5000 < 500) {\\n    value += Math.random() * 0.05 - 0.025;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"temperature\",\"color\":\"#f44336\",\"settin