English | 简体中文

@ray-js/robot-map-component

Smart program component for robot vacuum cleaner maps

1. Installation

$ npm install @ray-js/robot-map-component
// or
$ yarn add @ray-js/robot-map-component

2. Usage

Tuya MiniApp Tools >= 0.5.10
Basic Lib >= 2.15.0
Tuya App Basic Line > 5.8.0

yarn add @ray-js/robot-map-component

Import the full-screen component in your project

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 (
    <View className={styles.view}>
      <IndoorMap.Full />
    </View>
  );
}

Import the dynamic width and height component in your project

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 (
    <View className={styles.view}>
      <IndoorMap.Dynamic />
    </View>
  );
}

3. Parameter Description

| 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

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