@tuya/rn-hybrid-robot-map v0.0.4

TOC

简要描述

IndoorMap 是 TYRCTLaserMap 的 RN 组件实现, 您可以在 RN 技术栈中使用它来进行扫地机器人地图的业务开发。

如何使用

安装@tuya/rn-hybrid-robot-map

$ yarn add @tuya/rn-hybrid-robot-map

使用 IndoorMap 组件

import { IndoorMap } from '@sdk-package-name';

export default class MapView extends Component<IProps, IState> {
   return (
      <View style={styles.container}>
        <IndoorMap {...elementProps} {...eventProps} />
      </View>
    )
};

使用 IndoorMap 组件提供的实例方法

import { IndoorMapWebApi as LaserUIApi, IndoorMapUtils } from '@sdk-package-name';

// 获取组件实例，并对组件实例进行操作
LaserUIApi.updateSelectRoom(IndoorMapUtils.getMapInstance(mapId), this.props.selectTags);

参数申明

import { IAnimationTypeEnum, IAreaViewTypeEnum, IPathTypeEnum, IPositionEnum } from '@/enums';

/**
 * 地图数据 类型申明
 */
export interface IMapData {
  width: number;
  height: number;
  data: string;
  origin: { x: number; y: number };
  roomIdColorMap: string;
  roomInfo: any;
  materialObject: string;
  textureObject: string;
  pointCount: number;
}

/**
 * 房间RoomInfo 类型申明
 */
export interface IExtendProps {
  roomId: number | string;
  normalColor: string;
  highlightColor: string;
  pixelType: string;
  name: string;
  fan: string;
  order: string;
  water_level: string;
  sweep_count: string;
  mop_count: string;
  sweep_forbiden: string;
  mop_forbidden: string;
  y_mode: string;
  vertexData: any;
}

/**
 * 房间RoomInfo 类型申明
 */
export interface IRoomInfoProps {
  defaultOrder: string | number;
  extend: IExtendProps;
  highlightColor: string;
  isFoldable: boolean;
  name: string;
  normalColor: string;
  roomNameTextColor: string;
  roomNameTextFont: string;
  roomNameTextStroke: {
    strokeColor: string;
    strokeWidth: number;
  };
  roomProperty: Array<any>;
  roomPropertyBgColor: string;
  roomPropertyStyle: string;
  roomPropertyTextColor: string;
}

/**
 * 地图数据中MapData 类型申明
 */
