@ray-js/hybrid-robot-map NPM

开始

IndoorMapInstance 是 IndoorMap 的 Web 组件实现, 您可以在 Web，涂鸦小程序，React Native 的 WebView 技术栈中使用它来进行扫地机器人地图的业务开发。

如果您需要在涂鸦小程序技术栈中或 Web 技术栈, React Native 的 WebView 中使用, 请您涂鸦智能提供IndoorMapInstance的实例进行开发。

如果您想要在RN 体系中直接获得RN 体系的地图能力, 请直接使用涂鸦智能机器人前端团队提供的@tuya/rn-robot-map Library 进行业务上的使用

IndoorMapInstance 同时也是基于涂鸦机器人协议的地图能力集成库, 可以为您快速提供行业机器人最新的地图能力, 帮您在可视化上获得竞争力。

如果您需要使用它，请务必确保使用涂鸦智能的相关机器人协议和平台。

如何使用

安装@ray-js/hybrid-robot-map

$ yarn add @ray-js/hybrid-robot-map

使用IndoorMapInstance组件

import { IndoorMapInstance } from '@ray-js/hybrid-robot-map';

this.indoorMapInstance = new IndoorMapInstance({
  isMobile: true,
  container: canvas,
  antialias: true,
  pixelRatio: pixelRatio,
  preserveDrawingBuffer: true,
  logarithmicDepthBuffer: true,
  onMapId: this._onMapId,
  onClickSplitArea: this._onClickSplitArea,
  onClickRoom: this._onClickRoom,
  onLaserMapPoints: this._onLaserMapPoints,
  onLongPressInAreaView: this._onLongPressInAreaView,
  onLoggerInfo: this._onLoggerInfo,
  onClickModel: this._onClickModel,
  onModelLoadingProgress: this._onModelLoadingProgress,
  onMapLoadEnd: this._onMapLoadEnd,
  onGestureChange: this._onGestureChange,
  onPosPoints: this._onPosPoints,
  onClickRoomProperties: this._onClickRoomProperties,
  onClickMapView: this._onClickMapView,
  onSplitLine: this._onSplitLine,
  onRobotPositionChange: this._onRobotPositionChange,
  onRenderContextLost: this._onRenderContextLost,
  onRenderContextRestored: this._onRenderContextRestored,
});

使用IndoorMapInstance组件提供的方法

import { IndoorMapInstance } from '@ray-js/hybrid-robot-map';

// 初始化一个公版业务扫地机的地图管理实例
this.indoorMapInstance = new IndoorMapInstance({
  isMobile: true,
  container: canvas,
  antialias: true,
  pixelRatio: pixelRatio,
  preserveDrawingBuffer: true,
  logarithmicDepthBuffer: true,
  onMapId: this._onMapId,
  onClickSplitArea: this._onClickSplitArea,
  onClickRoom: this._onClickRoom,
  onLaserMapPoints: this._onLaserMapPoints,
  onLongPressInAreaView: this._onLongPressInAreaView,
  onLoggerInfo: this._onLoggerInfo,
  onClickModel: this._onClickModel,
  onModelLoadingProgress: this._onModelLoadingProgress,
  onMapLoadEnd: this._onMapLoadEnd,
  onGestureChange: this._onGestureChange,
  onPosPoints: this._onPosPoints,
  onClickRoomProperties: this._onClickRoomProperties,
  onClickMapView: this._onClickMapView,
  onSplitLine: this._onSplitLine,
});

// 先创建一个2d状态下的扫地机图元
this.indoorMapInstance.createRobot('https://xxxx.xxx.xxx/robot.png', false);