English | [简体中文](./README-zh_CN.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)
> Smart program component for robot vacuum cleaner maps
## [1. Installation](#1)
```sh
$ npm install @ray-js/robot-map-component
// or
$ yarn add @ray-js/robot-map-component
```
## [2. Usage](#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
```
Import the full-screen component in your project
```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 (
);
}
```
Import the dynamic width and height component in your project
```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. Parameter Description](#3)
| Property | Description | Type | Default Value | Remarks | | | | | |
| --------------------- | ------------------------------------------------------------------------------- | ----------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | --- | --- | --- | --- |
| is3d | Whether it is a 3D map | boolean | false | Public version usage; developers can ignore | | | | | |
| style | Styles for the container wrapping the map | ViewStyle | \{\} | Supported only by dynamic map components | | | | | |
| className | Class name for the container wrapping the map | string | '' | Supported only by dynamic map components | | | | | |
| configurationData | Map-related configuration options | ConfigurationData | | Static property configuration options | | | | | |
| runtimeData | Map-related configuration options | -- | | Dynamic property configuration options | | | | | |
| mapDataHex | Original map data reported by the device | string | | Map data reported via P2P channel | | | | | |
| pathDataHex | Original path data reported by the device | string | | Path data reported via P2P channel | | | | | |
| componentBackground | Background color of the outer container wrapping the map | string | transparent | Generally does not require modification | | | | | |
| initUseThread | Whether to use multithreading during initialization | boolean | false | It is recommended not to modify; this allows you to achieve faster initial loading | | | | | |
| resourceUsageLevel | Resource usage limit for the map | 'high' \| 'low' | high | It is recommended not to modify | | | | | |
| isFreezeMap | Whether to freeze the map | boolean | false | `isFreezeMap` will automatically listen in environments with navigation and stop rendering your map to save performance. Setting `isFreezeMap` to true in components like pop-ups may cause uncontrolled errors. | | | | | |
| onLaserMapPoints | Callback for virtual wall and forbidden area data during movement and operation | Function | | | | | | | |
| onMapId | Callback during map initialization | Function | | This callback cannot guarantee that all map elements have been fully loaded | | | | | |
| onDecodeMapData | Callback function after map data parsing completes | Function | | | | | | | |
| onDecodePathData | Callback function after path data parsing completes | Function | | | | | | | |
| onMapLoadEnd | Callback after map initialization completes | Function | | This callback cannot guarantee that all map elements have been fully loaded | | | | | |
| onVirtualInfoRendered | Callback after rendering virtual data boxes | Function | | | | | | | |
### [3.1 ConfigurationData Map Style Configuration Options](###3.2)
Map-related configuration data
| Property | Description | Type | Default Value | Remarks | | | | | |
| --------------------- | ------------------------------------------------ | ------- | ------------- | -------------------------------------------------- | --- | --- | --- | --- | --- |
| mapId | Unique identifier for the map component | string | | | | | | | |
| staticPrefix | Host address for static resources | string | | For public version use only; developers can ignore | | | | | |
| asynchronousLoadMap | Whether to use asynchronous rendering for layers | boolean | false | | | | | | |
| isRotate | Whether the forbidden area box supports rotation | boolean | | | | | | | |
| maxRoomPropertyLength | Maximum length of room attributes supported | number | 3 | | | | | | |
| markerIcon | Robot vacuum cleaner icon | Object | | | | | | | |
| factorInfo | Information for displaying meters | Object | | | | | | | |
| appointIcon | Icon for designating cleaning areas | string | | Supports base64 images or online images | | | | | |
| mergeRoomParams | Configuration related to room merging | | | | | | | | |
| minAreaWidth | Default minimum size for virtual areas | number | | | | | | | |
| pathWidth | Path width | number | | | | | | | |
| pilePosition | Configuration related to charging piles | Object | | | | | | | |
| posParams | Configuration related to point cleaning | Object | | | | | | | |
| robotParams | Configuration related to the robot vacuum | Object | | | | | | | |
| roomStyleConfig | Configuration related to room names | Object | | | | | | | |
| roomAttributesConfig | Room cleaning attributes | Object | | | | | | | |
| pathConfig | Configuration related to paths | Object | | | | | | | |