激光扫地机地图 UI API

更新时间：2022-05-27 11:40:15下载pdf

本文主要介绍扫地机面板 SDK 中激光地图 UI 的相关接口。

TYRCTLaserMap

激光扫地机地图组件。

使用示例

<TYRCTLaserMap {...props} />

组件属性

属性中出现的所有颜色，都是十六进制的 ARGB 格式。前 2 位表示透明度，后 6 位表示颜色。例如，#ff000000 表示黑色，透明度为 1。

字段名	类型	描述	默认值
width	number	地图组件宽度	/
height	number	地图组件高度	/
minZoomScale	number	地图最小放大倍数	1.0
maxZoomScale	number	地图最大放大倍数	/
mapData	Object	地图详细数据	/
factorInfo	Object	米数显示信息	/
pathWidth	number	路径宽度	/
pathColor	string	路径颜色	/
pathData	string	路径详细数据	/
planPathWidth	number	规划路径宽度	/
planPathColor	string	规划路径颜色	/
planPathData	string	规划路径详细数据	/
markerIcon	string	扫地机的图片	/
pilePosition	Object	充电桩的详细信息	/
pileIcon	string	充电桩的图片	/
edit	boolean	编辑模式	false
appointIcon	string	指哪扫哪的图片	/
minAreaWidth	number	划区框/禁区框的最小边长	/
isRotate	boolean	禁区框是否支持旋转	/
scale	Object	地图按某一点缩放的比例	/
hasTypeMap	boolean	是否使用新的绘图协议	false
areaInfoList	string	虚拟区域详细数据	/
splitColor	string	分割线的颜色	/

width

地图组件宽度。

height

地图组件高度。

minZoomScale

地图最小放大倍数，默认 1.0。

maxZoomScale

地图最大放大倍数。

mapData

地图详细数据。

分区属性标签分为两种类型：

不可折叠标签：直接显示属性标签。
可折叠标签：可通过点击分区，展开或关闭属性标签。

如果采用不可折叠类型，则不需要 roomInfo 中的可选属性，反之则需要。

分区信息 roomInfo 包含两种分区 ID：

hex id，也就是十六进制 ID，与地图像素点对应。
room id，十进制，表示分区的唯一标识。

示例

{
  // 地图宽度
  width: 255.0,
  // 地图高度
  height: 255.0,
  // 地图像素点,2 个十六进制数表示 1 个像素点
  data: 'f3f3f3f3f3f3f3f3f3f0f0f0f0f0......f3f3f3f3',
  // 地图原点坐标
  origin: {
    x: 0,
    y: 0
  },
  // 分区颜色信息,类型为 json 字符串
  roomIdColorMap: "{f3:'#88001122',f0:'#88334455'}",
  // 分区详细信息,存储了每种像素点的详细信息
  roomInfo: {
    // key与data中的像素点对应
    f3: {
      // 清扫顺序
      defaultOrder: 0,
      // 详细信息,类型为 json 字符串
      extend:"{roomId:3,normalColor:'#FF218BFC',highlightColor:'#FF007AFC',name:'room1',fan:'0',order:'0',water_level:'0',sweep_count:'1',mop_count:'0',sweep_forbiden:'0',mop_forbidden:'0',y_mode:'255',vertexData:[]}",
      // 分区高亮时的颜色,主要用于分区合并、分区分割和设置清扫顺序时高亮选中的分区
      highlightColor: '#ff007afc',
      // 是否折叠分区属性标签 - 可选,用于可折叠标签
      isFoldable?: false,
      // 分区名 - 可选,用于可折叠标签
      name?: 'room1',
      // 分区颜色
      normalColor: '#ff218bfc',
      // 分区名称文本颜色 - 可选,用于可折叠标签
      roomNameTextColor?: '#ff000000',
      // 分区属性,其中包括水量图标、吸力图标和清扫次数文本
      roomProperty: [
        {
          0: {
            propertyType: 'uri',
            value: 'https://images.tuyacn.com/app/robot/png/Water_close.png'
          },
          1: {
            propertyType: 'uri',
            value: 'https://images.tuyacn.com/app/robot/png/Fan_1.png'
          },
          2: {
            propertyType: 'text',
            value: '×1'
          }
        }
      ],
      // 分区属性标签背景颜色 - 可选,用于可折叠标签
      roomPropertyBgColor?: "#80225344",
      // 分区属性标签是否可折叠 - 可选,用于可折叠标签
      roomPropertyStyle?: "foldable",
  		// 分区属性标签文本颜色 - 可选,用于可折叠标签
      roomPropertyTextColor?: "#FFFFFFFF"
    }
  },
	// 虚拟物体详细信息,类型为 json 字符串
	materialObject: "{}",
	// 总像素点,width * height
	pointCount: 65025,
	// 地毯详细信息
	textureObject: "[{url:'https://images.tuyacn.com/app/robot/png/carpet1.png',pointList:[],width:255,height:255}]"
}