export interface IMapDataState {
  // 是否渲染为 3d 视角
  is3d: boolean;
  // 2D 状态下地图背景颜色
  bgColor: string;
  // 3D 状态下地图背景颜色
  d3BgColor: string;
  // 3D 状态下墙体颜色
  d3WallColor: string;
  // 地图的宽度
  width: number;
  // 地图的高度
  height: number;
  // 地图数据
  mapData: IMapData;
  // 米数显示信息
  factorInfo: IFactorInfoParams;
  // @deprecate 路径宽度
  pathWidth: number;
  // @deprecate 路径颜色
  pathColor: string;
  // 路径详细数据 数据格式为IPathData
  pathData: string;
  // 路径配置数据
  pathParams: IPathParams;
  // @deprecate 规划路径宽度
  planPathWidth: number;
  // @deprecate 规划路径颜色
  planPathColor: string;
  // @deprecate markerIcon 扫地机图片
  markerIcon: string;
  // 充电桩的详细信息
  pilePosition: IPilePosition;
  // @deprecate  充电桩的图片
  pileIcon: string;
  // 指哪扫哪的图片
  appointIcon: string;
  // @deprecate 划区框/禁区框的最小边长
  minAreaWidth: number;
  // @deprecate 禁区框是否支持旋转
  isRotate: boolean;
  // 虚拟区域详细数据
  areaInfoList: string;
  // @deprecate 分割线的颜色
  splitColor: string;
  // 选区选中的房间 Id
  selectRoomData: string[] | number[];
  // 选中图标的配置参数
  selectedParams: ISelectedParams;
  // 房间属性图标的最长长度 实际数量超过配置数量时, 出现更多按钮
  maxRoomPropertiesLength: number;
  // 清扫顺序样式配置
  orderParams: IOrderParams;
  // 指哪扫哪样式配置
  posParams: IPosParams;
  // 机器人图标样式配置
  robotParams: IRobotParams;
  // 房间分割线样式配置
  splitLineParams: ISplitLineParams;
  // 3d 模型编辑框样式配置
  d3EditWrapperParams: ID3EditWrapperParams;
  // 房间合并样式配置
  mergeRoomParams: IMergeRoomParams;
  // 地图旋转角度, 单位为弧度
  rotateMapAngle: number;
  // 选区清扫时, 是否显示顺序
  showSelectRoomOrder: boolean;
  // 虚拟区域实时回调事件
  onLaserMapPoints: Function;
  // 地图加载完成之后回调 MapId
  onMapId: Function;
  // 点击禁区框时进行命名编辑操作的事件
  onLongPressInAreaView: Function;
  // 点击地图编辑分区的回调方法
  onClickSplitArea: Function;
  // 点击地图分区时的回调方法
  onClickRoom: Function;
  // 点击 3D 模型时的回调方法
  onClickModel: Function;
  // 3D 模型时加载时的回调方法
  onModelLoadingProgress: Function;
  // 地图渲染完成后的回调方法
  onMapLoadEnd: Function;
  // 内部息打印
  onLoggerInfo: Function;
  // 点击整个地图区域触发回调
  onClickMapView: Function;
  // 点击房间属性 Label 上的更多按钮触发  可搭配 maxRoomPropertiesLength 来控制多少属性图标
  onClickMoreRoomProperties: Function;
  // 点击房间属性 Label 时触发
  onClickRoomProperties: Function;
  // 房间分割模式下, 点击出现分割线触发
  onSplitLine: Function;
  // 指哪扫哪模式下, 点击出现指哪扫哪图标触发
  onPosPoints: Function;
  // 地图获得手势和移除手势时触发
  onGestureChange: Function;
}

/**
 * 路径数据申明
 */
export interface IPathData {
  x: number;
  y: number;
  type: string;
  hidden?: boolean;
  rate?: number;
  bgColor?: string;
  duration?: number;
  dataColors?: { [key: string]: string };
}
[];

/**
 * 地毯纹理数据申明
 */
export interface ITextureObject {
  url: string;
  pointList: { x: number; y: number }[];
  width: number;
  height: number;
}
[];

/**
 * 物体识别数据申明
 */
export interface IMaterialObject {
  id: string;
  type: string;
  x: number;
  y: number;
  extends: { x: number; y: number; type: number };
}
[];

/**
 * 路径数据配置参数申明
 */
export interface IPathParams {
  pathType: IPathTypeEnum;
  pathWidth: number;
}
/**
 * 房间属性名称的字体等配置参数申明
 */
export interface IFactorInfoParams {
  factor: number;
  font: number;
  color: string;
}

/**
 * 房间选中状态下 选中图标参数配置申明
 */
export interface ICheckIconParams {
  checkedImage?: string; // 选中的图标
  checkedRadius?: number; // 选中图标的大小 长宽为2 * radius
  isScale?: boolean; // 是否随着放大缩小而放大缩小 随放大缩小变化: true 不随放大缩小变化: false
  scale?: number; // 对图标进行缩放的比例
}

/**
 * 选区配置参数申明
 */
export interface ISelectedParams {
  checkedIcon?: {
    checkedIconEnable?: boolean;
    checkedParams?: ICheckIconParams;
  };
}

/**
 * 房间分割线配置参数申明
 */
export interface ISplitLineParams {
  checkedIcon?: {
    checkedIconEnable?: boolean;
    checkedParams?: ICheckIconParams;
  };
  vertex?: {
    vertexType?: string;
    vertexColor?: string; // eg: '#7f4685ff', 仅在showVertexImage 为false 时生效
    showVertexImage?: boolean; // 是否需要显示顶点贴图
    vertexExtendTimes?: string; // 点击区域扩大倍数 默认值为2
    radius?: number; // 如果是圆，则是radius, 如果是square， 长宽为2 * radius
  };
}

