[English](./README.md) | 简体中文
# @ray-js/robot-map-component
[](https://www.npmjs.com/package/@ray-js/robot-map-component) [](https://www.npmjs.com/package/@ray-js/robot-map-component)
> 扫地机地图智能小程序组件
## [1.安装](#1)
```sh
$ npm install @ray-js/robot-map-component
// 或者
$ yarn add @ray-js/robot-map-component
```
## [2.使用](#2)
Tuya MiniApp Tools >= 0.5.10
Basic Lib >= 2.15.0
Tuya App Basic Line > 5.8.0
```shell
yarn add @ray-js/robot-map-component
```
项目中引入全屏组件组件
```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { IndoorMap } from '@ray-js/robot-map-component';
import styles from './index.module.less';
export default function Home() {
return (
);
}
```
项目中引入动态宽高组件
```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { IndoorMap } from '@ray-js/robot-map-component';
import styles from './index.module.less';
export default function Home() {
return (
);
}
```
## [3.参数说明](#3)
| 属性 | 说明 | 类型 | 默认值 | 说明 | | | | | |
| --------------------- | ------------------------------------------ | ----------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | --- | --- | --- | --- |
| is3d | 是否为 3D 地图 | boolean | false | 公版使用，开发者可忽略 | | | | | |
| style | 包裹地图容器的样式 | ViewStyle | \{\} | 仅动态地图组件支持 | | | | | |
| className | 包裹地图容器的类名 | string | '' | 仅动态地图组件支持 | | | | | |
| configurationData | 地图相关配置项 | ConfigurationData | | 静态属性配置项 | | | | | |
| runtimeData | 地图相关配置项 | -- | | 动态属性配置项 | | | | | |
| mapDataHex | 设备上报的地图原始数据 | string | | P2P 通道上报的地图数据 | | | | | |
| pathDataHex | 设备上报的路径原始数据 | string | | P2P 通道上报的路径数据 | | | | | |
| componentBackground | 包裹地图的外容器背景颜色 | string | transparent | 一般不用做修改 | | | | | |
| initUseThread | 是否初始化的时候使用多线程 | boolean | false | 建议不要修改, 以此您可以获得更快的首屏加载 | | | | | |
| resourceUsageLevel | 地图使用资源限制 | 'high'\\\|'low' | high | 建议不要修改 | | | | | |
| isFreezeMap | 是否需要冻结地图 | boolean | false | isFreezeMap 将在具备有 navigation 的环境下自动监听，并将您的地图停止渲染已节约性能。如果您在一些例如弹窗组件中设置 isFreezeMap 为 true, 程序有可能产生不受控的错误 | | | | | |
| onLaserMapPoints | 在移动和操作禁区，虚拟墙等虚心类型数据时触 | Function | | | | | | | |
| onMapId | 地图初始化时的回调 | Function | | 此回调不能保证地图元素已经全部加载完成 | | | | | |
| onDecodeMapData | 地图数据解析完成后的回调函数 | Function | | | | | | | |
| onDecodePathData | 路径数据解析完成后的回调函 | Function | | | | | | | |
| onMapLoadEnd | 地图初始化完成后的回调 | Function | | 此回调不能保证地图元素已经全部加载完成 | | | | | |
| onVirtualInfoRendered | 虚拟数据框渲染完成后的回调 | Function | | | | | | | |
### [3.1 ConfigurationData 地图样式相关配置项](###3.2)
地图相关的配置数据
| 属性 | 说明 | 类型 | 默认值 | 备注 | | | | | |
|-----------------------|---------------|---------|-------|-----------------|---|---|---|---|---|
| mapId | 地图组件的唯一标识 | string | | | | | | | |
| staticPrefix | 静态资源的 host 地址 | string | | 仅公版使用,开发者可忽略 | | | | | |
| asynchronousLoadMap | 是否采用异步渲染图层 | boolean | false | | | | | | |
| isRotate | 禁区框是否支持旋转 | boolean | | | | | | | |
| maxRoomPropertyLength | 房间属性支持的最大长度 | number | 3 | | | | | | |
| markerIcon | 扫地机图标 | Object | | | | | | | |
| factorInfo | 米数显示信息 | Object | | | | | | | |
| appointIcon | 指哪扫哪的 icon | string | | 支持 base64 图片或网络图片 | | | | | |
| mergeRoomParams | 房间合并相关配置 | | | | | | | | |
| minAreaWidth | 默认的最小虚拟区尺寸 | number | | | | | | | |
| pathWidth | 路径宽度 | number | | | | | | | |
| pilePosition | 充电桩相关配置 | Object | | | | | | | |
| posParams | 定点清扫相关配置 | Object | | | | | | | |
| robotParams | 扫地机相关配置 | Object | | | | | | | |
| roomStyleConfig | 房间名称相关配置 | Object | | | | | | | |
| roomAttributesConfig | 房间清扫属性 | Object | | | | | | | |
| pathConfig | 路径相关配置 | Object | | | | | | | |