factorInfo

米数显示信息。

示例

{
  factor: 0.05, // 比例尺
  font: 10, // 字体大小
  color: '#ff000000' // 字体颜色
}

pathWidth

路径宽度。

pathColor

路径颜色。

pathData

路径详细信息，类型为 json 字符串。

其中，路径点分为 3 种类型：普通类型 (common)、转场类型 (transitions)、回充类型 (charge)。

路径的最后一个点表示扫地机，即当前点。其中除坐标和类型以外，还包括一些额外信息。

示例

[
  {
    x: 1,
    y: 1,
    type: 'transitions'
  },
  {
    x: 1,
    y: 2,
    type: 'common'
  },
  {
    x: 1,
    y: 3,
    type: 'charge'
  },
  {
    // 坐标
    x: 1,
    y: 2,
    // 类型
    type: 'transitions',
    // 路径类型对应的颜色
    dataColors: {common: '#ffffffff', charge: '#00000000', transitions: '#ffffd700'},
    // 呼吸圈的颜色
    bgColor: "#7f000000",
    // 呼吸圈闪烁的频率
    duration: 2,
    // 是否隐藏呼吸圈
    hidden: false,
    // 呼吸圈闪烁时的最大半径
    rate: 2
  },
]

planPathWidth

规划路径宽度。

planPathColor

规划路径颜色。

planPathData

规划路径详细数据，同 pathData。

markerIcon

扫地机的图片地址。

示例

http://xxxxxxxxxx

pilePosition

充电桩的详细信息。

在编辑禁区框或虚拟墙时，一般需要显示预警圈，以提示禁区框/虚拟墙与充电桩的最短距离。从而，避免禁区框/虚拟墙覆盖充电桩，导致扫地机始终无法回到充电桩进行充电。

示例

{
  // 坐标
  x: 10,
  y: 10,
  // 是否隐藏预警圈
  hidden: false,
  // 预警圈的半径
  radius: 30,
  // 预警圈边框的颜色
  borderColor: '#ff333333',
  // 预警圈的颜色
  bgColor: '#ff333333'
}

pileIcon

充电桩的图片地址。

示例

http://xxxxxxxxxx

edit

编辑模式，表示地图是否处于可编辑状态。

例如，处于划区清扫、选区清扫、编辑虚拟区域时，需要选择分区或者编辑划区框/禁区框/虚拟墙。此时需要将 edit 设置为 true。

appointIcon

指哪扫哪图标地址。

示例

http://xxxxxxxxxx

minAreaWidth

划区框、禁区框的最小边长。

isRotate

禁区框是否支持旋转。

scale

地图按某一点缩放比例，用于特殊的视觉地图。

示例

{
  // 默认值为 1.0
  scale: 1,
  // 可选
  x?: 1,
  // 可选
  y?: 1
}

hasTypeMap

是否采用新的绘图协议。

areaInfoList

虚拟区域的详细数据，类型为 json 字符串。

虚拟区域一共分为 5 种类型：

扫拖禁区框
拖地禁区框
虚拟墙
划区清扫框
指哪扫哪点

不同类型的虚拟区域，其属性也不同，主要使用 type 来区分，如列表所示。