/**
 * 房间合并配置参数申明
 */
export interface IMergeRoomParams {
  checkedIcon?: {
    checkedIconEnable?: boolean;
    checkedParams?: ICheckIconParams;
  };
}

/**
 * 3D 编辑时, 用来包裹模型的编辑框参数
 */
export interface ID3EditWrapperParams {
  vertex?: {
    vertexType?: string;
    vertexColor?: string;
    vertexImages?: Array<string>;
    showVertexImage?: boolean;
    vertexExtendTimes?: string;
    radius?: number;
  };
  box?: {
    bgColor: string;
    borderColor: string;
    lineWidth: number;
    isDash: boolean;
    dashSize: number;
    gapSize: number;
  };
  content?: {
    deleteEnable?: boolean;
  };
}

/**
 * 设置清扫顺序类型
 */
export interface IOrderParams {
  orderType: string;
  iconParams?: {
    color?: string;
    innerColor?: string;
    textColor?: string;
    isScale?: boolean;
    scale?: number;
    radius?: number;
    innerRadius?: number;
    fontSize?: number;
  };
}

/**
 * 机器人的图标缩放形式
 */
export interface IRobotParams {
  markerIcon?: string; // 如果传递此参数, 优先级将高于旧版本的markerIcon的参数
  iconParams?: {
    scale?: number;
    isScale?: boolean;
  };
}

/**
 * 充电桩动画配置参数申明
 */
export interface IPilePositionAnimation {
  color?: string; // 呼吸内圈颜色
  borderColor?: string; // 边框颜色
  duration?: number; // 呼吸间隔
  animationType?: IAnimationTypeEnum; // 呼吸圈样式
  rate?: number; // 呼吸圈扩大倍数
  borderWidth?: number;
}

/**
 * 扫地机动画配置参数申明
 */
export interface IRobotAnimation {
  color?: string; // 呼吸内圈颜色
  borderColor?: string; // 边框颜色
  duration?: number; // 呼吸间隔
  animationType?: IAnimationTypeEnum; // 呼吸圈样式
  rate?: number; // 呼吸圈扩大倍数
  borderWidth?: number;
}
/**
 * 充电桩的样式及禁区框的样式
 */
export interface IPilePosition {
  iconParams?: {
    pileIcon?: string; // 如果传递此参数, 优先级将高于旧版本的pileIcon的参数
    scale?: number;
    isScale?: boolean;
  };
  x: number;
  y: number;
  color?: string;
  hidden: number;
  radius?: number;
  borderColor?: string;
  bgColor?: string;
  // 呼吸圈参数
  animation?: IPilePositionAnimation;
}

/**
 * 虚拟信息中的多边形数据类型
 */
export interface IAreaInfoArea {
  id: string;
  type: number;
  box?: {
    bgColor?: string; // eg: '#7f4685ff',
    borderColor?: string; // eg: '#7f4685ff',
    isDash?: boolean; // 边框线是否是虚线
    dashSize?: number; // 虚线大小 仅在isDash为true时生效
    gapSize?: number; // 虚线间距 仅在isDash为true时生效
    minAreaWidth?: number; // 如果未设置, 则采用全局的设置生效
  };
  vertex?: {
    // 传入顶点的图片 支持url 和 base64 image
    // eg: 'https://xxx.com/1.png'  or 'data:image/png;base64,iV...'
    vertexImages?: Array<string>;
    showVertexImage?: boolean; // 是否需要显示顶点贴图
    vertexType?: string;
    vertexColor?: string; // eg: '#7f4685ff', 仅在showVertexImage 为false 时生效
    radius?: number; // 如果是圆，则是radius, 如果是square， 长宽为2 * radius
    vertexExtendTimes?: number; // 扩展透明按钮区域 默认值为2
  };
  content?: {
    text?: string;
    textColor?: string; // eg: '#ff000000',
    textSize?: number; // eg: 12
    position?: IPositionEnum;
    image?: string; // 框中的图片
    imageSize?: number; // 框中的图片大小
    renameEnable?: boolean;
    rotateEnable?: boolean; // 如果设置了rotateEnable 则使用该属性，如果没有，则使用全局的isRotate
  };
  unit?: {
    position?: IPositionEnum;
    showUnitText?: boolean;
    textColor?: string; // eg: '#ff000000',
    textSize?: number; // eg: 12
  };
  extend?: string; // eg: '{forbidType: 'mop'}'
  points: Array<{ x: number; y: number }>;
  viewType?: IAreaViewTypeEnum;
}

