基本概念

了解 Tuya Robot Map 的核心概念。

核心组件

后续文档中，我们会使用 RobotMap 组件作为示例，你可以根据实际需求选择使用 RobotMap 或 RjsRobotMap 组件。

RobotMap 组件

React 地图组件，提供完整的地图渲染和交互功能：

<RobotMap />

TIP

• RobotMap 组件是基于 WebView 开发的，开发前请详细阅读原生组件说明。

• RobotMap 默认铺满全屏，适用于首页实时地图等场景，一个页面只能有一个 RobotMap 组件。

• 需要在小程序global.config.ts中配置webviewRoot让小程序能够正确加载RobotMap的资源。

{
  "webviewRoot": "node_modules/@ray-js/robot-map-sdk/dist-app"
}

RjsRobotMap 组件

基于Rjs开发的地图组件，它拥有和 RobotMap 组件相同的Props。

<RjsRobotMap />

TIP

RjsRobotMap 基于 Rjs 开发，它没有原生组件的限制，一个页面可以有多个 RjsRobotMap 组件。适用于多地图、弹窗里的地图 等场景。

WARNING

引入 RjsRobotMap 对页面加载速度有一定影响。如无必要场景，我们建议始终使用 RobotMap 组件。

坐标系统

地图原点坐标

地图原点是扫地机器人运行过程中确定的参考点，地图上的元素都是基于这个原点计算的相对位置。

TIP

地图原点本身是相对于地图左上角来定位的。例如在一张100 x 100(宽 x 高)的 地图中，如果原点坐标是(20, 80)，表示原点位于相对于地图左上角(20, 80)的位置。

机器坐标系

机器坐标系是机器人运行过程中使用的笛卡尔坐标系（Cartesian coordinate system），以地图原点为中心(0, 0)，X轴向上为正方向，Y轴向右为正方向。地图上所有元素的坐标都在这个坐标系下计算相对位置。

例如：

• 充电桩
• 清扫路径 (含机器人位置)
• 虚拟墙
• 禁区
• 清扫区域
• 分割线
• 其他自定义元素
• ...

TIP

本文档中，如果未特别说明，涉及到的坐标均指机器坐标系。