虚拟区域名称	`type` 属性值
扫拖禁区框	`3`
拖地禁区框	`3`
虚拟墙	`4`
划区清扫框	`2`
指哪扫哪点	`1`

其中，扫拖禁区框和拖地禁区框的 type 值相同，主要依靠 extend 属性中的 forbidType 来分区。

示例

[
  // 扫拖禁区框
  {
    box: {
      // 框的背景颜色
      bgColor: '#7ff81c1c',
      // 边框的颜色
      borderColor: '#ffffffff'
    },
    content: {
      // 禁区的名称
      text: '',
      // 名称文本的颜色
      textColor: '#ff000000',
      // 名称字体的大小
      textSize: 12,
      // 是否可重命名
      renameEnable: false
    },
    // 额外信息
    extend: "{forbidType:'sweep'}",
    // 唯一标识
    id: '1',
    // 坐标
    points: [
      {x: 126, y: 165},
      {x: 164, y: 202},
      {x: 129, y: 238},
      {x: 91, y: 201}
    ],
    // 类型
    type: 3,
    viewType: ''
  },
  // 拖地禁区
  {
    box: {
      bgColor: '#7f4685ff',
      borderColor: '#ffffffff'
    },
    content: {
      text: '',
      textColor: '#ff000000',
      textSize: 12,
      renameEnable: false
    },
    extend: "{forbidType:'mop'}",
    id: '2',
    points: [
      {x: -20.9, y: 16},
      {x: 54.7, y: 17.3},
      {x: 53.6, y: 81.4},
      {x: -22, y: 80.1}
    ],
    type: 3,
    viewType: ''
  },
  // 虚拟墙
  {
    // 额外信息,虚拟墙需要有 isWall:true 属性
    extend: "{forbidType:'sweep',isWall:true}",
    id: '3',
  	line: {
      // 线段的颜色
  		bgColor: '#fff81c1c',
      // 线段的宽度
  		lineWidth: 2
  	},
    points: [
      {x: 182, y: 104},
      {x: 298, y: 103}
    ],
    type: 4,
    viewType: ''
  },
	// 划区框
	{
    box: {
      bgColor: '#7f4685ff',
      borderColor: '#ffffffff'
    },
    content: {
      text: '',
      textColor: '#ffffffff',
      textSize: 12,
      renameEnable: false
    },
    // 划区框不需要额外信息
    extend: '{}',
    id: '4',
    points: [
      {x: 102, y: 98},
      {x: 145, y: 98},
      {x: 145, y: 142},
      {x: 102, y: 142}
    ],
    type: 2,
    viewType: ''
  },
  // 指哪扫哪
  {
    id: '5',
    points: [{x: 125, y: 125}],
    type: 1
  }
]

splitColor

地图区域分割时分割线的颜色。

组件事件

字段名	描述
onLaserMapPoints	虚拟区域实时回调事件
onMapId	创建地图组件实例后，回调 `mapId`
onLongPressInAreaView	禁区框/划区清扫框长按命名回调事件
onClickSplitArea	选区清扫时点击分区的回调事件
onClickRoom	点击分区的回调事件

onLaserMapPoints

虚拟区域实时回调事件。

移动禁区框和虚拟墙时，会触发此回调事件。主要用于处理禁区框/虚拟墙与扫地机或充电桩的距离，避免其被虚拟区域覆盖而出现一些问题。

参数

参数名称	描述
type	虚拟区域类型： `3`：禁区框 `4`：虚拟墙
data	坐标

参数示例

// 虚拟墙
{
  type: 4,
  data: [[{x: 119, y: 58}, {x: 235, y: 57}]]
}

// 禁区框
{
  type: 3,
  data: [[
    {x: 225, y: 117},
    {x: 274, y: 201},
    {x: 213, y: 238},
    {x: 164, y: 154}
  ]]
}

示例

const onLaserMapPointsFn = (data) => {
  // do something
}

<TYRCTLaserMap onLaserMapPoints={onLaserMapPointsFn} />

onMapId

创建地图组件实例后回调地图 ID (mapId)。

调用 TYRCTLaserMap 组件后，待原生将地图组件实例完成后，就会调用此事件。