/**
 * 虚拟信息中的线类型数据
 */
export interface IAreaInfoLine {
  id: string;
  type: number;
  line: {
    bgColor: string; // eg: '#7f4685ff',
    lineWith: number;
    isDash: boolean; // 边框线是否是虚线
    dashSize: number; // 虚线大小 仅在isDash为true时生效
    gapSize: number; // 虚线间距 仅在isDash为true时生效
  };
  vertex?: {
    // 传入顶点的图片 支持url 和 base64 image
    // eg: 'https://xxx.com/1.png'  or 'data:image/png;base64,iV...'
    vertexImages?: Array<string>;
    showVertexImage?: boolean; // 是否需要显示顶点贴图
    vertexType?: string;
    vertexColor?: string; // eg: '#7f4685ff', 仅在showVertexImage 为false 时生效
    radius?: number; // 如果是圆，则是radius, 如果是square， 长宽为2 * radius
    vertexExtendTimes?: number; // 扩展透明按钮区域 默认值为2
  };
  unit: {
    showUnitText?: boolean;
    textColor: string; // eg: '#ff000000',
    textSize: number; // eg: 12
  };
  sideVertex?: {
    showSideVertex?: boolean;
    showSideVertexImage?: boolean;
    sideVertexImage?: string;
    sideVertexColor?: string;
    radius?: number;
  };
  extend: string; // eg: '{forbidType: 'sweep', isWall: true}'
  points: Array<{ x: number; y: number }>;
  viewType: string;
}

/**
 * 可移动指哪扫哪配置参数申明
 */
export interface IAreaInfoPos {
  id: string;
  points: Array<{ x: number; y: number }>;
  type: number; // eg: 1
  pos: {
    meter: number; // 最终的长度会用meter * factor 得到实际地图中的宽度
    bgColor: string; // eg: '#7f4685ff',
    borderColor: string; // eg: '#7f4685ff',
    isDash: boolean; // 边框线是否是虚线
    lineWidth: number;
    dashSize: number; // 虚线大小 仅在isDash为true时生效
    gapSize: number; // 虚线间距 仅在isDash为true时生效
  };
  unit: {
    textColor: string; // eg: '#ff000000',
    textSize: number; // eg: 12
  };
  viewType: string;
}

/**
 * 定点(指哪扫哪)配置参数申明
 */
export interface IPosParams {
  meter?: number;
  bgColor?: string;
  borderColor?: string;
  isDash?: boolean;
  lineWidth?: number;
  dashSize?: number;
  gapSize?: number;
  unit?: {
    textColor?: string;
    textSize?: number;
  };
}

组件参数说明

mapData 参数示例

{
  // 地图宽度
  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}]"
}

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
  }
]

pilePosition 充电桩

充电桩的详细信息。

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

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

areaInfoList 虚拟信息

划区框，禁区框，虚拟墙，指哪扫哪数据接透过此传入

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

虚拟区域一共分为 5 种类型，扫拖禁区框、拖地禁区框、虚拟墙、划区清扫框和指哪扫哪点。

不同类型的属性也不同，主要使用 type 来区分，扫拖禁区和拖地禁区为 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
  }
]

组件回调函数

onMapId

onMapId 函数 在地图加载完成成时触发回调, 您可以透过 mapId 进行地图实例管理及进行其他操作

场景说明

您可以在此函数中, 将地图实例保存在 redux 等全局状态管理中, 方便获取地图实例等

回调参数

const onMapIdFn = (data: { mapId: string; dataMapId: string }) => {
  // do something
};

