Appearance
配置
了解 RobotMap 的静态配置选项,用于定制地图的视觉样式、素材资源、交互行为等一次性配置项。
TIP
- 本文档部分配置项的单位与米相关,该配置的值会根据地图数据里的分辨率转换为像素单位。
使用示例
静态配置通过 config 传递,所有配置项都是可选的,你可以只覆盖需要修改的部分。
tsx
import React from 'react'
import { RobotMap } from '@ray-js/robot-map'
function MapPage() {
const config = useMemo(() => {
return {
global: {
backgroundColor: 0xf6f6f6,
},
path: {
commonPath: { color: '#ffffff' },
chargePath: { color: '#800080' },
},
robot: {
icon: {
width: 24,
height: 24,
src: 'path/to/robot-icon.png',
},
},
interaction: {
enableDoubleTapZoom: true,
},
}
}, [])
return (
<RobotMap
config={config}
// ... 其他props
/>
)
}类型: DeepPartialAppConfig
配置对象的所有属性都是可选的,你可以只覆盖需要修改的部分:
tsx
<RobotMap
config={{
global: { backgroundColor: '#f6f6f6' }, // 覆盖默认值
robot: {
icon: { width: 12, height: 12 },
speed: 0.3,
},
}}
/>global
全局容器配置,控制地图容器的位置、尺寸和背景。
global.containerTop
- 类型:
string - 默认值:
'0px'
容器距离顶部的位置。支持 px、%、vw、vh、rpx 单位。
global.containerLeft
- 类型:
string - 默认值:
'0px'
容器距离左侧的位置。支持 px、%、vw、vh、rpx 单位。
global.containerWidth
- 类型:
string - 默认值:
'100%'
容器宽度。支持 px、%、vw、vh、rpx 单位。
global.containerHeight
- 类型:
string - 默认值:
'100%'
容器高度。支持 px、%、vw、vh、rpx 单位。
global.backgroundColor
- 类型:
ColorSource - 默认值:
'#f6f6f6'
地图容器背景颜色。
global.backgroundAlpha
- 类型:
number - 默认值:
1
地图容器背景透明度。
interaction
交互配置,控制地图的缩放和手势操作。
interaction.zoomRange
缩放范围配置。
interaction.zoomRange.min
- 类型:
number - 默认值:
0.5
地图初始化后,支持的最小缩放倍数
interaction.zoomRange.max
- 类型:
number - 默认值:
8
地图初始化后,支持的最大缩放倍数
interaction.fitMinScale
- 类型:
number - 默认值:
1
自适应缩放时的最小比例。限制地图缩小的最小程度。
interaction.fitMaxScale
- 类型:
number - 默认值:
4
自适应缩放时的最大比例。限制地图放大的最大程度。
TIP
关于自适应缩放的完整说明,包括触发时机、计算逻辑和常见问题,请参阅 自适应缩放。
interaction.enableDoubleTapZoom
- 类型:
boolean - 默认值:
true
是否启用双击缩放功能
map
地图配置。
map.autoPaddingHorizontalPercent
- 类型:
number - 默认值:
0.05
地图自适应时水平方向保留的最小边距比例(相对于视口宽度)。地图完成自适应后,左右边距不小于该比例值。
map.autoPaddingVerticalPercent
- 类型:
number - 默认值:
0.05
地图自适应时垂直方向保留的最小边距比例(相对于视口高度)。地图完成自适应后,上下边距不小于该比例值。
TIP
这两个配置用于计算自适应缩放时的初始缩放比例。关于自适应缩放的完整说明,请参阅 自适应缩放。
map.obstacleColor
- 类型:
ColorSource - 默认值:
'#999999'
障碍点显示颜色。
map.freeColor
- 类型:
ColorSource - 默认值:
'#ebebeb'
自由区域点显示颜色。(仅结构化地图可用)
map.adjacencyThreshold
- 类型:
number - 默认值:
3 - 单位:
px
房间相邻判定阈值。
用于判断两个房间是否相邻的算法。两个房间的边界点距离小于等于此阈值时,认为它们相邻。
map.originChangeAutoFitThreshold
- 类型:
number - 默认值:
2
地图原点变化自适应阈值。当地图 origin 的 x 或 y 变化超过此值时,将触发自适应缩放。
TIP
这是触发自适应缩放的条件之一。关于自适应缩放的完整说明,请参阅 自适应缩放。
map.sizeChangeAutoFitThreshold
- 类型:
number - 默认值:
10
地图尺寸变化自适应阈值。当地图宽度或高度变化超过此值时,将触发自适应缩放。
TIP
这是触发自适应缩放的条件之一。关于自适应缩放的完整说明,请参阅 自适应缩放。
room
房间配置,控制房间的颜色、名称、属性显示等。
room.colors
房间颜色配置对象。
智能配色
SDK 使用智能配色算法,自动确保相邻房间颜色不同。
- 建议至少提供 4 种颜色(基于四色定理,4种颜色足以满足平面地图需求)
- 所有数组类型的颜色配置(
active、inactive、name、propertyTheme等)建议长度一致 - 如果有复杂的相邻房间情况,可以尝试增加更多的颜色,以确保相邻房间颜色不同
关于智能配色算法的完整说明、配色策略和实际案例,请参阅 房间智能配色。
room.colors.sortBy
- 类型:
'index' | 'area' - 默认值:
'index'
房间颜色排序方式。
index:按房间ID排序,保持颜色分配稳定。area:按房间面积排序,大房间将优先分配索引靠前的颜色。
WARNING
使用 area 可能会导致机器导航过程中颜色的突然变化(房间大小变化引起),建议谨慎使用。
room.colors.strategy
- 类型:
'priority' | 'balanced' - 默认值:
'balanced'
房间颜色分配策略。
priority:靠前优先,索引靠前的颜色将被优先使用。balanced:均匀分配,颜色将被尽可能均匀地使用。
room.colors.active
- 类型:
string[] - 默认值:
['#a8c8f5', '#9de5c7', '#d4b9f7', '#ffd399']
房间激活状态的颜色数组。
room.colors.inactive
- 类型:
string[] - 默认值:
['#d6e7fc', '#d1f4e5', '#ece0fb', '#fff0d9']
房间非激活状态的颜色数组。
颜色索引与 active 对应,建议长度保持一致。
room.colors.name
- 类型:
string[] - 默认值:
['#2563b8', '#26966b', '#7c3fb8', '#d97706']
房间名称标签的颜色数组。
颜色索引与 active 对应,建议长度保持一致。
room.colors.propertyTheme
- 类型:
string[] - 默认值:
['#2563b8', '#26966b', '#7c3fb8', '#d97706']
房间属性图标主题颜色数组。
颜色索引与 active 对应,建议长度保持一致。
room.colors.selectionIndicatorBackground
- 类型:
string[] - 默认值:
['#2563b8', '#26966b', '#7c3fb8', '#d97706']
选择指示器背景颜色数组。
颜色索引与 active 对应,建议长度保持一致。
room.colors.selectionIndicatorIcon
- 类型:
string[] - 默认值:
['#ffffff', '#ffffff', '#ffffff', '#ffffff']
选择指示器图标颜色数组。
颜色索引与 active 对应,建议长度保持一致。
room.colors.NO_ROOM_DATA
- 类型:
string - 默认值:
'#ebebeb'
无房间数据区域的颜色 (点阵协议专用)。
room.colors.ROOM_GAP
- 类型:
string - 默认值:
'#ebebeb'
房间间隙的颜色 (点阵协议专用)。
room.colors.OBSTACLE_ROOM
- 类型:
string - 默认值:
'#ebebeb'
障碍物房间的颜色 (点阵协议专用)。
room.colors.UNKNOWN_ROOM
- 类型:
string - 默认值:
'#ebebeb'
未知房间的颜色。对于结构化协议代表 roomId >= 255 的房间颜色。
room.nameLabel
房间名称标签配置。
room.nameLabel.fontSize
- 类型:
number - 默认值:
10 - 单位:
px
房间名称字体大小。
room.nameLabel.fontFamily
- 类型:
string - 默认值:
'system-ui, -apple-system, sans-serif'
房间名称字体名称。
room.nameLabel.fontWeight
- 类型:
TextStyleFontWeight - 默认值:
'500'
房间名称字体粗细。
room.property
房间属性配置。
room.property.displayOrders
- 类型:
('cleanMode' | 'suction' | 'cistern' | 'cleanTimes')[] - 默认值:
['cleanMode', 'suction', 'cistern', 'cleanTimes']
房间属性显示顺序。
你也可以传入自定义的字段名,比如 ['cleanMode', 'suction', 'cistern', 'cleanTimes', 'customProperty1']。
TIP
如果要隐藏某个房间属性,比如 cleanTimes,那么清扫次数图标将不会显示。
room.property.customAssets
- 类型:
Record<string, string[]> - 默认值:
{}
自定义属性图标资源配置,
你可以传入自定义的字段名和对应的图标资源数组,比如:
ts
{
room: {
property: {
displayOrders: ['cleanMode', 'suction', 'customProperty1','cistern', 'cleanTimes', 'customProperty2'],
customAssets: {
customProperty1: [
'your_custom_property_asset_url_0',
'your_custom_property_asset_url_1',
'your_custom_property_asset_url_2',
'your_custom_property_asset_url_3',
],
customProperty2: [
'your_custom_property_asset_url_0',
'your_custom_property_asset_url_1',
'your_custom_property_asset_url_2',
'your_custom_property_asset_url_3',
],
},
},
}
}TIP
使用图标资源时,强烈建议使用白色图标,以便 SDK 能够根据房间主题色(room.colors.propertyTheme)自动调整图标颜色。
room.property.iconWidth
- 类型:
number - 默认值:
12 - 单位:
px
房间属性图标宽度。
room.property.iconHeight
- 类型:
number - 默认值:
12 - 单位:
px
房间属性图标高度。
room.property.foldable
- 类型:
boolean - 默认值:
true
房间属性是否可折叠。
room.property.offsetX
- 类型:
number - 默认值:
0 - 单位:
px
房间属性X轴偏移。
room.property.offsetY
- 类型:
number - 默认值:
4 - 单位:
px
房间属性Y轴偏移。
room.property.iconGap
- 类型:
number - 默认值:
0 - 单位:
px
房间属性图标间距。
room.property.container
房间属性容器样式配置。
room.property.container.backgroundColor
- 类型:
ColorSource - 默认值:
'#ffffff'
房间属性容器背景颜色。
room.property.container.paddingVertical
- 类型:
number - 默认值:
1.5 - 单位:
px
房间属性容器垂直内边距。
room.property.container.paddingHorizontal
- 类型:
number - 默认值:
1.5 - 单位:
px
房间属性容器水平内边距。
room.property.container.borderRadius
- 类型:
number - 默认值:
16 - 单位:
px
房间属性容器边框圆角。
room.property.container.tailHeight
- 类型:
number - 默认值:
2 - 单位:
px
房间属性容器气泡三角形高度。
room.property.container.tailWidth
- 类型:
number - 默认值:
10 - 单位:
px
房间属性容器气泡三角形宽度。
room.property.suction
吸力图标配置。
room.property.suction.assets
- 类型:
string[] - 默认值:
[内置资源, ...]
吸力等级图标资源数组。建议传入的图标资源数量与吸力等级数量一致。
数组索引对应 RoomProperty.suction 值,即 assets[suction] 显示对应等级的图标。
TIP
使用图标资源时,强烈建议使用白色图标,以便 SDK 能够根据房间主题色(room.colors.propertyTheme)自动调整图标颜色。
room.property.cistern
水量图标配置。
room.property.cistern.assets
- 类型:
string[] - 默认值:
[内置资源, ...]
水量图标资源数组。建议传入的图标资源数量与水量等级数量一致。
数组索引对应 RoomProperty.cistern 值,即 assets[cistern] 显示对应等级的图标。
TIP
使用图标资源时,强烈建议使用白色图标,以便 SDK 能够根据房间主题色(room.colors.propertyTheme)自动调整图标颜色。
room.property.cleanMode
清扫模式图标配置。
room.property.cleanMode.assets
- 类型:
string[] - 默认值:
[内置资源, ...]
清扫模式图标资源数组。建议传入的图标资源数量与清扫模式等级数量一致。
数组索引对应 RoomProperty.cleanMode 值,即 assets[cleanMode] 显示对应等级的图标。
TIP
使用图标资源时,强烈建议使用白色图标,以便 SDK 能够根据房间主题色(room.colors.propertyTheme)自动调整图标颜色。
room.property.cleanTimes
清扫次数图标配置。
room.property.cleanTimes.assets
- 类型:
string[] - 默认值:
[内置资源, ...]
清扫次数图标资源数组。建议传入的图标资源数量与清扫次数等级数量一致。
数组索引对应 RoomProperty.cleanTimes - 1 值,即 assets[cleanTimes - 1] 显示对应等级的图标。
TIP
清扫次数的图标规则相对特殊,因为实际不存在0次清扫,所以数组索引需要减1。
TIP
使用图标资源时,强烈建议使用白色图标,以便 SDK 能够根据房间主题色(room.colors.propertyTheme)自动调整图标颜色。
room.property.cleanOrder
清扫顺序配置。
room.property.cleanOrder.color
- 类型:
ColorSource - 默认值:
'#ffffff'
清扫顺序文字颜色。
room.property.cleanOrder.fontFamily
- 类型:
string - 默认值:
'system-ui, -apple-system, sans-serif'
清扫顺序字体名称。
room.property.cleanOrder.fontWeight
- 类型:
TextStyleFontWeight - 默认值:
'400'
清扫顺序字体粗细。
room.property.cleanOrder.fontSize
- 类型:
number - 默认值:
8 - 单位:
px
清扫顺序字体大小。
room.property.cleanOrder.gapRight
- 类型:
number - 默认值:
2 - 单位:
px
清扫顺序右侧间距。
room.selectionIndicator
房间选择指示器配置。
TIP
enableRoomSelection 为 true 时
- 如果
roomSelectionMode为checkmark,选中的房间会显示选择指示器。 - 如果
roomSelectionMode为order,选中的房间会显示房间顺序。
room.selectionIndicator.iconSrc
- 类型:
string - 默认值:
内置资源
选择指示器图标资源路径。
room.selectionIndicator.iconWidth
- 类型:
number - 默认值:
12 - 单位:
px
选择指示器图标宽度。
room.selectionIndicator.iconHeight
- 类型:
number - 默认值:
12 - 单位:
px
选择指示器图标高度。
room.selectionIndicator.containerWidth
- 类型:
number - 默认值:
16 - 单位:
px
选择指示器容器宽度。
room.selectionIndicator.containerHeight
- 类型:
number - 默认值:
16 - 单位:
px
选择指示器容器高度。
room.selectionIndicator.strokeWidth
- 类型:
number - 默认值:
2 - 单位:
px
选择指示器描边宽度。
room.selectionIndicator.strokeColor
- 类型:
ColorSource | 'auto' - 默认值:
'#ffffff'
选择指示器描边颜色,同时控制边框和尾部箭头的颜色。
可选值:
- 颜色值(如
'#ffffff'、'rgb(255, 255, 255)'等):所有选择指示器使用固定的描边颜色 'auto':描边颜色自动跟随room.colors.selectionIndicatorBackground的主题色,实现每个房间的选择指示器边框与背景色保持一致
room.selectionIndicator.borderRadius
- 类型:
number - 默认值:
16 - 单位:
px
选择指示器边框圆角。
room.selectionIndicator.offsetX
- 类型:
number - 默认值:
0 - 单位:
px
选择指示器X轴偏移。
room.selectionIndicator.offsetY
- 类型:
number - 默认值:
4 - 单位:
px
选择指示器Y轴偏移。
room.selectionIndicator.tailHeight
- 类型:
number - 默认值:
2 - 单位:
px
选择指示器气泡三角形高度。
room.selectionIndicator.tailWidth
- 类型:
number - 默认值:
6 - 单位:
px
选择指示器气泡三角形宽度。
room.floorType
地板材质配置。
room.floorType.assets
- 类型:
string[] - 默认值:
['', '内置瓷砖资源', '内置木地板(横向)资源', '内置木地板(纵向)资源']
地板材质图标资源数组。建议传入的图标资源数量与地板材质等级数量一致。
数组索引对应 RoomProperty.floorType 值,即 assets[floorType] 显示对应等级的图标。
TIP
- 强烈建议使用材质的最小重复单元的图片资源以提升性能。
- 通常
floorType值为0时,表示无地板材质。这种情况下assets[0]可以设置为空字符串。
room.floorType.opacity
- 类型:
number - 默认值:
0.1
地板材质透明度。
room.floorType.scale
- 类型:
number - 默认值:
0.2
地板材质缩放系数。
room.enableElasticScale
- 类型:
boolean - 默认值:
false
是否启用 RoomInfo 弹性缩放。
room.elasticMinScale
- 类型:
number - 默认值:
0.6
RoomInfo 最小弹性缩放倍数。
当地图缩小到一定程度时,RoomInfo 会缩小到此倍数。
room.elasticMaxScale
- 类型:
number - 默认值:
1.5
RoomInfo 最大弹性缩放倍数。
当地图放大到一定程度时,RoomInfo 会放大到此倍数。
path
路径配置。
path.lineWidthFixed
- 类型:
boolean - 默认值:
false
路径线条宽度是否固定(不跟随地图缩放变化)
path.incrementalThreshold
- 类型:
number - 默认值:
5
路径增量绘制检测阈值。
TIP
地图组件默认会开启路径增量绘制以提升性能。
当传入的路径相比上一次绘制的路径点数量变化不超过 incrementalThreshold 时,使用增量绘制 (仅绘制新增的部分),否则使用全量绘制 (重新绘制整条路径)。
设置为0时将关闭路径增量绘制。
path.commonPath
清扫路径配置。
path.commonPath.visible
- 类型:
boolean - 默认值:
true
清扫路径是否可见
path.commonPath.color
- 类型:
ColorSource - 默认值:
'#ffffff'
清扫路径颜色
path.commonPath.width
- 类型:
number - 默认值:
0.5 - 单位:
px
清扫路径宽度
path.transitionPath
转场路径配置。
path.transitionPath.visible
- 类型:
boolean - 默认值:
false
转场路径是否可见
path.transitionPath.color
- 类型:
ColorSource - 默认值:
'#ffffff'
转场路径颜色
path.transitionPath.width
- 类型:
number - 默认值:
0.5 - 单位:
px
转场路径宽度
path.chargePath
回充路径配置。
path.chargePath.visible
- 类型:
boolean - 默认值:
false
回充路径是否可见
path.chargePath.color
- 类型:
ColorSource - 默认值:
'#ffffff'
回充路径颜色
path.chargePath.width
- 类型:
number - 默认值:
0.5 - 单位:
px
回充路径宽度
carpet
地毯配置,控制地毯区域的显示效果。
carpet.src
- 类型:
string - 默认值:
内置资源
地毯资源路径
TIP
强烈建议传入最小重复单元的图片资源以提升性能。
carpet.opacity
- 类型:
number - 默认值:
0.5
地毯透明度
carpet.scale
- 类型:
number - 默认值:
0.2
地毯缩放系数
robot
机器人配置,控制机器人图标、动画和预警圈的显示。
robot.icon
机器人图标配置。
robot.icon.sizeFixed
- 类型:
boolean - 默认值:
false
机器人图标尺寸是否固定(不跟随地图缩放变化)。
robot.icon.width
- 类型:
number - 默认值:
8 - 单位:
px
机器人图标宽度。
robot.icon.height
- 类型:
number - 默认值:
8 - 单位:
px
机器人图标高度。
robot.icon.src
- 类型:
string - 默认值:
内置资源
机器人图标资源路径。
robot.speed
- 类型:
number - 默认值:
0 - 单位:
米/秒
机器人移动速度,用于路径动画。
路径数据变化时,机器人和增量路径会按照 speed 配置的速度进行动画。
TIP
speed 设置为0可以关闭路径动画,机器人会直接绘制到目标位置。
robot.rotationCorrection
- 类型:
number - 默认值:
0 - 单位:
度
机器人图标角度校正,用于校正图标默认朝向。
0度表示图标朝右,角度值按顺时针方向递增。
robot.sleepAnimation
机器人睡眠动画配置。
robot.sleepAnimation.jsonSrc
- 类型:
string - 默认值:
内置资源
睡眠动画JSON资源路径,使用TexturePacker生成的JSON文件
robot.sleepAnimation.imageSrc
- 类型:
string - 默认值:
内置资源
睡眠动画图片资源路径,使用TexturePacker生成的图片资源。
robot.sleepAnimation.imageSrc
- 类型:
string - 默认值:
内置资源
睡眠动画图片资源路径,使用TexturePacker生成的图片资源。
robot.sleepAnimation.framePrefix
- 类型:
string - 默认值:
'sleep_'
动画帧名称前缀。
robot.sleepAnimation.width
- 类型:
number - 默认值:
16 - 单位:
px
睡眠动画宽度。
robot.sleepAnimation.height
- 类型:
number - 默认值:
16 - 单位:
px
睡眠动画高度。
robot.sleepAnimation.sizeFixed
- 类型:
boolean - 默认值:
false
睡眠动画尺寸是否固定。
robot.sleepAnimation.frameCount
- 类型:
number - 默认值:
96
动画总帧数。
robot.sleepAnimation.offsetX
- 类型:
number - 默认值:
8 - 单位:
px
睡眠动画X轴偏移。
robot.sleepAnimation.offsetY
- 类型:
number - 默认值:
-8 - 单位:
px
睡眠动画Y轴偏移。
robot.ring
机器人预警圈配置。
robot.ring.size
- 类型:
number - 默认值:
1 - 单位:
米
预警圈大小。
robot.ring.color
- 类型:
ColorSource - 默认值:
'rgba(255, 68, 68, 0.2)'
预警圈填充颜色。
robot.ring.strokeWidth
- 类型:
number - 默认值:
1 - 单位:
px
预警圈描边宽度。
robot.ring.strokeColor
- 类型:
ColorSource - 默认值:
'#ffffff'
预警圈描边颜色。
robot.ring.strokeDashed
- 类型:
boolean - 默认值:
true
预警圈描边是否为虚线。
robot.ring.strokeDashArray
- 类型:
[number, number] - 默认值:
[4, 4] - 单位:
px
预警圈虚线样式 [实线长度, 间隙长度]。
robot.pulseCircle
机器人脉冲圈配置,控制呼吸动画效果。
robot.pulseCircle.size
- 类型:
number - 默认值:
12 - 单位:
px
脉冲圈的大小(直径)。
robot.pulseCircle.color
- 类型:
ColorSource - 默认值:
'#4cd964'
脉冲圈填充颜色。
robot.pulseCircle.strokeWidth
- 类型:
number - 默认值:
0 - 单位:
px
脉冲圈描边宽度。
robot.pulseCircle.strokeColor
- 类型:
ColorSource - 默认值:
'#ffffff'
脉冲圈描边颜色。
robot.pulseCircle.duration
- 类型:
number - 默认值:
1000 - 单位:
毫秒
脉冲圈呼吸动画的持续时间(一个完整的呼吸周期)。
robot.pulseCircle.sizeFixed
- 类型:
boolean - 默认值:
false
脉冲圈尺寸是否固定(不跟随地图缩放变化)。
robot.pulseCircle.minScale
- 类型:
number - 默认值:
0.5
呼吸动画的最小缩放比例。
robot.pulseCircle.maxScale
- 类型:
number - 默认值:
1
呼吸动画的最大缩放比例。
robot.pulseCircle.minAlpha
- 类型:
number - 默认值:
0.5
呼吸动画的最小透明度(0-1 之间)。
robot.pulseCircle.maxAlpha
- 类型:
number - 默认值:
1
呼吸动画的最大透明度(0-1 之间)。
TIP
通过调整 minScale/maxScale 和 minAlpha/maxAlpha 可以自定义呼吸效果的幅度和透明度变化。 例如,更大的缩放范围(如 0.4 到 1.2)会产生更明显的呼吸效果。
chargingStation
充电桩配置,控制充电桩图标和预警圈的显示。
chargingStation.icon
充电桩图标配置。
chargingStation.icon.sizeFixed
- 类型:
boolean - 默认值:
false
充电桩图标尺寸是否固定。
chargingStation.icon.width
- 类型:
number - 默认值:
8 - 单位:
px
充电桩图标宽度。
chargingStation.icon.height
- 类型:
number - 默认值:
8 - 单位:
px
充电桩图标高度。
chargingStation.icon.src
- 类型:
string - 默认值:
内置资源
充电桩图标资源路径。
chargingStation.rotationCorrection
- 类型:
number - 默认值:
0 - 单位:
度
充电桩图标角度校正,用于校正图标默认朝向。
0度表示图标朝右,角度值按顺时针方向递增。
chargingStation.ring
充电桩预警圈配置。
chargingStation.ring.size
- 类型:
number - 默认值:
1 - 单位:
米
预警圈大小。
chargingStation.ring.color
- 类型:
ColorSource - 默认值:
'rgba(255, 68, 68, 0.2)'
预警圈填充颜色。
chargingStation.ring.strokeWidth
- 类型:
number - 默认值:
1 - 单位:
px
预警圈描边宽度。
chargingStation.ring.strokeColor
- 类型:
ColorSource - 默认值:
'#ffffff'
预警圈描边颜色。
chargingStation.ring.strokeDashed
- 类型:
boolean - 默认值:
true
预警圈描边是否为虚线。
chargingStation.ring.strokeDashArray
- 类型:
[number, number] - 默认值:
[4, 4] - 单位:
px
预警圈虚线样式 [实线长度, 间隙长度]。
controls
控制元素配置,包括各种编辑工具的样式和行为设置。
controls.iconWrapperWidth
- 类型:
number - 默认值:
24 - 单位:
px
操作按钮图标容器宽度
controls.iconWrapperHeight
- 类型:
number - 默认值:
24 - 单位:
px
操作按钮图标容器高度
controls.iconWrapperBorderRadius
- 类型:
number - 默认值:
16 - 单位:
px
操作按钮图标容器边框圆角
controls.iconWidth
- 类型:
number - 默认值:
12 - 单位:
px
操作按钮图标宽度
controls.iconHeight
- 类型:
number - 默认值:
12 - 单位:
px
操作按钮图标高度
controls.deleteIconSrc
- 类型:
string - 默认值:
内置资源
删除按钮图标资源路径
controls.rotateIconSrc
- 类型:
string - 默认值:
内置资源
旋转按钮图标资源路径
controls.scaleIconSrc
- 类型:
string - 默认值:
内置资源
缩放按钮图标资源路径
controls.moveIconSrc
- 类型:
string - 默认值:
内置资源
移动按钮图标资源路径
controls.moveButtonOffset
- 类型:
number - 默认值:
30 - 单位:
px
移动按钮偏移距离
controls.textFontSize
- 类型:
number - 默认值:
12 - 单位:
px
尺寸标签文本字体大小
controls.textFontFamily
- 类型:
string - 默认值:
'system-ui, -apple-system, sans-serif'
尺寸标签文本字体名称
controls.textFontWeight
- 类型:
TextStyleFontWeight - 默认值:
'400'
尺寸标签文本字体粗细
controls.forbiddenSweepZone
禁扫区域配置。
controls.forbiddenSweepZone.minSize
- 类型:
number - 默认值:
1 - 单位:
米
禁扫区域最小尺寸
controls.forbiddenSweepZone.iconWrapperFillColor
- 类型:
ColorSource - 默认值:
'#ff4444'
图标容器填充颜色
controls.forbiddenSweepZone.strokeColor
- 类型:
ColorSource - 默认值:
'#ff4444'
禁扫区域描边颜色
controls.forbiddenSweepZone.strokeWidth
- 类型:
number - 默认值:
2 - 单位:
px
禁扫区域描边宽度
controls.forbiddenSweepZone.fillColor
- 类型:
ColorSource - 默认值:
'rgba(255, 68, 68, 0.1)'
禁扫区域填充颜色
controls.forbiddenSweepZone.outlineOffset
- 类型:
number - 默认值:
16 - 单位:
px
禁扫区域编辑轮廓偏移
controls.forbiddenSweepZone.outlineStrokeColor
- 类型:
ColorSource - 默认值:
'#ff4444'
禁扫区域编辑轮廓描边颜色
controls.forbiddenSweepZone.outlineStrokeWidth
- 类型:
number - 默认值:
2 - 单位:
px
禁扫区域编辑轮廓描边宽度
controls.forbiddenSweepZone.outlineDashed
- 类型:
boolean - 默认值:
true
禁扫区域编辑轮廓是否为虚线
controls.forbiddenSweepZone.outlineDashArray
- 类型:
[number, number] - 默认值:
[4, 3] - 单位:
px
禁扫区域编辑轮廓虚线样式
controls.forbiddenSweepZone.outlineFillColor
- 类型:
ColorSource - 默认值:
'rgba(255, 68, 68, 0.05)'
禁扫区域编辑轮廓填充颜色
controls.forbiddenSweepZone.showRotateButton
- 类型:
boolean - 默认值:
true
是否显示旋转按钮
controls.forbiddenSweepZone.textColor
- 类型:
ColorSource - 默认值:
'#ff4444'
禁扫区域尺寸标签文本颜色
controls.forbiddenSweepZone.textPosition
- 类型:
'top' | 'right' | 'bottom' | 'left' - 默认值:
'bottom'
禁扫区域尺寸标签文本位置
controls.forbiddenSweepZone.textOffset
- 类型:
number - 默认值:
8 - 单位:
px
禁扫区域尺寸标签文本偏移
controls.forbiddenSweepZone.editing
区域框编辑模式样式配置。
controls.forbiddenSweepZone.editing.isDashed
- 类型:
boolean - 默认值:
false
编辑模式下禁扫区域框是否显示为虚线
controls.forbiddenSweepZone.editing.dashArray
- 类型:
[number, number] - 默认值:
[0, 0] - 单位:
px
编辑模式下禁扫区域框虚线样式
controls.forbiddenSweepZone.normal
区域框普通模式样式配置。
controls.forbiddenSweepZone.normal.isDashed
- 类型:
boolean - 默认值:
false
普通模式下禁扫区域框是否显示为虚线
controls.forbiddenSweepZone.normal.dashArray
- 类型:
[number, number] - 默认值:
[0, 0] - 单位:
px
普通模式下禁扫区域框虚线样式
controls.forbiddenMopZone
禁拖区域配置。
controls.forbiddenMopZone.minSize
- 类型:
number - 默认值:
1 - 单位:
米
禁拖区域最小尺寸
controls.forbiddenMopZone.iconWrapperFillColor
- 类型:
ColorSource - 默认值:
'#fe8a07'
图标容器填充颜色
controls.forbiddenMopZone.strokeColor
- 类型:
ColorSource - 默认值:
'#fe8a07'
禁拖区域描边颜色
controls.forbiddenMopZone.strokeWidth
- 类型:
number - 默认值:
2 - 单位:
px
禁拖区域描边宽度
controls.forbiddenMopZone.fillColor
- 类型:
ColorSource - 默认值:
'rgba(254, 138, 7, 0.1)'
禁拖区域填充颜色
controls.forbiddenMopZone.outlineOffset
- 类型:
number - 默认值:
16 - 单位:
px
禁拖区域轮廓偏移
controls.forbiddenMopZone.outlineStrokeColor
- 类型:
ColorSource - 默认值:
'#fe8a07'
禁拖区域轮廓描边颜色
controls.forbiddenMopZone.outlineStrokeWidth
- 类型:
number - 默认值:
2 - 单位:
px
禁拖区域轮廓描边宽度
controls.forbiddenMopZone.outlineDashed
- 类型:
boolean - 默认值:
true
禁拖区域轮廓是否为虚线
controls.forbiddenMopZone.outlineDashArray
- 类型:
[number, number] - 默认值:
[4, 3] - 单位:
px
禁拖区域轮廓虚线样式
controls.forbiddenMopZone.outlineFillColor
- 类型:
ColorSource - 默认值:
'rgba(254, 138, 7, 0.05)'
禁拖区域轮廓填充颜色
controls.forbiddenMopZone.showRotateButton
- 类型:
boolean - 默认值:
true
是否显示旋转按钮
controls.forbiddenMopZone.textColor
- 类型:
ColorSource - 默认值:
'#fe8a07'
禁拖区域文本颜色
controls.forbiddenMopZone.textPosition
- 类型:
'top' | 'right' | 'bottom' | 'left' - 默认值:
'bottom'
禁拖区域文本位置
controls.forbiddenMopZone.textOffset
- 类型:
number - 默认值:
8 - 单位:
px
禁拖区域文本偏移
controls.forbiddenMopZone.editing
区域框编辑模式样式配置。
controls.forbiddenMopZone.editing.isDashed
- 类型:
boolean - 默认值:
false
编辑模式下禁拖区域框是否显示为虚线
controls.forbiddenMopZone.editing.dashArray
- 类型:
[number, number] - 默认值:
[0, 0] - 单位:
px
编辑模式下禁拖区域框虚线样式
controls.forbiddenMopZone.normal
区域框普通模式样式配置。
controls.forbiddenMopZone.normal.isDashed
- 类型:
boolean - 默认值:
false
普通模式下禁拖区域框是否显示为虚线
controls.forbiddenMopZone.normal.dashArray
- 类型:
[number, number] - 默认值:
[0, 0] - 单位:
px
普通模式下禁拖区域框虚线样式
cleanZone
清扫区域配置。
controls.cleanZone.minSize
- 类型:
number - 默认值:
1 - 单位:
米
清扫区域最小尺寸
controls.cleanZone.iconWrapperFillColor
- 类型:
ColorSource - 默认值:
'#5d68fe'
清扫区域图标容器填充颜色
controls.cleanZone.strokeColor
- 类型:
ColorSource - 默认值:
'#5d68fe'
清扫区域描边颜色
controls.cleanZone.strokeWidth
- 类型:
number - 默认值:
2 - 单位:
px
清扫区域描边宽度
controls.cleanZone.fillColor
- 类型:
ColorSource - 默认值:
'rgba(93, 104, 254, 0.1)'
清扫区域填充颜色
controls.cleanZone.outlineOffset
- 类型:
number - 默认值:
16 - 单位:
px
清扫区域轮廓偏移
controls.cleanZone.outlineStrokeColor
- 类型:
ColorSource - 默认值:
'#5d68fe'
清扫区域轮廓描边颜色
controls.cleanZone.outlineStrokeWidth
- 类型:
number - 默认值:
2 - 单位:
px
清扫区域轮廓描边宽度
controls.cleanZone.outlineDashed
- 类型:
boolean - 默认值:
true
清扫区域轮廓是否为虚线
controls.cleanZone.outlineDashArray
- 类型:
[number, number] - 默认值:
[4, 3] - 单位:
px
清扫区域轮廓虚线样式
controls.cleanZone.outlineFillColor
- 类型:
ColorSource - 默认值:
'rgba(93, 104, 254, 0.05)'
清扫区域轮廓填充颜色
controls.cleanZone.showRotateButton
- 类型:
boolean - 默认值:
true
是否显示旋转按钮
controls.cleanZone.textColor
- 类型:
ColorSource - 默认值:
'#5d68fe'
清扫区域文本颜色
controls.cleanZone.textPosition
- 类型:
'top' | 'right' | 'bottom' | 'left' - 默认值:
'bottom'
清扫区域文本位置
controls.cleanZone.textOffset
- 类型:
number - 默认值:
8 - 单位:
px
清扫区域文本偏移
controls.cleanZone.editing
区域框编辑模式样式配置。
controls.cleanZone.editing.isDashed
- 类型:
boolean - 默认值:
false
编辑模式下清扫区域框是否显示为虚线
controls.cleanZone.editing.dashArray
- 类型:
[number, number] - 默认值:
[0, 0] - 单位:
px
编辑模式下清扫区域框虚线样式
controls.cleanZone.normal
区域框普通模式样式配置。
controls.cleanZone.normal.isDashed
- 类型:
boolean - 默认值:
false
普通模式下清扫区域框是否显示为虚线
controls.cleanZone.normal.dashArray
- 类型:
[number, number] - 默认值:
[0, 0] - 单位:
px
普通模式下清扫区域框虚线样式
controls.virtualWall
虚拟墙配置。
controls.virtualWall.iconWrapperFillColor
- 类型:
ColorSource - 默认值:
'#ff4444'
虚拟墙图标容器填充颜色
controls.virtualWall.lineWidth
- 类型:
number - 默认值:
2 - 单位:
px
虚拟墙线条宽度
controls.virtualWall.lineColor
- 类型:
ColorSource - 默认值:
'#ff4444'
虚拟墙线条颜色
controls.virtualWall.hitAreaThickness
- 类型:
number - 默认值:
30 - 单位:
px
虚拟墙热区厚度
controls.virtualWall.outlineOffset
- 类型:
number - 默认值:
16 - 单位:
px
虚拟墙轮廓偏移
controls.virtualWall.outlineStrokeColor
- 类型:
ColorSource - 默认值:
'#ff4444'
虚拟墙轮廓描边颜色
controls.virtualWall.outlineStrokeWidth
- 类型:
number - 默认值:
2 - 单位:
px
虚拟墙轮廓描边宽度
controls.virtualWall.outlineDashed
- 类型:
boolean - 默认值:
true
虚拟墙轮廓是否为虚线
controls.virtualWall.outlineDashArray
- 类型:
[number, number] - 默认值:
[4, 3] - 单位:
px
虚拟墙轮廓虚线样式
controls.virtualWall.outlineFillColor
- 类型:
ColorSource - 默认值:
'rgba(255, 68, 68, 0.05)'
虚拟墙轮廓填充颜色
controls.virtualWall.minWidth
- 类型:
number - 默认值:
1 - 单位:
米
虚拟墙最小宽度
controls.virtualWall.textColor
- 类型:
ColorSource - 默认值:
'#ff4444'
虚拟墙文本颜色
controls.virtualWall.textOffset
- 类型:
number - 默认值:
8 - 单位:
px
虚拟墙文本偏移
controls.virtualWall.editing
虚拟墙编辑模式样式配置,与禁扫区域相同。
controls.virtualWall.normal
虚拟墙普通模式样式配置,与禁扫区域相同。
controls.spot
定点清扫配置。
controls.spot.iconSrc
- 类型:
string - 默认值:
内置资源
定点清扫图标资源路径
controls.spot.iconSize
- 类型:
number - 默认值:
8 - 单位:
px
定点清扫图标大小
controls.spot.size
- 类型:
number - 默认值:
1 - 单位:
米
定点清扫区域尺寸
controls.spot.strokeColor
- 类型:
ColorSource - 默认值:
'#5d68fe'
定点清扫描边颜色
controls.spot.strokeWidth
- 类型:
number - 默认值:
2 - 单位:
px
定点清扫描边宽度
controls.spot.fillColor
- 类型:
ColorSource - 默认值:
'rgba(93, 104, 254, 0.1)'
定点清扫填充颜色
controls.spot.textColor
- 类型:
ColorSource - 默认值:
'#5d68fe'
定点清扫文本颜色
controls.spot.textPosition
- 类型:
'top' | 'right' | 'bottom' | 'left' - 默认值:
'bottom'
定点清扫文本位置
controls.spot.textOffset
- 类型:
number - 默认值:
8 - 单位:
px
定点清扫文本偏移
controls.spot.editing
定点清扫编辑模式样式配置,与禁扫区域相同。
controls.spot.normal
定点清扫普通模式样式配置,与禁扫区域相同。
controls.wayPoint
途径点配置。
controls.wayPoint.showOrder
- 类型:
boolean - 默认值:
true
是否显示途径点序号。
controls.wayPoint.normal
途径点普通模式样式配置。
controls.wayPoint.normal.iconSrc
- 类型:
string - 默认值:
内置资源
普通模式下途径点图标资源路径。
controls.wayPoint.normal.iconSize
- 类型:
number - 默认值:
32 - 单位:
px
普通模式下途径点图标大小(固定屏幕像素)。
controls.wayPoint.normal.orderText
普通模式下序号文本样式配置。
controls.wayPoint.normal.orderText.fontSize
- 类型:
number - 默认值:
10 - 单位:
px
序号文本字体大小。
controls.wayPoint.normal.orderText.fontFamily
- 类型:
string - 默认值:
'PingFang SC, Microsoft YaHei, sans-serif'
序号文本字体。
controls.wayPoint.normal.orderText.fontWeight
- 类型:
TextStyleFontWeight - 默认值:
'600'
序号文本字体粗细。
controls.wayPoint.normal.orderText.color
- 类型:
ColorSource - 默认值:
'#8a8a8a'
序号文本颜色。
controls.wayPoint.normal.orderContainer
普通模式下序号容器样式配置。
controls.wayPoint.normal.orderContainer.size
- 类型:
number - 默认值:
12 - 单位:
px
序号容器大小(圆形直径)。
controls.wayPoint.normal.orderContainer.backgroundColor
- 类型:
ColorSource - 默认值:
'#ffffff'
序号容器背景颜色。
controls.wayPoint.normal.orderContainer.offsetY
- 类型:
number - 默认值:
19 - 单位:
px
序号容器垂直偏移量。基准值为图标底部中心。
controls.wayPoint.normal.orderContainer.offsetX
- 类型:
number - 默认值:
0 - 单位:
px
序号容器水平偏移量。基准值为图标底部中心。
controls.wayPoint.editing
途径点编辑模式样式配置。结构与 normal 相同,但可以设置不同的图标、尺寸和序号样式。
controls.wayPoint.editing.iconSrc
- 类型:
string - 默认值:
内置资源
编辑模式下途径点图标资源路径。
controls.wayPoint.editing.iconSize
- 类型:
number - 默认值:
38 - 单位:
px
编辑模式下途径点图标大小。
controls.wayPoint.editing.orderText
编辑模式下序号文本样式配置,结构与 normal.orderText 相同。
controls.wayPoint.editing.orderContainer
编辑模式下序号容器样式配置,结构与 normal.orderContainer 相同。
divider
分割线配置,控制房间分割线的样式和行为。
divider.lineColor
- 类型:
ColorSource - 默认值:
'#ff4444'
分割线颜色。
divider.dashLineWidth
- 类型:
number - 默认值:
2 - 单位:
px
分割线宽度。
divider.dashLineDashArray
- 类型:
[number, number] - 默认值:
[4, 3] - 单位:
px
分割线样式。
divider.solidLineWidth
- 类型:
number - 默认值:
2 - 单位:
px
分割线有效部分宽度。
divider.endPointSize
- 类型:
number - 默认值:
12 - 单位:
px
分割线端点大小。
divider.endPointColor
- 类型:
ColorSource - 默认值:
'#ff4444'
分割线端点颜色。
divider.endPointStrokeColor
- 类型:
ColorSource - 默认值:
'#ffffff'
分割线端点描边颜色。
divider.endPointStrokeWidth
- 类型:
number - 默认值:
2 - 单位:
px
分割线端点描边宽度。
divider.hitAreaThickness
- 类型:
number - 默认值:
30 - 单位:
px
分割线热区厚度。
divider.resetDividerWhenOutOfRoom
- 类型:
boolean - 默认值:
false
当操作分割线到房间包围盒外时是否重置分割线到初始位置。
divider.defaultExtension
- 类型:
number - 默认值:
20 - 单位:
px
初始分割线端点超出房间包围盒的像素值。
divider.defaultDirection
- 类型:
'horizontal' | 'vertical' - 默认值:
'horizontal'
初始分割线方向。
detectedObject
AI检测物体配置。
detectedObject.height
- 类型:
number - 默认值:
43 - 单位:
px
检测物体高度。
detectedObject.width
- 类型:
number - 默认值:
38 - 单位:
px
检测物体宽度。
detectedObject.interactive
- 类型:
boolean - 默认值:
false
检测物体是否可交互。
snapshot
截图配置。
snapshot.format
- 类型:
'png' | 'jpg' | 'webp' - 默认值:
'png'
截图输出格式。
snapshot.quality
- 类型:
number - 默认值:
1
截图质量 (0-1)。
snapshot.antialias
- 类型:
boolean - 默认值:
true
截图是否开启抗锯齿。
snapshot.resolution
- 类型:
number - 默认值:
window.devicePixelRatio || 1
截图分辨率倍数。