其中，参数 mapId 表示该地图实例的唯一标识。

参数示例

{
  mapId: 'laser_1653444189948'
}

示例

const onMapIdFn = (data) => {
  // do something
}

<TYRCTLaserMap onMapId={onMapIdFn} />

onLongPressInAreaView

禁区框/划区清扫框长按命名回调事件。

在地图编辑状态下，长按禁区框或者划区清扫框，会触发此回调事件。主要用于重命名禁区框/划区清扫框。

参数为虚拟框的 ID。虚拟区域的详细信息，可参考组件属性中的 areaInfoList。

参数示例

{
  id: '1'
}

示例

const onLongPressInAreaViewFn = (data) => {
  // do something
}

<TYRCTLaserMap onLongPressInAreaView={onLongPressInAreaViewFn} />

onClickSplitArea

选区清扫、重命名分区、分区定制模式 3 种状态点击分区的回调事件。

当地图进入选区清扫状态时，点击分区会触发此回调事件。

参数主要包括点击分区的 id 和 extend。分区的详细信息，可参考组件属性中的 mapData - roomInfo。

参数示例

{
  type: 4,
  data: [{
    pixel: '0c',
    extend: "{roomId:3,normalColor:'#FF218BFC',highlightColor:'#FF007AFC',name:'room3',fan:'0',order:'0',water_level:'0',sweep_count:'1',mop_count:'0',sweep_forbiden:'0',mop_forbidden:'0',y_mode:'255',vertexData:[]}"
  }]
}

示例

const onClickSplitAreaFn = (data) => {
  // do something
}

<TYRCTLaserMap onClickSplitArea={onClickSplitAreaFn} />

onClickRoom

点击分区的回调事件。

点击地图分区时会触发此回调事件，主要用于折叠和展开分区属性标签。

参数包括 isFoldable 和 roomId。其中，roomId 即分区 ID。详细信息，可参考组件属性中的 mapData - roomInfo。

参数示例

{
  isFoldable: true,
  roomId: '1f'
}

示例

const onClickRoomFn = (data) => {
  // do something
}

<TYRCTLaserMap onClickRoom={onClickRoomFn} />

TYRCTLaserManager

激光扫地机地图组件 API。

TYRCTLaserManager 是旧的 API，TYRCTTypeMapManager 是最新的 API (rnVersion >= 3.25)。

方法名	描述
setLaserMapState	改变地图状态
refreshStateView	重新绘制地图
addLaserMapRectWithType	向地图添加虚拟区域
getLaserMapPoints	获取虚拟区域坐标点数据

setLaserMapState

改变地图状态。地图状态需要根据扫地机设备状态和工作模式的改变而改变。

参数

参数名	参数类型	描述
state	number	地图状态： `0`：正常状态 `1`：指哪扫哪状态 `2`：划区清扫状态 `3`：编辑禁区状态 `4`：编辑虚拟墙状态 `5`：编辑地图分区状态 `6`：地图分区选择状态
callback	function	回调函数

示例

import { NativeModules } from 'react-native';
const TYLaserManager = NativeModules.TYRCTLaserManager;

const callback = () => {
  // do something
};
TYLaserManager.setLaserMapState(0, callback); // 地图状态更改为正常状态

refreshStateView

重新绘制地图。

import { NativeModules } from 'react-native';
const TYLaserManager = NativeModules.TYRCTLaserManager;

TYLaserManager.refreshStateView()
	.then(() => {})
	.catch(err => {})

addLaserMapRectWithType

向地图添加虚拟区域。

参数

参数名	参数类型	描述
type	number	虚拟区域类型： `1`：指哪扫哪 `2`：划区清扫框 `3`：禁区框 `4`：虚拟墙

示例

import { NativeModules } from 'react-native';
const TYLaserManager = NativeModules.TYRCTLaserManager;

TYLaserManager.addLaserMapRectWithType(3); // 往地图中添加一个禁区框

getLaserMapPoints

获取虚拟区域坐标点数据。

参数

参数名	参数类型	描述
callback	function	回调函数

示例