<IndoorMap onMapId={onMapIdFn} />

onMapLoadEnd

onMapLoadEnd 函数 在地图加载完成成时触发回调, onMapLoadEnd 的触发时机基本和 onMapId 一致

场景说明

您可以在此函数中, 关闭加载动画, 或者改变地图状态等操作

回调参数

const onMapLoadEndFn = (success: boolean) => {
  // do something
};

<IndoorMap onMapLoadEnd={onMapLoadEndFn} />

onClickRoom

onClickRoom 函数 在点击地图分区时触发回调

触发时地图状态需满足以下任一条件:

 // 地图处于
if (state === nativeMapStatusEnum.normal)
if (state === nativeMapStatusEnum.mapSplit && splitState === mapSplitStateEnum.normal)
if (state === nativeMapStatusEnum.mapSplit && splitState === mapSplitStateEnum.click && edit === true)

且需同时满足, 分区数据中房间存在房间 ID, 存在房间属性等合法分区时触发

场景说明

获取点击分区的 Id 或者当前分区属性标签的折叠状态

回调参数

const onClickRoomFn = (data: { isFoldable: boolean; target: number; roomId: number }) => {
  // do something
};

<IndoorMap onClickRoom={onClickRoomFn} />

onClickMapView

onClickMapView 函数 在点击地图任一区域时触发

触发时地图状态需满足以下任一条件:

场景说明

在 3D 场景下, 点击地图时需要隐藏对应的模型的编辑框

回调参数

const onClickMapViewFn = (data: { eventType: string; data: { extend: any } }) => {
  // do something
};

<IndoorMap onClickMapView={onClickMapViewFn} />

onLaserMapPoints

onLaserMapPoints 函数 在移动和操作禁区，虚拟墙等虚心类型数据时触发

场景说明

编辑禁区，虚拟墙时, 在函数中判断和充电桩的位置关系

回调参数

interface IDataInfo {
  target: number;
  type: number;
  data: {
    id: number;
    extend: any;
    areaType: number;
    content: any;
    points: { x: number; y: number }[];
  };
}
const onLaserMapPointsFn = (data: IDataInfo, operation: string) => {
  // do something
};

<IndoorMap onLaserMapPoints={onLaserMapPointsFn} />

onClickSplitArea

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

场景说明

房间合并时，获取当前点击的房间信息

回调参数

interface IDataInfo {
  data: {
    pixel: string;
    extend: any;
  };
}
const onClickSplitAreaFn = (params: IDataInfo) => {
  // do something
};

<IndoorMap onClickSplitArea={onClickSplitAreaFn} />

onLongPressInAreaView

onLongPressInAreaView 函数 在点击禁区或划区框的编辑按钮时触发

场景说明

添加禁区或者划区时需要为其重命名

回调参数

interface IDataInfo {
  data: {
    id: number;
    info: {
      target: number;
      type: number;
      data: {
        id: number;
        extend: any;
        areaType: number;
        content: any;
        points: { x: number; y: number }[];
      };
    };
  };
}
const onLongPressInAreaViewFn = (params: IDataInfo) => {
  // do something
};

<IndoorMap onLongPressInAreaView={onLongPressInAreaViewFn} />

onSplitLine

onSplitLine 函数 在点击房间分割, 出现分割线触发

场景说明

添加禁区或者划区时需要为其重命名

回调参数

interface IDataInfo {
  type: number;
  data: {
    points: { x: number; y: number }[];
    pixel: string;
  }[];
}
const onSplitLineFn = (data: IDataInfo, operation: string) => {
  // do something
};

<IndoorMap onSplitLine={onSplitLineFn} />

onPosPoints

onPosPoints 函数 在点击出现指哪扫哪图标时触发

场景说明

在点击指哪扫哪图标需要进行其他业务逻辑时

回调参数

interface IDataInfo {
  type: number;
  target: number;
  data: {
    extend: any;
    id: string;
    points: { x: number; y: number };
    target: number;
    type: number;
  };
}
const onPosPointsFn = (data: IDataInfo, operation: string) => {
  // do something
};

