npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tuya/rn-hybrid-robot-map

v0.0.4

Published

机器人地图SDK

Downloads

7

Readme

[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;
  };
}

组件参数说明

| 字段名 | 类型 | 描述 | 默认值 | 备注 | | :------------------------ | -------- | ---------------------------------------- | ------ | ------------------------------------------------------------------------------ | | is3d | boolean | 是否渲染为 3d 视角 | false | | | bgColor | string | 2D 状态下地图背景颜色 | / | | | d3BgColor | string | 3D 状态下地图背景颜色 | / | | | d3WallColor | string | 3D 状态下墙的颜色 | / | | | width | number | 地图组件宽度 | / | | | height | number | 地图组件高度 | / | | | mapData | Object | 地图详细数据 | / | | | factorInfo | Object | 米数显示信息 | / | | | pathWidth | number | 路径宽度 | / | deprecate | | pathColor | string | 路径颜色 | / | deprecate | | pathData | string | 路径详细数据 | / | | | pathParams | Object | 路径配置数据 | / | | | planPathWidth | number | 规划路径宽度 | / | deprecate | | planPathColor | string | 规划路径颜色 | / | deprecate | | planPathData | string | 规划路径详细数据 | / | deprecate | | markerIcon | string | 扫地机的图片 | / | deprecate | | pilePosition | Object | 充电桩的详细信息 | / | | | pileIcon | string | 充电桩的图片 | / | deprecate | | appointIcon | string | 指哪扫哪的图片 | / | | | minAreaWidth | number | 划区框/禁区框的最小边长 | / | deprecate | | isRotate | boolean | 禁区框是否支持旋转 | / | deprecate | | areaInfoList | string | 虚拟区域详细数据 | / | | | splitColor | string | 分割线的颜色 | / | deprecate | | selectRoomData | string | 选区选中的房间 Id | / | 可搭配 updateSelectRoom 方法 | | selectedParams | string | 选中图标的配置参数 | / | | | maxRoomPropertiesLength | number | 房间属性图标的最长长度 | / | 实际数量超过配置数量时, 出现更多按钮 | | orderParams | Object | 清扫顺序样式配置 | / | | | posParams | Object | 指哪扫哪样式配置 | / | | | robotParams | Object | 机器人图标样式配置 | / | | | splitLineParams | Object | 房间分割线样式配置 | / | | | d3EditWrapperParams | Object | 3d 模型编辑框样式配置 | / | | | mergeRoomParams | Object | 房间合并样式配置 | / | | | rotateMapAngle | number | 地图旋转角度, 单位为弧度 | / | | | showSelectRoomOrder | boolean | 选区清扫时, 是否显示顺序 | / | | | onLaserMapPoints | Function | 虚拟区域实时回调事件 | / | | | onMapId | Function | 地图加载完成之后回调 MapId | / | | | onLongPressInAreaView | Function | 点击禁区框时进行命名编辑操作的事件 | / | | | onClickSplitArea | Function | 点击地图编辑分区的回调方法 | / | | | onClickRoom | Function | 点击地图分区时的回调方法 | / | | | onClickModel | Function | 点击 3D 模型时的回调方法 | / | | | onModelLoadingProgress | Function | 3D 模型时加载时的回调方法 | / | | | onMapLoadEnd | Function | 地图渲染完成后的回调方法 | / | 可利用此来显示 loading 状态,避免出现 Android WebView 加载问题和渲染有白屏情况 | | onLoggerInfo | Function | Web 端回调的打印数据 | / | | | onClickMapView | Function | 点击整个地图区域触发回调 | / | | | onClickMoreRoomProperties | Function | 点击房间属性 Label 上的更多按钮触发 | / | 可搭配 maxRoomPropertiesLength 来控制多少属性图标时, 显示更多按钮 | | onClickRoomProperties | Function | 点击房间属性 Label 时触发 | / | | | onSplitLine | Function | 房间分割模式下, 点击出现分割线触发 | / | | | onPosPoints | Function | 指哪扫哪模式下, 点击出现指哪扫哪图标触发 | / | | | onGestureChange | Function | 地图获得手势和移除手势时触发 | / | | | getRef | Function | 用于获取 WebView 实例 | / | |

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 等全局状态管理中, 方便获取地图实例等

回调参数

| 字段名 | 类型 | 描述 | | :-------- | ------ | ------------- | | mapId | string | 地图的唯一 ID | | dataMapId | string | 地图协议的 ID |

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

onMapLoadEnd

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

场景说明

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

回调参数

| 字段名 | 类型 | 描述 | | :------ | ------- | ------------ | | success | boolean | 地图渲染完成 |

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 或者当前分区属性标签的折叠状态

回调参数

| 字段名 | 类型 | 描述 | | :--------- | ------- | ----------------- | | isFoldable | boolean | 属性标签折叠状态 | | target | number | 地图分区的图元 ID | | roomId | number | 地图分区的房间 ID |

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

onClickMapView

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

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

场景说明

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

回调参数