import { NativeModules } from 'react-native';
const TYLaserManager = NativeModules.TYRCTLaserManager;

const callback = (data) => {
  // do something
}
TYLaserManager.getLaserMapPoints(callback);

TYRCTTypeMapManager

方法名	描述
refreshStateViewWithMapId	重新绘制地图
setMapStateAndEdit	改变地图状态和编辑模式
addArea	向地图添加虚拟区域
getMapPointsInfo	获取虚拟区域信息
removeAreaList	删除虚拟区域集合
updateAreaInfo	更新虚拟区域信息
getMapSplitPointWithMapId	获取编辑地图分区时的相关信息
setMapSplitTypeWithMapId	设置编辑地图分区的状态

refreshStateViewWithMapId

通过地图 ID，重新绘制指定的地图。

该方法返回值为 Promise。

参数

参数名	参数类型	描述
mapId	string	地图 ID

示例

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

TYRCTTypeMapManager.refreshStateViewWithMapId('laser_1653444189948')
	.then(() => {})
	.catch(err => {})

setMapStateAndEdit

改变地图状态和编辑模式。

参数

参数名	参数类型	描述
mapId	string	地图 ID
state	number	地图状态： `0`：正常状态 `1`：指哪扫哪 `2`：划区清扫 `3`：禁区 `4`：虚拟墙 `5`：编辑地图分区 `6`：地图分区选择
edit	boolean	是否为编辑状态： `true`：是 `false`：否
callback	function	回调函数

示例

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

const callback = () => {
  // do something
}
TYRCTTypeMapManager.setMapStateAndEdit('laser_1653444189948', 0, false, callback);

addArea

向地图添加虚拟区域，一次只能添加一个区域。

参数

参数名	参数类型	描述
mapId	string	地图 ID
areaInfo	string	虚拟区域信息
success	function	成功回调函数
failure	function	失败回调函数

虚拟区域信息的类型为 json 字符串。主要分为禁区框、虚拟墙、选区清扫框。详细信息，可参考组件属性中的 areaInfoList。

禁区框

{
  id: "1",
  box: {
    bgColor: "#7ff81c1c",
    borderColor: "#ffffffff",
  },
  content: {
    text: "",
    textColor: "#ff000000",
    textSize: 10,
    renameEnable: false,
  },
  type: 3,
  viewType: "",
  points: [
    {
      x: 158,
      y: 148,
    },
    {
      x: 178,
      y: 148,
    },
    {
      x: 178,
      y: 168,
    },
    {
      x: 158,
      y: 168,
    },
  ],
  extend: '{"forbidType":"sweep"}',
}

虚拟墙

{
  id: "2",
  line: {
    bgColor: "#fff81c1c",
    lineWidth: 2,
  },
  type: 4,
  viewType: "",
  points: [
    {
      x: 138,
      y: 128,
    },
    {
      x: 198,
      y: 128,
    },
  ],
  extend: '{"forbidType":"sweep","isWall":true}',
}

划区清扫框

{
  id: "3",
  box: {
    bgColor: "#7f4685ff",
    borderColor: "#ffffffff",
  },
  content: {
    text: "",
    textColor: "#ffffffff",
    textSize: 10,
    renameEnable: false,
  },
  type: 2,
  viewType: "",
  points: [
    {
      x: 138,
      y: 128,
    },
    {
      x: 198,
      y: 128,
    },
    {
      x: 198,
      y: 188,
    },
    {
      x: 138,
      y: 188,
    },
  ],
  extend: "{}",
}

示例

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

// 要添加的虚拟区域信息
const areaInfo = {
  id: "4",
  line: {
    bgColor: "#fff81c1c",
    lineWidth: 2,
  },
  type: 4,
  viewType: "",
  points: [
    {
      x: 138,
      y: 128,
    },
    {
      x: 198,
      y: 128,
    },
  ],
  extend: '{"forbidType":"sweep","isWall":true}',
};
const success = () => {}; // 成功回调函数
const failure = () => {}; // 失败回调函数

TYRCTTypeMapManager.addArea('laser_1653444189948', JSON.stringify(areaInfo), success, failure);

getMapPointsInfo