<IndoorMap onPosPoints={onPosPointsFn} />

onClickRoomProperties

onClickRoomProperties 函数 在点击房间折叠属性标签时触发

场景说明

点击房间属性标签时需要做其他业务逻辑时使用

回调参数

interface IDataInfo {
  properties: {
    roomProperty: any;
    name: string;
    extend: any;
    colorHex: string;
  };
}
const onClickRoomPropertiesFn = (data: IDataInfo) => {
  // do something
};

<IndoorMap onClickRoomProperties={onClickRoomPropertiesFn} />

onClickMoreRoomProperties

onClickMoreRoomProperties 函数 在点击房间折叠属性标签的更多按钮时触发

场景说明

点击房间属性标签时需要做其他业务逻辑时使用

回调参数

interface IDataInfo {
  properties: {
    roomProperty: any;
    name: string;
    extend: any;
    colorHex: string;
  };
}
const onClickMoreRoomPropertiesFn = (data: IDataInfo) => {
  // do something
};

<IndoorMap onClickMoreRoomProperties={onClickMoreRoomPropertiesFn} />

onClickModel

onClickModel 函数 在 3d 模型编辑状态下，点击 3D 模型时触发

场景说明

需要在点击 3D 模型时, 出现编辑框

回调参数

interface IDataInfo {
  infoKey: string;
  info: string;
  point: {
    x: number;
    y: number;
    z: number;
  };
  rotate: number;
  scale: number;
  unionId: string;
  target: number;
}
const onClickModelFn = (data: IDataInfo) => {
  // do something
};

<IndoorMap onClickModel={onClickModelFn} />

onGestureChange

onGestureChange 地图获取和移除手势时触发

场景说明

地图实例存在在 ScrollView 中, 需要禁用 ScrollView 的滚动事件时

回调参数

const onGestureChangeFn = (start: boolean) => {
  // do something
};

<IndoorMap onGestureChange={onGestureChangeFn} />

onModelLoadingProgress

onModelLoadingProgress 加载 3D 模型时触发下载进度

场景说明

需要监听模型的下载进度时

回调参数

const onModelLoadingProgressFn = (data: { key: number; progress: number }) => {
  // do something
};

<IndoorMap onModelLoadingProgress={onModelLoadingProgressFn} />

onLoggerInfo

onLoggerInfo 基础库回调一些打印日志

场景说明

回调参数

const onLoggerInfoFn = (data: any) => {
  // do something
};

<IndoorMap onLoggerInfo={onLoggerInfoFn} />

OpenApi 使用

refreshLaserMapStateView

重新绘制地图。

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

await IndoorMapWebApi.refreshLaserMapStateView({ mapId }).then(() => {
  // do something
});

setLaserMapStateAndEdit

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

参数

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

// 更新地图状态为正常状态 且无法编辑
IndoorMapWebApi.setLaserMapStateAndEdit(IndoorMapUtils.getMapInstance(this.appMapId), {
  state: 0,
  mapId: this.appMapId,
  edit: false,
});

addLaserMapArea

向地图添加虚拟区域。

参数

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.addLaserMapArea(IndoorMapUtils.getMapInstance(mapId), {
  mapId,
  area: areaZone,
}).then(() => resolve({ area: { ...areaZone, type: nativeMapStatus.areaSet } })); // 往地图中添加划区清扫框

getLaserMapPointsInfo

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

参数

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

// 从Native 先获取到坐标对象数据
const { data } = await IndoorMapWebApi.getLaserMapPointsInfo(IndoorMapUtils.getMapInstance(mapId), {
  mapId,
});

updateLaserMapAreaInfo

更新区域信息

参数

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.updateLaserMapAreaInfo(IndoorMapUtils.getMapInstance(mapId), {
  area: { id: areaId, content: { text: newText } },
  mapId,
});

getLaserMapSplitPoint

获取房间分割线的坐标点数据

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

const res = await IndoorMapWebApi.getLaserMapSplitPoint(
  IndoorMapUtils.getMapInstance(this.appMapId),
  {
    mapId: this.appMapId,
  }
);