| 字段名 | 类型 | 描述 | | :-------- | ------ | ------------------ | | eventType | string | 点击事件类型 | | data | Object | 地图分区的扩展内容 |

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

onLaserMapPoints

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

场景说明

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

回调参数

| 字段名 | 类型 | 描述 | | :-------- | ------ | -------------------- | | data | Object | 虚拟信息内容 | | operation | string | 操作状态, 依平台而定 |

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 种状态点击分区的回调事件。

场景说明

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

回调参数

| 字段名 | 类型 | 描述 | | :----- | ------ | ------------ | | data | Object | 虚拟信息内容 |

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

onLongPressInAreaView

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

场景说明

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

回调参数

| 字段名 | 类型 | 描述 | | :----- | ------ | ------------ | | data | Object | 虚拟信息内容 |

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 函数 在点击房间分割, 出现分割线触发

场景说明

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

回调参数

| 字段名 | 类型 | 描述 | | :-------- | ------ | -------------------- | | data | Object | 虚拟信息内容 | | operation | string | 操作状态, 依平台而定 |

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 函数 在点击出现指哪扫哪图标时触发

场景说明

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

回调参数

| 字段名 | 类型 | 描述 | | :-------- | ------ | ----------------------- | | data | Object | 虚拟信息内容 | | operation | string | 操作状态, 依平台而定 | |

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 函数 在点击房间折叠属性标签时触发

场景说明

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

回调参数

| 字段名 | 类型 | 描述 | | :----- | ------ | ------------ | | data | Object | 虚拟信息内容 |

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

onClickMoreRoomProperties

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

场景说明

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

回调参数

| 字段名 | 类型 | 描述 | | :----- | ------ | ------------ | | data | Object | 虚拟信息内容 |

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 模型时, 出现编辑框

回调参数

| 字段名 | 类型 | 描述 | | :----- | ------ | ------------ | | data | Object | 模型信息内容 |

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 的滚动事件时

回调参数

| 字段名 | 类型 | 描述 | | :----- | ------- | -------- | | start | boolean | 手势开始 |

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

onModelLoadingProgress

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

场景说明

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

回调参数

| 字段名 | 类型 | 描述 | | :----- | ------ | -------------- | | data | Object | 模型信息和进度 |

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

onLoggerInfo

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

场景说明

回调参数

| 字段名 | 类型 | 描述 | | :----- | ------ | -------- | | data | Object | 打印日志 |

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

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

参数

| 参数名 | 参数类型 | 描述 | | ------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | indoorMapObj | Object | 地图组件示例 | | state | number | 状态0:正常状态1:指哪扫哪状态2:划区清扫状态3:编辑禁区状态4:编辑虚拟墙状态5:编辑地图分区状态6:地图分区选择状态 7: 定时分区选择状态 | | edit | boolean | true: 可编辑状态 false: 不可编辑状态 | | callback | function | 回调函数 |

示例

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

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

addLaserMapArea

向地图添加虚拟区域。

参数

| 参数名 | 参数类型 | 描述 | | ------------ | -------- | ------------ | | indoorMapObj | Object | 地图组件示例 | | area | array | 区域信息 | | callback | function | 回调函数 |

示例

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

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

getLaserMapPointsInfo

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

参数

| 参数名 | 参数类型 | 描述 | | ------------ | -------- | ------------ | | indoorMapObj | Object | 地图组件示例 | | mapId | string | 地图 Id | | callback | function | 回调函数 |

示例

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

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

updateLaserMapAreaInfo

更新区域信息

参数

| 参数名 | 参数类型 | 描述 | | | ------------ | -------- | ------------ | ------------------------ | | indoorMapObj | Object | 地图组件示例 | | | opts | object | 参数对象 | { area: {}, mapId : 000} | | callback | function | 回调函数 | |

** 示例 **

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

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

getLaserMapSplitPoint

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

| 参数名 | 参数类型 | 描述 | | | ------------ | -------- | ------------ | --------------- | | indoorMapObj | Object | 地图组件示例 | | | opts | object | 参数对象 | { mapId : 000 } | | callback | function | 回调函数 | |

** 示例 **

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

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

setLaserMapSplitType

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

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ------------ | ------------------------- | | indoorMapObj | Object | 地图组件示例 | | | opts | object | 参数对象 | { state:5, mapId : 000} | | callback | function | 回调函数 | |

** 示例 **

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 状态

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | -------------- | ---- | | indoorMapObj | Object | 地图组件示例 | | | mapId | string | 地图 Id | | | is3d | boolean | 是否是 3d 视角 | |

** 示例 **

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

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