根据当前地图状态，获取对应的虚拟区域信息。

参数

参数名称	参数类型	描述
mapId	string	地图 ID
callback	function	回调函数

传给回调函数的参数示例如下：

{
  // 虚拟区域类型
  type: 2, // 划区清扫框
  data: [
    {
      // 坐标
      points: [
        {
          x: 108,
          y: 98,
        },
        {
          x: 158,
          y: 98,
        },
        {
          x: 158,
          y: 147,
        },
        {
          x: 108,
          y: 147,
        },
      ],
      id: "4",
      areaType: 0,
      extend: "{}",
      content: {
        text: "",
      },
    },
  ],
}

示例

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

const callback = (data) => {
  // do something
}
TYRCTTypeMapManager.getMapPointsInfo('laser_1653444189948', callback);

removeAreaList

删除虚拟区域集合。

参数

参数名	参数类型	描述
mapId	string	地图 ID
areaIds	string	要删除的虚拟区域 ID 集合
success	function	成功回调函数
failure	function	失败回调函数

虚拟区域 ID 集合的类型为 json 字符串。

['1', '2', '3']

示例

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

const areaIds = ['1', '2', '3'];
const success = () => {};
const failure = () => {};
TYRCTTypeMapManager.removeAreaList('laser_1653444189948', JSON.stringify(areaIds), success, failure);

updateAreaInfo

更新虚拟区域信息。一次只能更新一个区域，主要用于更新禁区框和划区清扫框的名称。

参数

参数名	参数类型	描述
mapId	string	地图 ID
areaInfo	string	要更新的虚拟区域信息
success	function	成功回调函数
failure	function	失败回调函数

要更新的虚拟区域信息的类型为 json 字符串。

{
  id: "4",
  content: {
    text: "test area",
  },
}

示例

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

const areaInfo = {
  id: "4",
  content: {
    text: "test area",
  },
};
const success = () => {};
const failure = () => {};
TYRCTTypeMapManager.updateAreaInfo('laser_1653444189948', JSON.stringify(areaInfo), success, failure);

getMapSplitPointWithMapId

获取编辑地图分区时的相关信息。

适应场景：

合并分区时，获取两个分区的 ID。
分割分区时，获取分割线的信息等。

参数

参数名	参数类型	描述
mapId	string	地图 ID
callback	function	回调函数

传入回调函数的参数示例如下。其中 type 为 3 表示分割，2 表示合并。

// 分区分割
{
  type: 3,
  data: [
    {
      // 分割线的坐标
      points: [
        {
          x: 171,
          y: 128,
        },
        {
          x: 91,
          y: 128,
        },
      ],
      // 被分割的分区的 hex id
      pixel: "0c",
    },
  ],
}

// 分区合并
{
  type: 2,
  // 被合并的两个分区的 hex id
  data: [
    {
      pixel: "14",
    },
    {
      pixel: "0c",
    },
  ],
}

示例

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

const callback = (data) => {
  // do something
};
TYRCTTypeMapManager.updateAreaInfo('laser_1653444189948', callback);

setMapSplitTypeWithMapId

设置编辑地图分区的状态。

参数

参数名	参数类型	描述
mapId	string	地图 ID
state	number	地图分区状态 `0`：普通状态 `1`：重置状态（⚠️已废弃） `2`：合并状态 `3`：分割状态 `4`：点击状态
success	function	成功回调函数
failure	function	失败回调函数

目前支持 4 种地图分区状态：

普通状态：表示不能对地图做任何操作。
合并状态：表示可以合并接下来点击地图的两个相邻的分区。
分割状态：表示点击某个分区会出现一条分割线，用于将一个分区分割为两个分区。
点击状态：表示可点击分区，会触发对应的回调。

示例

import { NativeModules } from 'react-native';
const TYRCTTypeMapManager = NativeModules.TYRCTTypeMapManager;

const success = () => {};
const failure = () => {};
TYRCTTypeMapManager.setMapSplitTypeWithMapId('laser_1653444189948', 2, success, failure);

上一篇激光扫地机数据 API

下一篇激光扫地机器人 Demo