setLaserMapSplitType

将地图设置为房间编辑的分割状态

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

handleSplit = async () => {
  try {
    await IndoorMapWebApi.setLaserMapSplitType(IndoorMapUtils.getMapInstance(this.appMapId), {
      mapId: this.appMapId,
      state: mapSplitStateEnum.split,
    });
    await IndoorMapWebApi.setLaserMapStateAndEdit(IndoorMapUtils.getMapInstance(this.appMapId), {
      state: 5,
      mapId: this.appMapId,
      edit: true,
    });
  } catch (error) {
    console.warn(error);
  }
};

updateSelectRoom

将地图的某些区域设置为选中状态 | 参数名 | 参数类型 | 描述 | 示例 |
| ------------ | -------- | ------------ | ------------------------- | | indoorMapObj | Object | 地图组件示例 | | | selectRoomTags | array | 房间的 id 或 hex | '0c' | | isHex | boolean | 是否是 Hex 的数据 | | | callback | function | 回调函数 | |

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.updateSelectRoom(
  IndoorMapUtils.getMapInstance(mapId),
  this.props.selectTags,
  false
);

changeMapViewModeWithMapId

将地图的视角设置为 2d 或 3d 状态

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.changeMapViewModeWithMapId(IndoorMapUtils.getMapInstance(mapId), mapId, false);

setD3EditModeWithMapId

设置 3d 场景下是否为可编辑

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

onMapId = ({ mapId, dataMapId }: { mapId: string, dataMapId: string }) => {
  IndoorMapWebApi.setD3EditModeWithMapId(IndoorMapUtils.getMapInstance(mapId), mapId, true);
  this.setState({ mapId, dataMapId }, () => {
    this.getDeviceList();
  });
};

putModelInScene

向 3D 场景中添加模型

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

const point = { x: Number(x), y: Number(y), z: Number(z) };
const dataJson = { infoKey: mapDevId, info: object, scale: scale, rotate: rotate, point: point };
const source = {
  value: `${Store.devInfo.getStaticPrefix}${object.value}`,
  unionId: unionId,
};

await IndoorMapWebApi.putModelInScene(IndoorMapUtils.getMapInstance(mapId), source, dataJson);

removeModelFromScene

从 3D 场景中移除模型

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.removeModelFromScene(IndoorMapUtils.getMapInstance(mapId), currentTarget);

removePathFromScene

从场景中移除清扫路径（在某些特定条件下，虽然有路径信息，但是需要移除不显示）

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.removePathFromScene(IndoorMapUtils.getMapInstance(mapId));

removeAllModelLayer

移除场景中的所有 3d 模型信息

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.removeAllModelLayer(IndoorMapUtils.getMapInstance(mapId));

reCreatePathIntoScene

向场景中重新增加清扫路径

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.reCreatePathIntoScene(IndoorMapUtils.getMapInstance(mapId));

setFloorMaterial

往场景地图中添加地板

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

const source = {
value: `${Store.devInfo.getStaticPrefix}${furniture.value}`,
unionId: unionId,
};
const dataJason = {
infoKey: addJson.mapDevId,
info: furniture,
point: { x: addJson.x, y: addJson.y, z: addJson.z },
rotate: rotate,
scale: scale,
}；

IndoorMapWebApi.setFloorMaterial(IndoorMapUtils.getMapInstance(mapId), source, dataJason);

lockModelClick

锁住模型的编辑状态，不触发点击回调

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.lockModelClick(IndoorMapUtils.getMapInstance(mapId), false);

freezeMapUpdate

在某些特定条件下冻结地图的更新操作，减少内存浪费

示例 此组件已内置在 IndoorMap 中

import React, { FC, useEffect } from 'react';
import { View, DeviceEventEmitter } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';

interface IProps {
  mapRef: any;
}
/**
 * 用于判断当前组件是否显示, 未显示的地图组件进行渲染冻结,避免性能浪费
 * @returns
 */