setD3EditModeWithMapId

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

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ---------------------------- | ---- | | indoorMapObj | Object | 地图组件示例 | | | mapId | string | 地图 Id | | | editMode | boolean | 是否可以编辑 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 场景中添加模型

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ---------------------------- | ------------------------------------------------- | | indoorMapObj | Object | 地图组件示例 | | | source | Object | 模型信息 | {value: https://xxx.com/model.gltf, unionId: xxx} | | data | Object | 是否可以编辑 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 场景中移除模型

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | --------------------- | ---------------------------- | | indoorMapObj | Object | 地图组件示例 | | | target | number | 添加到场景中的模型 id | 添加完成之后可以从回调中获取 |

** 示例 **

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

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

removePathFromScene

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

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ------------ | ---- | | indoorMapObj | Object | 地图组件示例 | |

** 示例 **

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

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

removeAllModelLayer

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

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ------------ | ---- | | indoorMapObj | Object | 地图组件示例 | |

** 示例 **

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

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

reCreatePathIntoScene

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

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ------------ | ---- | | indoorMapObj | Object | 地图组件示例 | |

** 示例 **

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

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

setFloorMaterial

往场景地图中添加地板

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ------------ | ---- | | indoorMapObj | Object | 地图组件示例 | | | source | Object | 地板数据信息 | | | data | Object | 绑定模型信息 | |

** 示例 **

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

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

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ------------ | ---- | | indoorMapObj | Object | 地图组件示例 | | | lock | boolean | 是否锁住点击 | |

** 示例 **

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

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

freezeMapUpdate

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

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ---------------- | ---- | | indoorMapObj | Object | 地图组件示例 | | | freeze | boolean | 是否冻结地图更新 | |

** 示例 ** 此组件已内置在 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

获取模型的坐标点数据

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ----------------- | ---- | | indoorMapObj | Object | 地图组件示例 | | | target | number | 在地图中的模型 Id | |

** 示例 **

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

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

updateSelectRoom

选中地图选区

| 参数名 | 参数类型 | 描述 | 示例 | | -------------- | ------------------ | ------------------------ | ---- | | indoorMapObj | Object | 地图组件示例 | | | selectRoomTags | number[], string[] | 房间的 hex 或者房间的 id | | | isHex | boolean | 是否 hex 数据 | |

** 示例 **

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

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

changeAllMapAreaColor

改变分区地图的所有颜色

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | -------------- | ---- | | indoorMapObj | Object | 地图组件示例 | | | isGray | boolean | 是否设置为高亮 | |

** 示例 **

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

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

updateMapAreaColor

高亮指定区域的颜色

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | ------------------ | ------------------------ | ---- | | indoorMapObj | Object | 地图组件示例 | | | roomIds | number[], string[] | 房间的 hex 或者房间的 Id | | | isHex | boolean | 是否是 Hex 数据 | | | isGray | boolean | 是否高亮 | |

** 示例 **

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

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

clearMap

清空所有地图图层数据

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ------------ | ---- | | indoorMapObj | Object | 地图组件示例 | |

** 示例 **

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

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

changeContainerColor

改变场景背景颜色

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ------------------ | ---- | | indoorMapObj | Object | 地图组件示例 | | | color | string | 颜色 | | | is3d | boolean | 是否设置 3d 的场景 | |

** 示例 **

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

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

foldableSingleRoomInfoById

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

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ------------------------ | ---- | | indoorMapObj | Object | 地图组件示例 | | | roomId | string | 房间的 hex 或者房间的 Id | | | isHex | boolean | 是否为 Hex 数据 | | | foldable | boolean | 是否折叠 | |

** 示例 **

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 模型信息

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ------------ | ---- | | indoorMapObj | Object | 地图组件示例 | |

** 示例 **

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

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

rotateViewScene

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

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ------------ | ---- | | indoorMapObj | Object | 地图组件示例 | | | rotateAngle | number | 旋转弧度 | |

** 示例 **

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

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

removeVirtualInfoLayer

从场景中删除禁区

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | ---------------- | ------------------------------------------- | ---- | | indoorMapObj | Object | 地图组件示例 | | | target | number[], number | target 为对应虚拟信息的唯一 ID 或者索引数组 | |

** 示例 **

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

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

showPilePositionBreatheAnimation

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

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ------------ | ---- | | indoorMapObj | Object | 地图组件示例 | | | showMode | boolean | 是否显示动画 | | | animation | Object | 动画配置参数 | |

** 示例 **

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

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

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ------------ | ---- | | indoorMapObj | Object | 地图组件示例 | | | showMode | boolean | 是否显示动画 | | | animation | Object | 动画配置参数 | |

** 示例 **

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

控制是否显示睡眠动画

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ------------ | ---- | | indoorMapObj | Object | 地图组件示例 | | | showMode | boolean | 是否显示动画 | |

** 示例 **

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

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

changeMapAreaColorWithNewConfig

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

| 参数名 | 参数类型 | 描述 | 示例 | | ------------- | -------- | ------------ | ---- | | indoorMapObj | Object | 地图组件示例 | | | roomIds | boolean | 是否显示动画 | | | roomColorInfo | Object | 房间配置数据 | | | highlight | boolean | 是否高亮色彩 | |

** 示例 **


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

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

clearMapAreaColorWithNewConfig

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

| 参数名 | 参数类型 | 描述 | 示例 | | ------------ | -------- | ------------ | ---- | | indoorMapObj | Object | 地图组件示例 | |

** 示例 **

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

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