设备地图可用于在地图上标示设备,并根据地理位置显示设备的属性数据。该组件支持在设备地图编辑器中配置设备数据和展示样式。本文介绍了设备地图组件的配置和使用方法。

前提条件

参考以下操作完成Web应用创建。
  1. 创建项目
  2. 创建Web应用

操作步骤

本文主要介绍组件样式的个性配置。有关组件样式的通用配置,请参见样式配置

  1. 在Web可视化编辑页面,单击最左侧的组件图标组件
  2. 在画布左侧组件下拉列表,选择基础组件,并展开空间列表。
  3. 拖拽一个设备地图组件到画布中,单击右侧样式栏的编辑设备地图
    设备地图
  4. 设备地图编辑器页面的设备数据配置面板,配置地图需要展示的设备(见下表)。
    设备地图编辑器
    配置项 描述
    选择产品 选择Web应用所属项目下需要地图展示的产品,支持多选。

    组件自动导入所选产品下的所有设备。

    您也可以多次选择产品,或修改已选择的产品。

    注意 您必须为所选产品配置地理信息,否则设备在地图上是不可见的。
    n个产品/m个设备 选择产品后,设备数据配置面板显示所选产品和设备数量和产品列表。

    如果已添加产品下有设备缺少了坐标,页面右侧会显示缺少坐标的提示信息。

    鼠标移动到右侧的提示按钮,可查看配置设备坐标的多种方式。

    可在产品列表中执行以下操作:

    • 单击各产品右侧的设置按钮设置,设置各产品下设备在地图上的显示效果。详细内容请参见本文下方配置设备样式
    • 单击删除按钮删除,删除该产品。
    批量导入设备坐标 当已添加产品下有设备缺少坐标时,出现该参数。执行以下操作:

    单击批量导入设备坐标,上传已填写好位置的Excel文件,则设备地图中显示对应设备的位置。

    如果需要清除设备位置,您可以在Excel文件对应设备后删除位置一列的值,然后重新上传该Excel文件即可。

    说明 如果Excel文件和设备的坐标属性都记录了设备经纬度,会以设备坐标属性上报的位置为准。
    下载坐标数据模板 当已添加产品下有设备缺少坐标时,出现该参数。执行以下操作:
    1. 单击下载坐标数据模板,下载一个Excel文件,该文件包含已添加产品和所有设备对应的ProductKey、DeviceName和位置。
    2. 在位置一列填写对应设备的经纬度(可使用高德开放平台经纬度拾取工具)并保存文件。
      说明 将设备的经纬度以英文逗号(,)分隔,逗号前填写经度,逗号后填写维度。
    支持设备控制 选中复选框,开启设备控制功能。默认未选中。

    开启该功能后,您可以通过设备气泡中的控制模式来下发设备操作指令。详细内容请参见下一步操作。

  5. 完成设备数据中各产品下设备样式配置后,单击最右侧的功能菜单地图展示,参见下表配置地图全局展示样式。
    地图展示
    配置项 描述
    交互项显示 设置地图的交互功能项。 支持多选,可选:
    • 全局设备最后更新时间:选中复选框,在地图左上方显示设备最后更新时间:yyyy-mm-dd hh:mm:ss。
    • 设备选择框:选中复选框,在地图左上方显示设备下拉框。默认显示全部设备。
    • 卫星地图切换:选中复选框,在地图右上角显示卫星地图开启/关闭按钮。默认关闭。
    地图背景 设置地图的显示背景模式。编辑器中有6个不同的地图背景,默认显示标准模式地图。
    默认设备点样式 设置地图上全局设备点图标的颜色、大小、不透明度和使用图标。 配置方法与单产品一致,详细说明请参见本文下方配置设备样式

    全局默认设备点样式配置仅对新增产品设备生效。

    聚合点样式 聚合点可显示产品的设备列表,包含设备名称和查看操作。支持设置表格背景和字体颜色。
    • 如果设备数据添加了多个产品,设备列表上方显示可选择产品的下拉列表,默认显示所有产品。
    • 单击设备对应的查看,可打开设备气泡,显示样式与已配置的气泡样式一致。
    设置气泡样式 设置设备点汽包展示属性数据的样式。设备地图编辑器中提供了4种气泡样式。默认为浅色表格气泡。

    如果产品开启了设备控制功能,或物模型定义了控制属性,表格气泡中显示控制模式按钮。支持下发设备操作指令:单击控制模式,修改设备属性值,单击发送到设备

  6. 单击页面右上角的保存图标保存
    完成设备地图的展示配置。
  7. 返回到Web可视化编辑页面,选中设备地图组件,并单击组件左上方的刷新按钮。
    画布中展示配置的地图,若需要体验交互动作,请执行下一步。
  8. 可选: 单击页面右上方的预览,查看或调试组件的展示数据。

配置设备样式

在某个产品的样式配置面板中,根据配置项说明(见下表),完成指定产品下设备的展示样式。

单产品设备样式
配置项 描述
默认设备点样式 设置设备点图标的颜色、大小、不透明度和使用的图标。 默认和全局默认设备点配置一致,支持修改。

可选图标:

  • 系统图标:默认选择第一个系统图标,您可根据实际场景更换图标。
  • 自定义图标:默认无自定义图标。单击右侧的添加按钮,导入自定义的SVG格式的图标。
    说明
    • 单产品中添加的自定义图标会自动同步到该项目下所有全局地图展示的自定义图标中。
    • 如果产品选中了某个自定义图标,在添加按钮左侧出现删除按钮。
    • 如果某个产品选中的自定义图标被删除,则该产品下设备显示系统默认图标。
汽包属性展示 设置设备点汽包展示的属性项。

单击配置属性,可在配置属性展示对话框中选择目标属性。支持多选。

选择属性后,支持删除功能。如果选择了多个属性,支持通过拖拽调整各属性前后位置。

说明 如果单产品中默认设备点样式的配置与全局地图展示中的配置不一致,则展示各产品下配置的默认设备点样式