const FreezeMap: FC<IProps> = ({ mapRef }) => {
  useFocusEffect(
    React.useCallback(() => {
      mapRef && mapRef.freezeMapUpdateWEB && mapRef.freezeMapUpdateWEB(false);
      return () => {
        mapRef && mapRef.freezeMapUpdateWEB && mapRef.freezeMapUpdateWEB(true);
      };
    }, [mapRef])
  );
  return <View />;
};

export default FreezeMap;

getModelInfo

获取模型的坐标点数据

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

const data = await IndoorMapWebApi.getModelInfo(
  IndoorMapUtils.getMapInstance(mapId),
  currentTarget
);

updateSelectRoom

选中地图选区

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.updateSelectRoom(IndoorMapUtils.getMapInstance(mapId), ['0f'], true);

changeAllMapAreaColor

改变分区地图的所有颜色

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.changeAllMapAreaColor(IndoorMapUtils.getMapInstance(mapId), false);

updateMapAreaColor

高亮指定区域的颜色

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.updateMapAreaColor(IndoorMapUtils.getMapInstance(mapId), [1, 2, 3], false, true);

clearMap

清空所有地图图层数据

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.clearMap(IndoorMapUtils.getMapInstance(mapId));

changeContainerColor

改变场景背景颜色

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.changeContainerColor(IndoorMapUtils.getMapInstance(mapId), '#ffffffff', false);

foldableSingleRoomInfoById

折叠或展开某个房间的属性

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.foldableSingleRoomInfoById(
  IndoorMapUtils.getMapInstance(mapId),
  [1, 2],
  false,
  true
);

hideAllModelEditWrapper

隐藏所有的 3D 编辑模型边框 | 参数名 | 参数类型 | 描述 | 示例 | |------ | -------- | ------------------------------------------------------------ | ------------ | | indoorMapObj| Object| 地图组件示例 | |

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.hideAllModelEditWrapper(IndoorMapUtils.getMapInstance(mapId));

getAllModelInfo

获取场景中的所有 3D 模型信息

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

const data = await IndoorMapWebApi.hideAllModelEditWrapper(IndoorMapUtils.getMapInstance(mapId));

rotateViewScene

针对场景旋转指定的角度, 正值为顺时针, 负值为逆时针

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

const data = await IndoorMapWebApi.rotateViewScene(IndoorMapUtils.getMapInstance(mapId), 0);

removeVirtualInfoLayer

从场景中删除禁区

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

const data = await IndoorMapWebApi.removeVirtualInfoLayer(
  IndoorMapUtils.getMapInstance(mapId),
  [1, 3, 98]
);

showPilePositionBreatheAnimation

控制是否显示充电桩的呼吸圈

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.showPilePositionBreatheAnimation(IndoorMapUtils.getMapInstance(mapId), true, {
  color: '#FFFF0000',
  borderColor: '#FFFFFFFF',
  borderWidth: 1,
  duration: 2,
  animationType: 'normal',
  rate: 2,
});

showRobotBreatheAnimation

控制是否显示扫地机的呼吸圈

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.showRobotBreatheAnimation(IndoorMapUtils.getMapInstance(mapId), true, {
  color: '#FFFF0000',
  borderColor: '#FFFFFFFF',
  borderWidth: 1,
  duration: 2,
  animationType: 'normal',
  rate: 2,
});

showRobotSleepAnimation

控制是否显示睡眠动画

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.showRobotSleepAnimation(IndoorMapUtils.getMapInstance(mapId), true);

changeMapAreaColorWithNewConfig

采用新的设置颜色来设置区域, 设置后, 地图更新时, roomInfo 颜色不影响该区域

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.changeMapAreaColorWithNewConfig(IndoorMapUtils.getMapInstance(mapId), {"0f": { normalColor: '#FFFF0000',  highlightColor: '#FFFFFFFF', }} true);

clearMapAreaColorWithNewConfig

清空之前所有设置的区域颜色配置，采用 roomInfo 里面的数据

示例

import { IndoorMapWebApi, IndoorMapUtils } from '@sdk-package-name';

IndoorMapWebApi.clearMapAreaColorWithNewConfig(IndoorMapUtils.getMapInstance(mapId));