@ray-js/robot-map-sdk 0.0.17-beta.6 → 0.0.17-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/constant/methods.js +1 -1
- package/dist/index.d.ts +440 -26
- package/dist/index.rjs.js +1 -1
- package/dist-app/assets/index-eeMSEkAh.js +1 -0
- package/dist-app/index.html +1 -1
- package/dist-docs/404.html +2 -2
- package/dist-docs/assets/{app.Cwwjhfv-.js → app.Bg2iQqT7.js} +1 -1
- package/dist-docs/assets/chunks/@localSearchIndexroot.BPlHhUqM.js +1 -0
- package/dist-docs/assets/chunks/{BitmapFont.B-IfRDQk.js → BitmapFont.whV8yWpy.js} +1 -1
- package/dist-docs/assets/chunks/{BufferResource.CSAKqlzf.js → BufferResource.BXjliFRD.js} +1 -1
- package/dist-docs/assets/chunks/{CanvasRenderer.MDV1Xxi4.js → CanvasRenderer.DY6XCYVt.js} +1 -1
- package/dist-docs/assets/chunks/{RenderTargetSystem.g57-QZWo.js → RenderTargetSystem.BVpN1Rg0.js} +1 -1
- package/dist-docs/assets/chunks/{VPLocalSearchBox.Ddw3Wr6t.js → VPLocalSearchBox.CFI69wMe.js} +1 -1
- package/dist-docs/assets/chunks/{WebGLRenderer.BkDOpZPC.js → WebGLRenderer.CHkcy7rw.js} +1 -1
- package/dist-docs/assets/chunks/{WebGPURenderer.BwHfcpIa.js → WebGPURenderer.XLqnuQ1l.js} +1 -1
- package/dist-docs/assets/chunks/{browserAll.Bwww-soc.js → browserAll.BqnQzgur.js} +1 -1
- package/dist-docs/assets/chunks/index.1ESJv0w9.js +744 -0
- package/dist-docs/assets/chunks/theme.DgXwK1om.js +4 -0
- package/dist-docs/assets/chunks/{webworkerAll.D7ZfSazD.js → webworkerAll.CUtNjZCn.js} +1 -1
- package/dist-docs/assets/{guide_advanced-usage.md.BrP4iZb-.js → guide_advanced-usage.md.w-yj_56g.js} +2 -7
- package/dist-docs/assets/{guide_advanced-usage.md.BrP4iZb-.lean.js → guide_advanced-usage.md.w-yj_56g.lean.js} +1 -1
- package/dist-docs/assets/{guide_getting-started.md.DOtxbNfK.js → guide_getting-started.md.DyGIIhU9.js} +2 -2
- package/dist-docs/assets/guide_getting-started.md.DyGIIhU9.lean.js +1 -0
- package/dist-docs/assets/{reference_callbacks.md.BP78Z1wN.js → reference_callbacks.md.5owd-5nN.js} +2 -2
- package/dist-docs/assets/{reference_callbacks.md.BP78Z1wN.lean.js → reference_callbacks.md.5owd-5nN.lean.js} +1 -1
- package/dist-docs/assets/reference_config.md.W-7brnWs.js +303 -0
- package/dist-docs/assets/reference_config.md.W-7brnWs.lean.js +1 -0
- package/dist-docs/assets/{reference_methods.md.D2L6f98h.js → reference_methods.md.CXtsI5Rx.js} +12 -4
- package/dist-docs/assets/{reference_methods.md.D2L6f98h.lean.js → reference_methods.md.CXtsI5Rx.lean.js} +1 -1
- package/dist-docs/assets/reference_runtime.md.CXIbwBrR.js +39 -0
- package/dist-docs/assets/reference_runtime.md.CXIbwBrR.lean.js +1 -0
- package/dist-docs/guide/advanced-usage.html +6 -11
- package/dist-docs/guide/concepts.html +3 -3
- package/dist-docs/guide/getting-started.html +5 -5
- package/dist-docs/guide/mcp.html +3 -3
- package/dist-docs/guide/spot-room-binding.html +3 -3
- package/dist-docs/hashmap.json +1 -1
- package/dist-docs/index.html +3 -3
- package/dist-docs/plans/2026-03-04-detected-objects-visibility-design.html +3 -3
- package/dist-docs/plans/2026-03-04-show-detected-objects-implementation-plan.html +3 -3
- package/dist-docs/plans/2026-03-10-simulator-debug-design.html +3 -3
- package/dist-docs/plans/2026-03-10-simulator-events-console-design.html +3 -3
- package/dist-docs/plans/2026-03-10-simulator-events-console-implementation-plan.html +3 -3
- package/dist-docs/plans/2026-03-10-simulator-runtime-controls-design.html +3 -3
- package/dist-docs/plans/2026-03-10-simulator-runtime-controls-implementation-plan.html +3 -3
- package/dist-docs/plans/2026-03-10-testing-rollout-next-steps-plan.html +3 -3
- package/dist-docs/plans/2026-03-11-simulator-logger-dump-implementation-plan.html +3 -3
- package/dist-docs/reference/callbacks.html +5 -5
- package/dist-docs/reference/config.html +68 -12
- package/dist-docs/reference/data.html +3 -3
- package/dist-docs/reference/methods.html +15 -7
- package/dist-docs/reference/runtime.html +24 -5
- package/dist-docs/reference/types.html +3 -3
- package/dist-docs/reference/utils.html +3 -3
- package/dist-docs/simulator/index.html +3 -3
- package/package.json +1 -1
- package/dist-app/assets/index-DPMQ-Izq.js +0 -1
- package/dist-docs/assets/chunks/@localSearchIndexroot.DX09zKNQ.js +0 -1
- package/dist-docs/assets/chunks/index.ChgcAKwM.js +0 -744
- package/dist-docs/assets/chunks/theme.BLq0Vss6.js +0 -4
- package/dist-docs/assets/guide_getting-started.md.DOtxbNfK.lean.js +0 -1
- package/dist-docs/assets/reference_config.md.DHyraAQF.js +0 -247
- package/dist-docs/assets/reference_config.md.DHyraAQF.lean.js +0 -1
- package/dist-docs/assets/reference_runtime.md.g-NWJXS6.js +0 -20
- package/dist-docs/assets/reference_runtime.md.g-NWJXS6.lean.js +0 -1
|
@@ -0,0 +1,303 @@
|
|
|
1
|
+
import{_ as e,c as t,o as i,aq as s}from"./chunks/framework.CBLqO2Q1.js";const g=JSON.parse('{"title":"配置","description":"","frontmatter":{},"headers":[],"relativePath":"reference/config.md","filePath":"reference/config.md","lastUpdated":1788166374000}'),a={name:"reference/config.md"};function l(n,o,r,d,c,h){return i(),t("div",null,[...o[0]||(o[0]=[s(`<h1 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to "配置""></a></h1><p>了解 RobotMap 的配置选项，用于定制地图的视觉样式、素材资源、交互行为等。</p><div class="tip custom-block"><p class="custom-block-title">响应式配置</p><p>配置是<strong>响应式</strong>的，当你修改传入的 <code>config</code> prop 时，地图会自动更新视觉效果，无需重新初始化。这使得主题切换、颜色调整等功能的实现变得简单直接。</p></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li>本文档部分配置项的单位与<strong>米</strong>相关，该配置的值会根据地图数据里的分辨率转换为像素单位。</li></ul></div><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to "使用示例""></a></h2><h3 id="基础配置" tabindex="-1">基础配置 <a class="header-anchor" href="#基础配置" aria-label="Permalink to "基础配置""></a></h3><p>配置通过 <code>config</code> 传递，所有配置项都是可选的，你可以只覆盖需要修改的部分。</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'react'</span></span>
|
|
2
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { RobotMap } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@ray-js/robot-map'</span></span>
|
|
3
|
+
<span class="line"></span>
|
|
4
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
5
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMemo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
6
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
7
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> global: {</span></span>
|
|
8
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> backgroundColor: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0xf6f6f6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
9
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
10
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: {</span></span>
|
|
11
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> commonPath: { color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#ffffff'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
12
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> chargePath: { color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#800080'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
13
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
14
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> robot: {</span></span>
|
|
15
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: {</span></span>
|
|
16
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
17
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
18
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> src: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'path/to/robot-icon.png'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
19
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
20
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
21
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> interaction: {</span></span>
|
|
22
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> enableDoubleTapZoom: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
23
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
24
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
25
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [])</span></span>
|
|
26
|
+
<span class="line"></span>
|
|
27
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
|
|
28
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span></span>
|
|
29
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{config}</span></span>
|
|
30
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ... 其他props</span></span>
|
|
31
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
32
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
|
33
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p><strong>类型</strong>: <code>DeepPartialAppConfig</code></p><p>配置对象的所有属性都是可选的，你可以只覆盖需要修改的部分：</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span></span>
|
|
34
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{</span></span>
|
|
35
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> global: { backgroundColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#f6f6f6'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 覆盖默认值</span></span>
|
|
36
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> robot: {</span></span>
|
|
37
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: { width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, height: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
38
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> speed: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
39
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
40
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
|
|
41
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/></span></span></code></pre></div><h3 id="响应式配置-主题切换示例" tabindex="-1">响应式配置 - 主题切换示例 <a class="header-anchor" href="#响应式配置-主题切换示例" aria-label="Permalink to "响应式配置 - 主题切换示例""></a></h3><p>配置是响应式的，修改 <code>config</code> prop 会自动更新地图视觉效果。以下是一个主题切换的示例：</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { useState, useMemo } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'react'</span></span>
|
|
42
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { RobotMap } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@ray-js/robot-map'</span></span>
|
|
43
|
+
<span class="line"></span>
|
|
44
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
45
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setTheme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'dark'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'light'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
46
|
+
<span class="line"></span>
|
|
47
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMemo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
48
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span></span>
|
|
49
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
50
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> global: { backgroundColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#f6f6f6'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
51
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> map: { obstacleColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#999999'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, freeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#ebebeb'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
52
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> room: {</span></span>
|
|
53
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> colors: {</span></span>
|
|
54
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> active: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#a8c8f5'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#9de5c7'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#d4b9f7'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#ffd399'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
55
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#2563b8'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#26966b'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#7c3fb8'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#d97706'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
56
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
57
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
58
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: { commonPath: { color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#ffffff'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } },</span></span>
|
|
59
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
60
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
61
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> global: { backgroundColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#1a1a1a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
62
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> map: { obstacleColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#404040'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, freeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#2a2a2a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
63
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> room: {</span></span>
|
|
64
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> colors: {</span></span>
|
|
65
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> active: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#3b5998'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#2d6a4f'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#6a1b9a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#d97706'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
66
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#6b9bf7'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#4ade80'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#b794f6'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#fbbf24'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
67
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
68
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
69
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: { commonPath: { color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#64748b'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } },</span></span>
|
|
70
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
71
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [theme])</span></span>
|
|
72
|
+
<span class="line"></span>
|
|
73
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
|
|
74
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <></span></span>
|
|
75
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span>
|
|
76
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTheme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">t</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (t </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'dark'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">))}</span></span>
|
|
77
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span>
|
|
78
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 切换主题</span></span>
|
|
79
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
80
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{config} /></span></span>
|
|
81
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </></span></span>
|
|
82
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
|
83
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>当你点击按钮切换主题时，<code>config</code> 对象会根据 <code>theme</code> 状态重新计算，地图会自动响应配置变化并更新视觉效果。</p></div><h3 id="响应式配置-主题切换" tabindex="-1">响应式配置（主题切换） <a class="header-anchor" href="#响应式配置-主题切换" aria-label="Permalink to "响应式配置（主题切换）""></a></h3><p>配置是响应式的，当你修改 <code>config</code> prop 时，地图会自动更新。以下是一个主题切换的示例：</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { useState, useMemo } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'react'</span></span>
|
|
84
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { RobotMap } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@ray-js/robot-map'</span></span>
|
|
85
|
+
<span class="line"></span>
|
|
86
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
87
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setTheme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'dark'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'light'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
88
|
+
<span class="line"></span>
|
|
89
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMemo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
90
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ({</span></span>
|
|
91
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> global: {</span></span>
|
|
92
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> backgroundColor: theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#f6f6f6'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#1a1a1a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
93
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
94
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> map: {</span></span>
|
|
95
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obstacleColor: theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#999999'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#404040'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
96
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> freeColor: theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#ebebeb'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#2a2a2a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
97
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
98
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> room: {</span></span>
|
|
99
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> colors: {</span></span>
|
|
100
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> active:</span></span>
|
|
101
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span></span>
|
|
102
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#a8c8f5'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#9de5c7'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#d4b9f7'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#ffd399'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
|
|
103
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#3b5998'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#2d6a4f'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#6a1b9a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#d97706'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
104
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name:</span></span>
|
|
105
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span></span>
|
|
106
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#2563b8'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#26966b'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#7c3fb8'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#d97706'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
|
|
107
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#6b9bf7'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#4ade80'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#b794f6'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#fbbf24'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
108
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
109
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
110
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: {</span></span>
|
|
111
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> commonPath: {</span></span>
|
|
112
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> color: theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#ffffff'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#64748b'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
113
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
114
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
115
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
|
|
116
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [theme],</span></span>
|
|
117
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
|
118
|
+
<span class="line"></span>
|
|
119
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
|
|
120
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <></span></span>
|
|
121
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span>
|
|
122
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTheme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">t</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (t </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'dark'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">))}</span></span>
|
|
123
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></span></span>
|
|
124
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 切换到{theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '暗黑'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '浅色'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}主题</span></span>
|
|
125
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
126
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{config} /></span></span>
|
|
127
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </></span></span>
|
|
128
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
|
129
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">性能提示</p><p>使用 <code>useMemo</code> 包裹配置对象可以避免不必要的重新渲染。只有当依赖项（如 <code>theme</code>）变化时，配置才会重新计算，地图才会更新。</p></div><h2 id="elasticscale" tabindex="-1">elasticScale <a class="header-anchor" href="#elasticscale" aria-label="Permalink to "elasticScale""></a></h2><p>弹性缩放的档位断点，<strong>全图共用</strong>。</p><p>屏幕固定尺寸的元素（房间标签气泡、检测物体图标等）默认在地图缩放时保持恒定像素大小。弹性缩放在此之上叠一层分档倍数：地图缩到第一个断点以下时元素略微变小，放大到最后一个断点以上时略微变大，中间保持原状。</p><p><strong>断点共用、倍数各元素自己给</strong>——共用断点保证所有元素在同一刻切档，否则捏合时气泡和图标会错开变化。各元素的倍数见 <a href="#roomelasticfactors"><code>room.elasticFactors</code></a> 与 <a href="#detectedobjectelasticfactors"><code>detectedObject.elasticFactors</code></a>，两者都默认关闭。</p><p>跨档时倍数不是跳变，而是平滑过渡到位。</p><h3 id="elasticscale-breakpoints" tabindex="-1">elasticScale.breakpoints <a class="header-anchor" href="#elasticscale-breakpoints" aria-label="Permalink to "elasticScale.breakpoints""></a></h3><ul><li><strong>类型</strong>: <code>number[]</code></li><li><strong>默认值</strong>: <code>[1, 5]</code></li></ul><p>档位断点，升序排列。<code>n</code> 个断点划出 <code>n + 1</code> 档。</p><p><strong>边界归属</strong>：</p><ul><li><code>缩放 <= 断点[0]</code> 归最低档</li><li><code>缩放 >= 断点[末]</code> 归最高档</li><li>恰好压在中间某个断点上，归上一档</li></ul><p>两端「向外吸」是有意为之：若把 <a href="#interactionzoomrange"><code>interaction.zoomRange.max</code></a> 设成正好等于最末断点，捏到顶时会稳定落在最高档。</p><p>断点应落在 <code>interaction.zoomRange</code> 区间内，否则该档永不触发——默认 <code>zoomRange</code> 是 <code>{ min: 0.5, max: 8 }</code>。</p><p>断点非法（空、非升序、含非数值）时打 warn 并<strong>全图关闭</strong>弹性缩放。</p><p><strong>示例</strong>：</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> mapInstance</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapApplication</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
130
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config: {</span></span>
|
|
131
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> elasticScale: { breakpoints: [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] }, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 5 档</span></span>
|
|
132
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> room: {</span></span>
|
|
133
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> enableElasticScale: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
134
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> elasticFactors: [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.75</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.25</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
135
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
136
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> detectedObject: {</span></span>
|
|
137
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> enableElasticScale: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
138
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> elasticFactors: [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.7</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.85</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.15</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
139
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
140
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
141
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h2 id="global" tabindex="-1">global <a class="header-anchor" href="#global" aria-label="Permalink to "global""></a></h2><p>全局容器配置，控制地图容器的位置、尺寸和背景。</p><h3 id="global-containertop" tabindex="-1">global.containerTop <a class="header-anchor" href="#global-containertop" aria-label="Permalink to "global.containerTop""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'0px'</code></li></ul><p>容器距离顶部的位置。支持 <code>px</code>、<code>%</code>、<code>vw</code>、<code>vh</code>、<code>rpx</code> 单位。</p><h3 id="global-containerleft" tabindex="-1">global.containerLeft <a class="header-anchor" href="#global-containerleft" aria-label="Permalink to "global.containerLeft""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'0px'</code></li></ul><p>容器距离左侧的位置。支持 <code>px</code>、<code>%</code>、<code>vw</code>、<code>vh</code>、<code>rpx</code> 单位。</p><h3 id="global-containerwidth" tabindex="-1">global.containerWidth <a class="header-anchor" href="#global-containerwidth" aria-label="Permalink to "global.containerWidth""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'100%'</code></li></ul><p>容器宽度。支持 <code>px</code>、<code>%</code>、<code>vw</code>、<code>vh</code>、<code>rpx</code> 单位。</p><h3 id="global-containerheight" tabindex="-1">global.containerHeight <a class="header-anchor" href="#global-containerheight" aria-label="Permalink to "global.containerHeight""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'100%'</code></li></ul><p>容器高度。支持 <code>px</code>、<code>%</code>、<code>vw</code>、<code>vh</code>、<code>rpx</code> 单位。</p><h3 id="global-backgroundcolor" tabindex="-1">global.backgroundColor <a class="header-anchor" href="#global-backgroundcolor" aria-label="Permalink to "global.backgroundColor""></a></h3><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#f6f6f6'</code></li></ul><p>地图容器纯色背景颜色。该颜色也将作为 <code>snapshot</code> 和 <code>snapshotByData</code> 方法的默认背景颜色。</p><div class="tip custom-block"><p class="custom-block-title">背景优先级</p><p>SDK 支持三种背景类型，按以下优先级应用：</p><ol><li><strong>图片背景</strong>（<code>backgroundImage</code>）- 优先级最高</li><li><strong>渐变背景</strong>（<code>backgroundGradient</code>）- 优先级中等</li><li><strong>纯色背景</strong>（<code>backgroundColor</code>）- 优先级最低</li></ol><p>当同时配置多种背景时，优先级高的会覆盖优先级低的。例如，如果同时设置了 <code>backgroundImage</code> 和 <code>backgroundColor</code>，最终只会显示图片背景。</p></div><h3 id="global-backgroundgradient" tabindex="-1">global.backgroundGradient <a class="header-anchor" href="#global-backgroundgradient" aria-label="Permalink to "global.backgroundGradient""></a></h3><ul><li><strong>类型</strong>: <a href="/reference/types.html#backgroundgradient"><code>BackgroundGradient</code></a></li><li><strong>默认值</strong>: <code>undefined</code></li></ul><p>渐变背景配置，支持线性渐变和径向渐变。</p><h4 id="线性渐变示例" tabindex="-1">线性渐变示例 <a class="header-anchor" href="#线性渐变示例" aria-label="Permalink to "线性渐变示例""></a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
142
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> global</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
|
143
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> backgroundGradient</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
|
144
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'linear'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
145
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> x0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 起点x（0-1，相对于视口宽度）</span></span>
|
|
146
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> y0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 起点y（0-1，相对于视口高度）</span></span>
|
|
147
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> x1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 终点x</span></span>
|
|
148
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> y1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 终点y</span></span>
|
|
149
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> colorStops</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
|
|
150
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { offset: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#667eea'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
151
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { offset: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#764ba2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
152
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
|
153
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
154
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
155
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p><strong>常见渐变方向：</strong></p><ul><li>从上到下：<code>x0: 0.5, y0: 0, x1: 0.5, y1: 1</code></li><li>从左到右：<code>x0: 0, y0: 0.5, x1: 1, y1: 0.5</code></li><li>对角线：<code>x0: 0, y0: 0, x1: 1, y1: 1</code></li></ul><h4 id="径向渐变示例" tabindex="-1">径向渐变示例 <a class="header-anchor" href="#径向渐变示例" aria-label="Permalink to "径向渐变示例""></a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
156
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> global</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
|
157
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> backgroundGradient</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
|
158
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'radial'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
159
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> cx</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 中心x（0-1，相对于视口宽度）</span></span>
|
|
160
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> cy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 中心y（0-1，相对于视口高度）</span></span>
|
|
161
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> r</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.7</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 半径（0-1，相对于视口对角线长度）</span></span>
|
|
162
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> colorStops</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
|
|
163
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { offset: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#667eea'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
164
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { offset: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#764ba2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
165
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { offset: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#f093fb'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
166
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
|
167
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
168
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
169
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">渐变平滑度</p><p>为了获得更平滑的渐变效果，建议：</p><ul><li>添加更多中间颜色停靠点（colorStops）</li><li>使用色相接近的颜色</li><li>避免颜色对比过于强烈</li></ul><p>当前版本的径向渐变使用线性渐变模拟，效果可能与真正的径向渐变略有不同。</p><p><strong>如果渐变效果不理想</strong>，可以考虑使用图片背景来替代，图片背景可以提供更高质量和更精细的渐变效果。</p></div><h3 id="global-backgroundimage" tabindex="-1">global.backgroundImage <a class="header-anchor" href="#global-backgroundimage" aria-label="Permalink to "global.backgroundImage""></a></h3><ul><li><strong>类型</strong>: <a href="/reference/types.html#backgroundimage"><code>BackgroundImage</code></a></li><li><strong>默认值</strong>: <code>undefined</code></li></ul><p>图片背景配置，支持多种图片适应模式。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
170
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> global</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
|
171
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> backgroundImage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
|
172
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'https://example.com/background.jpg'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 图片URL</span></span>
|
|
173
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'cover'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 'fill' | 'contain' | 'cover' | 'none'</span></span>
|
|
174
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 可选，默认居中(0.5, 0.5)</span></span>
|
|
175
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 0-1，相对于视口</span></span>
|
|
176
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> y</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span></span>
|
|
177
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
178
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> repeat</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 是否平铺（暂未实现）</span></span>
|
|
179
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
180
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
181
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p><strong>fit 模式说明：</strong></p><ul><li><code>fill</code>：拉伸填充整个视口</li><li><code>contain</code>：完整显示图片，保持宽高比，可能有留白</li><li><code>cover</code>（默认）：覆盖整个视口，保持宽高比，可能裁剪</li><li><code>none</code>：原始尺寸显示</li></ul><h3 id="global-backgroundalpha" tabindex="-1">global.backgroundAlpha <a class="header-anchor" href="#global-backgroundalpha" aria-label="Permalink to "global.backgroundAlpha""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li></ul><p>地图容器背景透明度。</p><div class="warning custom-block"><p class="custom-block-title">注意</p><p>该配置仅对<strong>纯色背景</strong> (<code>backgroundColor</code>) 和<strong>图片背景</strong> (<code>backgroundImage</code>) 生效。</p><p>对于<strong>渐变背景</strong> (<code>backgroundGradient</code>)，请直接在 <code>colorStops</code> 中使用 <code>rgba</code> 颜色值（如 <code>'rgba(255, 255, 255, 0.5)'</code>）来控制透明度。</p></div><h3 id="global-performancemode" tabindex="-1">global.performanceMode <a class="header-anchor" href="#global-performancemode" aria-label="Permalink to "global.performanceMode""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>是否开启高性能模式。开启后，SDK 会优化渲染性能（如强制关闭抗锯齿、共享时钟等），建议在多地图展示等对性能要求较高的场景下开启。</p><h3 id="global-resolution" tabindex="-1">global.resolution <a class="header-anchor" href="#global-resolution" aria-label="Permalink to "global.resolution""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>window.devicePixelRatio</code></li></ul><p>渲染分辨率倍率。通常不需要手动设置，SDK 会自动获取设备的像素密度。在性能极度受限的场景下，可以手动将其设为 <code>1</code> 或 <code>1.5</code> 来降低 GPU 渲染压力。</p><h3 id="global-enablelogger" tabindex="-1">global.enableLogger <a class="header-anchor" href="#global-enablelogger" aria-label="Permalink to "global.enableLogger""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>import.meta.env.DEV</code></li></ul><p>是否启用日志输出的旧配置项。当设置为 <code>true</code> 时，SDK 会输出内部日志（<code>Logger.log</code>、<code>Logger.warn</code>、<code>Logger.error</code>、<code>Logger.debug</code>、<code>Logger.success</code>）；当设置为 <code>false</code> 时，所有日志都不会输出。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>默认值会跟随构建环境：开发环境通常为 <code>true</code>，生产环境通常为 <code>false</code>。 建议仅在排查问题时开启此选项。</p><p>对于新接入，优先使用 <code>logger.enabled</code>。<code>global.enableLogger</code> 仅作为控制控制台日志的兼容兜底，不再负责 App 日志转发。</p></div><h3 id="global-rendererpreference" tabindex="-1">global.rendererPreference <a class="header-anchor" href="#global-rendererpreference" aria-label="Permalink to "global.rendererPreference""></a></h3><ul><li><strong>类型</strong>: <code>'webgpu' | 'webgl'</code></li><li><strong>默认值</strong>: <code>'webgl'</code></li></ul><p>渲染器偏好，设置 PIXI.js 优先使用的渲染后端。</p><p>默认值使用 <code>webgl</code>，优先选择更稳定、兼容性更高的渲染路径。如果你需要验证 <code>webgpu</code> 的表现，可以显式传入 <code>global.rendererPreference: 'webgpu'</code>。SDK 在 初始化阶段遇到 <code>webgpu</code> 启动失败时，会自动回退到 <code>webgl</code>，并输出对应告警。</p><h2 id="logger" tabindex="-1">logger <a class="header-anchor" href="#logger" aria-label="Permalink to "logger""></a></h2><p><code>logger</code> 配置用于控制 SDK 的控制台日志和 App 原生日志写入。控制台日志输出在 webview 内生效；App 日志由组件库在宿主环境中完成落地。</p><h3 id="logger-enabled" tabindex="-1">logger.enabled <a class="header-anchor" href="#logger-enabled" aria-label="Permalink to "logger.enabled""></a></h3><p><code>logger.enabled</code> 控制 SDK 在 webview 控制台中的日志输出。</p><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>import.meta.env.DEV</code></li></ul><p>当设置为 <code>true</code> 时，SDK 会输出内部日志到控制台；当设置为 <code>false</code> 时，控制台日志关闭。这个字段优先级高于 <code>global.enableLogger</code>。</p><h3 id="logger-applogenabled" tabindex="-1">logger.appLogEnabled <a class="header-anchor" href="#logger-applogenabled" aria-label="Permalink to "logger.appLogEnabled""></a></h3><p><code>logger.appLogEnabled</code> 控制是否把 SDK 结构化日志写入宿主 App 日志。</p><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>当设置为 <code>true</code> 时，组件库会在宿主环境内把命中的日志写入 App 日志；当设置为 <code>false</code> 时，仅保留 webview 控制台日志。</p><h3 id="logger-apploglevels" tabindex="-1">logger.appLogLevels <a class="header-anchor" href="#logger-apploglevels" aria-label="Permalink to "logger.appLogLevels""></a></h3><p><code>logger.appLogLevels</code> 控制哪些日志级别会写入宿主 App 日志。</p><ul><li><strong>类型</strong>: <code>Array<'warn' | 'error' | 'info' | 'debug'></code></li><li><strong>默认值</strong>: <code>['debug', 'warn', 'error']</code></li></ul><p>默认会写入 <code>debug</code>、<code>warn</code> 和 <code>error</code>。如果你需要临时扩大采集范围，可以显式加入 <code>info</code>。</p><h3 id="logger-tag" tabindex="-1">logger.tag <a class="header-anchor" href="#logger-tag" aria-label="Permalink to "logger.tag""></a></h3><p><code>logger.tag</code> 用于标识日志来源，方便在 App 日志里检索和过滤。</p><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'ray-robot-map-sdk'</code></li></ul><p>组件库会把这个字段作为 SDK 日志来源标识写入 App 日志消息体中。</p><h2 id="interaction" tabindex="-1">interaction <a class="header-anchor" href="#interaction" aria-label="Permalink to "interaction""></a></h2><p>交互配置，控制地图的缩放和手势操作。</p><h3 id="interaction-zoomrange" tabindex="-1">interaction.zoomRange <a class="header-anchor" href="#interaction-zoomrange" aria-label="Permalink to "interaction.zoomRange""></a></h3><p>缩放范围配置。</p><h4 id="interaction-zoomrange-min" tabindex="-1">interaction.zoomRange.min <a class="header-anchor" href="#interaction-zoomrange-min" aria-label="Permalink to "interaction.zoomRange.min""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.5</code></li></ul><p>地图初始化后，支持的最小缩放倍数</p><h4 id="interaction-zoomrange-max" tabindex="-1">interaction.zoomRange.max <a class="header-anchor" href="#interaction-zoomrange-max" aria-label="Permalink to "interaction.zoomRange.max""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>8</code></li></ul><p>地图初始化后，支持的最大缩放倍数</p><h3 id="interaction-fitminscale" tabindex="-1">interaction.fitMinScale <a class="header-anchor" href="#interaction-fitminscale" aria-label="Permalink to "interaction.fitMinScale""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li></ul><p>自适应缩放时的最小比例。限制地图缩小的最小程度。</p><h3 id="interaction-fitmaxscale" tabindex="-1">interaction.fitMaxScale <a class="header-anchor" href="#interaction-fitmaxscale" aria-label="Permalink to "interaction.fitMaxScale""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>4</code></li></ul><p>自适应缩放时的最大比例。限制地图放大的最大程度。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>关于自适应缩放的完整说明，包括触发时机、计算逻辑和常见问题，请参阅 <a href="/guide/advanced-usage.html#自适应缩放">自适应缩放</a>。</p></div><h3 id="interaction-enable" tabindex="-1">interaction.enable <a class="header-anchor" href="#interaction-enable" aria-label="Permalink to "interaction.enable""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否开启地图交互总控。设置为 <code>false</code> 时，将完全从底层禁用地图的缩放、平移和点击等交互事件监听，极大减少交互带来的性能开销。</p><h3 id="interaction-enabledoubletapzoom" tabindex="-1">interaction.enableDoubleTapZoom <a class="header-anchor" href="#interaction-enabledoubletapzoom" aria-label="Permalink to "interaction.enableDoubleTapZoom""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否启用双击缩放功能</p><h3 id="interaction-enablerobotclick" tabindex="-1">interaction.enableRobotClick <a class="header-anchor" href="#interaction-enablerobotclick" aria-label="Permalink to "interaction.enableRobotClick""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>是否启用扫地机器人的点击交互功能。</p><h3 id="interaction-enablechargingstationclick" tabindex="-1">interaction.enableChargingStationClick <a class="header-anchor" href="#interaction-enablechargingstationclick" aria-label="Permalink to "interaction.enableChargingStationClick""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>是否启用充电桩的点击交互功能。</p><h2 id="map" tabindex="-1">map <a class="header-anchor" href="#map" aria-label="Permalink to "map""></a></h2><p>地图配置。</p><h3 id="map-autopaddinghorizontalpercent" tabindex="-1">map.autoPaddingHorizontalPercent <a class="header-anchor" href="#map-autopaddinghorizontalpercent" aria-label="Permalink to "map.autoPaddingHorizontalPercent""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.05</code></li></ul><p>地图自适应时水平方向保留的最小边距比例（相对于视口宽度）。地图完成自适应后，左右边距不小于该比例值。</p><h3 id="map-autopaddingverticalpercent" tabindex="-1">map.autoPaddingVerticalPercent <a class="header-anchor" href="#map-autopaddingverticalpercent" aria-label="Permalink to "map.autoPaddingVerticalPercent""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.05</code></li></ul><p>地图自适应时垂直方向保留的最小边距比例（相对于视口高度）。地图完成自适应后，上下边距不小于该比例值。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>这两个配置用于计算自适应缩放时的初始缩放比例。关于自适应缩放的完整说明，请参阅 <a href="/guide/advanced-usage.html#自适应缩放">自适应缩放</a>。</p></div><h3 id="map-obstaclecolor" tabindex="-1">map.obstacleColor <a class="header-anchor" href="#map-obstaclecolor" aria-label="Permalink to "map.obstacleColor""></a></h3><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#999999'</code></li></ul><p>障碍点显示颜色。</p><h3 id="map-freecolor" tabindex="-1">map.freeColor <a class="header-anchor" href="#map-freecolor" aria-label="Permalink to "map.freeColor""></a></h3><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ebebeb'</code></li></ul><p>自由区域点显示颜色。(仅结构化地图可用)</p><h3 id="map-autofitoffset" tabindex="-1">map.autoFitOffset <a class="header-anchor" href="#map-autofitoffset" aria-label="Permalink to "map.autoFitOffset""></a></h3><ul><li><strong>类型</strong>: <code>{ x: number; y: number }</code></li><li><strong>默认值</strong>: <code>{ x: 0, y: 0 }</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>地图自适应时的偏移量。</p><p>用于在地图自适应居中显示时，手动指定一个偏移值（例如为了避开底部的 Footer 组件或顶部的 Header 组件），使地图在视觉上保持在显示区域的中心。</p><h3 id="map-adjacencythreshold" tabindex="-1">map.adjacencyThreshold <a class="header-anchor" href="#map-adjacencythreshold" aria-label="Permalink to "map.adjacencyThreshold""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>3</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>房间相邻判定阈值。</p><p>用于判断两个房间是否相邻的算法。两个房间的边界点距离小于等于此阈值时，认为它们相邻。</p><h3 id="map-originchangeautofitthreshold" tabindex="-1">map.originChangeAutoFitThreshold <a class="header-anchor" href="#map-originchangeautofitthreshold" aria-label="Permalink to "map.originChangeAutoFitThreshold""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li></ul><p>地图原点变化自适应阈值。当地图 origin 的 x 或 y 变化超过此值时，将触发自适应缩放。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>这是触发自适应缩放的条件之一。关于自适应缩放的完整说明，请参阅 <a href="/guide/advanced-usage.html#自适应缩放">自适应缩放</a>。</p></div><h3 id="map-sizechangeautofitthreshold" tabindex="-1">map.sizeChangeAutoFitThreshold <a class="header-anchor" href="#map-sizechangeautofitthreshold" aria-label="Permalink to "map.sizeChangeAutoFitThreshold""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>10</code></li></ul><p>地图尺寸变化自适应阈值。当地图宽度或高度变化超过此值时，将触发自适应缩放。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>这是触发自适应缩放的条件之一。关于自适应缩放的完整说明，请参阅 <a href="/guide/advanced-usage.html#自适应缩放">自适应缩放</a>。</p></div><h2 id="heatmap" tabindex="-1">heatmap <a class="header-anchor" href="#heatmap" aria-label="Permalink to "heatmap""></a></h2><p>热力图配置，控制信号强度热力图的渲染效果。</p><h3 id="heatmap-cellsize" tabindex="-1">heatmap.cellSize <a class="header-anchor" href="#heatmap-cellsize" aria-label="Permalink to "heatmap.cellSize""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>热力图单元格大小。</p><h3 id="heatmap-maxdistance" tabindex="-1">heatmap.maxDistance <a class="header-anchor" href="#heatmap-maxdistance" aria-label="Permalink to "heatmap.maxDistance""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>14</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>热力图影响的最大距离。</p><h3 id="heatmap-smoothiterations" tabindex="-1">heatmap.smoothIterations <a class="header-anchor" href="#heatmap-smoothiterations" aria-label="Permalink to "heatmap.smoothIterations""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>10</code></li></ul><p>热力图平滑迭代次数。</p><h3 id="heatmap-heatmapalpha" tabindex="-1">heatmap.heatmapAlpha <a class="header-anchor" href="#heatmap-heatmapalpha" aria-label="Permalink to "heatmap.heatmapAlpha""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.8</code></li></ul><p>热力图透明度 (0-1)。</p><h3 id="heatmap-usegradient" tabindex="-1">heatmap.useGradient <a class="header-anchor" href="#heatmap-usegradient" aria-label="Permalink to "heatmap.useGradient""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否启用颜色渐变。关闭后会使用统一色阶渲染。</p><h3 id="heatmap-colorgradients" tabindex="-1">heatmap.colorGradients <a class="header-anchor" href="#heatmap-colorgradients" aria-label="Permalink to "heatmap.colorGradients""></a></h3><ul><li><strong>类型</strong>: <code>[ColorSource, ColorSource, ColorSource, ColorSource, ColorSource, ColorSource, ColorSource, ColorSource]</code></li><li><strong>默认值</strong>: <code>['#FF3B30', '#FF7A00', '#FFA100', '#FFD700', '#99DD70', '#2EC070', '#40E0D0', '#88D0E9']</code></li></ul><p>热力图颜色渐变配置，从高强度到低强度。</p><h2 id="room" tabindex="-1">room <a class="header-anchor" href="#room" aria-label="Permalink to "room""></a></h2><p>房间配置，控制房间的颜色、名称、属性显示等。</p><h3 id="room-colors" tabindex="-1">room.colors <a class="header-anchor" href="#room-colors" aria-label="Permalink to "room.colors""></a></h3><p>房间颜色配置对象。</p><div class="tip custom-block"><p class="custom-block-title">智能配色</p><p>SDK 使用<strong>智能配色算法</strong>，自动确保相邻房间颜色不同。</p><ul><li><strong>建议至少提供 4 种颜色</strong>（基于<a href="https://zh.wikipedia.org/wiki/%E5%9B%9B%E8%89%B2%E5%AE%9A%E7%90%86" target="_blank" rel="noreferrer">四色定理</a>，4种颜色足以满足平面地图需求）</li><li>所有数组类型的颜色配置（<code>active</code>、<code>inactive</code>、<code>name</code>、<code>propertyTheme</code> 等）<strong>建议长度一致</strong></li><li>如果有复杂的相邻房间情况，可以尝试增加更多的颜色，以确保相邻房间颜色不同</li></ul><p>关于智能配色算法的完整说明、配色策略和实际案例，请参阅 <a href="/guide/advanced-usage.html#房间智能配色">房间智能配色</a>。</p></div><h3 id="room-colors-sortby" tabindex="-1">room.colors.sortBy <a class="header-anchor" href="#room-colors-sortby" aria-label="Permalink to "room.colors.sortBy""></a></h3><ul><li><strong>类型</strong>: <code>'index' | 'area'</code></li><li><strong>默认值</strong>: <code>'index'</code></li></ul><p>房间颜色排序方式。</p><ul><li><code>index</code>：按房间ID排序，保持颜色分配稳定。</li><li><code>area</code>：按房间面积排序，大房间将优先分配索引靠前的颜色。</li></ul><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>使用 <code>area</code> 可能会导致机器导航过程中颜色的突然变化(房间大小变化引起)，建议谨慎使用。</p></div><h3 id="room-colors-strategy" tabindex="-1">room.colors.strategy <a class="header-anchor" href="#room-colors-strategy" aria-label="Permalink to "room.colors.strategy""></a></h3><ul><li><strong>类型</strong>: <code>'priority' | 'balanced'</code></li><li><strong>默认值</strong>: <code>'priority'</code></li></ul><p>房间颜色分配策略。</p><ul><li><code>priority</code>：靠前优先，索引靠前的颜色将被优先使用。</li><li><code>balanced</code>：均匀分配，颜色将被尽可能均匀地使用。</li></ul><h4 id="room-colors-active" tabindex="-1">room.colors.active <a class="header-anchor" href="#room-colors-active" aria-label="Permalink to "room.colors.active""></a></h4><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>['#a8c8f5', '#9de5c7', '#d4b9f7', '#ffd399']</code></li></ul><p>房间激活状态的颜色数组。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li><strong>当 <code>enableRoomSelection: true</code> 时</strong>：代表“被选中”房间的填充色。</li><li><strong>当 <code>enableRoomSelection: false</code> 时</strong>：若未定义 <code>room.colors.normal</code>，默认使用此配置。</li></ul></div><h4 id="room-colors-inactive" tabindex="-1">room.colors.inactive <a class="header-anchor" href="#room-colors-inactive" aria-label="Permalink to "room.colors.inactive""></a></h4><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>['#d6e7fc', '#d1f4e5', '#ece0fb', '#fff0d9']</code></li></ul><p>房间非激活状态的颜色数组。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>仅在 <code>enableRoomSelection: true</code> 且房间“未被选中”时生效。</p></div><p>颜色索引与 <code>active</code> 对应，建议长度保持一致。</p><h4 id="room-colors-normal" tabindex="-1">room.colors.normal <a class="header-anchor" href="#room-colors-normal" aria-label="Permalink to "room.colors.normal""></a></h4><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>undefined</code></li></ul><p>房间在普通展示模式下的填充颜色数组。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>仅在 <code>enableRoomSelection: false</code> 时生效。若未定义，默认使用 <code>room.colors.active</code> 的配置。</p></div><h4 id="room-colors-disabled" tabindex="-1">room.colors.disabled <a class="header-anchor" href="#room-colors-disabled" aria-label="Permalink to "room.colors.disabled""></a></h4><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>['#d9d9d9']</code></li></ul><p>房间禁用状态（列入 <code>runtime.disabledRoomIds</code>）的填充颜色数组。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li>与 <code>enableRoomSelection</code> 无关，且优先于选中态：房间一旦列入 <code>disabledRoomIds</code> 就用这里的颜色。</li><li>填一个值即所有禁用房间共用一色；也可以按四色索引给满四个值。长度既不是 1 也不等于 <code>active</code> 长度时会打印告警，颜色按取模分配。</li><li>配置为空数组或显式置为 <code>undefined</code> 时，回退到该房间的 <code>room.colors.inactive</code> 颜色。</li></ul></div><h4 id="room-colors-name" tabindex="-1">room.colors.name <a class="header-anchor" href="#room-colors-name" aria-label="Permalink to "room.colors.name""></a></h4><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>['#2563b8', '#26966b', '#7c3fb8', '#d97706']</code></li></ul><p>房间名称标签的颜色数组。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li><strong>当 <code>enableRoomSelection: true</code> 时</strong>：代表“被选中”房间的文字颜色。</li><li><strong>当 <code>enableRoomSelection: false</code> 时</strong>：若未定义 <code>room.colors.nameNormal</code>，默认使用此配置。</li></ul></div><p>颜色索引与 <code>active</code> 对应，建议长度保持一致。</p><h4 id="room-colors-nameinactive" tabindex="-1">room.colors.nameInactive <a class="header-anchor" href="#room-colors-nameinactive" aria-label="Permalink to "room.colors.nameInactive""></a></h4><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>undefined</code></li></ul><p>房间名称标签在非激活状态下的颜色数组。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>仅在 <code>enableRoomSelection: true</code> 且房间“未被选中”时生效。</p></div><p>如果不配置，则默认使用 <code>room.colors.name</code>。</p><h4 id="room-colors-namenormal" tabindex="-1">room.colors.nameNormal <a class="header-anchor" href="#room-colors-namenormal" aria-label="Permalink to "room.colors.nameNormal""></a></h4><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>undefined</code></li></ul><p>房间名称标签在普通展示模式下的颜色数组。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>仅在 <code>enableRoomSelection: false</code> 时生效。若未定义，默认使用 <code>room.colors.name</code> 的配置。</p></div><h4 id="room-colors-propertytheme" tabindex="-1">room.colors.propertyTheme <a class="header-anchor" href="#room-colors-propertytheme" aria-label="Permalink to "room.colors.propertyTheme""></a></h4><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>['#2563b8', '#26966b', '#7c3fb8', '#d97706']</code></li></ul><p>房间属性图标主题颜色数组。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li><strong>当 <code>enableRoomSelection: true</code> 时</strong>：代表“被选中”房间的图标颜色。</li><li><strong>当 <code>enableRoomSelection: false</code> 时</strong>：若未定义 <code>room.colors.propertyThemeNormal</code>，默认使用此配置。</li></ul></div><p>颜色索引与 <code>active</code> 对应，建议长度保持一致。</p><h4 id="room-colors-propertythemeinactive" tabindex="-1">room.colors.propertyThemeInactive <a class="header-anchor" href="#room-colors-propertythemeinactive" aria-label="Permalink to "room.colors.propertyThemeInactive""></a></h4><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>undefined</code></li></ul><p>房间属性图标在非激活状态下的颜色数组。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>仅在 <code>enableRoomSelection: true</code> 且房间“未被选中”时生效。</p></div><p>如果不配置，则默认使用 <code>room.colors.propertyTheme</code>。</p><h4 id="room-colors-propertythemenormal" tabindex="-1">room.colors.propertyThemeNormal <a class="header-anchor" href="#room-colors-propertythemenormal" aria-label="Permalink to "room.colors.propertyThemeNormal""></a></h4><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>undefined</code></li></ul><p>房间属性图标在普通展示模式下的主题颜色数组。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>仅在 <code>enableRoomSelection: false</code> 时生效。若未定义，默认使用 <code>room.colors.propertyTheme</code> 的配置。</p></div><h4 id="room-colors-selectionindicatorbackground" tabindex="-1">room.colors.selectionIndicatorBackground <a class="header-anchor" href="#room-colors-selectionindicatorbackground" aria-label="Permalink to "room.colors.selectionIndicatorBackground""></a></h4><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>['#2563b8', '#26966b', '#7c3fb8', '#d97706']</code></li></ul><p>选择指示器背景颜色数组。</p><p>颜色索引与 <code>active</code> 对应，建议长度保持一致。</p><h4 id="room-colors-selectionindicatoricon" tabindex="-1">room.colors.selectionIndicatorIcon <a class="header-anchor" href="#room-colors-selectionindicatoricon" aria-label="Permalink to "room.colors.selectionIndicatorIcon""></a></h4><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>['#ffffff', '#ffffff', '#ffffff', '#ffffff']</code></li></ul><p>选择指示器图标颜色数组。</p><p>颜色索引与 <code>active</code> 对应，建议长度保持一致。</p><h4 id="room-colors-no-room-data" tabindex="-1">room.colors.NO_ROOM_DATA <a class="header-anchor" href="#room-colors-no-room-data" aria-label="Permalink to "room.colors.NO_ROOM_DATA""></a></h4><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'#ebebeb'</code></li></ul><p>无房间数据区域的颜色 (点阵协议专用)。</p><h4 id="room-colors-room-gap" tabindex="-1">room.colors.ROOM_GAP <a class="header-anchor" href="#room-colors-room-gap" aria-label="Permalink to "room.colors.ROOM_GAP""></a></h4><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'#ebebeb'</code></li></ul><p>房间间隙的颜色 (点阵协议专用)。</p><h4 id="room-colors-obstacle-room" tabindex="-1">room.colors.OBSTACLE_ROOM <a class="header-anchor" href="#room-colors-obstacle-room" aria-label="Permalink to "room.colors.OBSTACLE_ROOM""></a></h4><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'#ebebeb'</code></li></ul><p>障碍物房间的颜色 (点阵协议专用)。</p><h4 id="room-colors-unknown-room" tabindex="-1">room.colors.UNKNOWN_ROOM <a class="header-anchor" href="#room-colors-unknown-room" aria-label="Permalink to "room.colors.UNKNOWN_ROOM""></a></h4><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'#ebebeb'</code></li></ul><p>未知房间的颜色。对于结构化协议代表 <code>roomId >= 255</code> 的房间颜色。</p><h4 id="room-colors-version0-room" tabindex="-1">room.colors.VERSION0_ROOM <a class="header-anchor" href="#room-colors-version0-room" aria-label="Permalink to "room.colors.VERSION0_ROOM""></a></h4><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>''</code></li></ul><p>点阵地图协议版本0的房间颜色 (点阵协议专用)。</p><div class="tip custom-block"><p class="custom-block-title">版本兼容说明</p><p>此配置项用于控制地图协议版本0（未支持分区的协议版本）中房间的颜色。在之前的版本中，版本0的房间和无房间数据区域都使用 <code>NO_ROOM_DATA</code> 颜色。现已将版本0的房间单独拆分为 <code>VERSION0_ROOM</code>。</p><p>默认值为空字符串，此时将自动使用 <code>NO_ROOM_DATA</code> 的颜色，以保持向后兼容。如需区分显示，可配置为不同的颜色值。</p></div><h3 id="room-namelabel" tabindex="-1">room.nameLabel <a class="header-anchor" href="#room-namelabel" aria-label="Permalink to "room.nameLabel""></a></h3><p>房间名称标签配置。</p><h4 id="room-namelabel-fontsize" tabindex="-1">room.nameLabel.fontSize <a class="header-anchor" href="#room-namelabel-fontsize" aria-label="Permalink to "room.nameLabel.fontSize""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>12</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>房间名称字体大小。</p><h4 id="room-namelabel-fontfamily" tabindex="-1">room.nameLabel.fontFamily <a class="header-anchor" href="#room-namelabel-fontfamily" aria-label="Permalink to "room.nameLabel.fontFamily""></a></h4><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'system-ui, -apple-system, sans-serif'</code></li></ul><p>房间名称字体名称。</p><h4 id="room-namelabel-fontweight" tabindex="-1">room.nameLabel.fontWeight <a class="header-anchor" href="#room-namelabel-fontweight" aria-label="Permalink to "room.nameLabel.fontWeight""></a></h4><ul><li><strong>类型</strong>: <code>TextStyleFontWeight</code></li><li><strong>默认值</strong>: <code>'500'</code></li></ul><p>房间名称字体粗细。</p><h3 id="room-type" tabindex="-1">room.type <a class="header-anchor" href="#room-type" aria-label="Permalink to "room.type""></a></h3><p>房间类型图标配置。</p><h4 id="room-type-assets" tabindex="-1">room.type.assets <a class="header-anchor" href="#room-type-assets" aria-label="Permalink to "room.type.assets""></a></h4><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>[内置资源, ...]</code></li></ul><p>房间类型图标资源数组。</p><p>数组索引对应 <code>RoomProperty.type</code> 值，即 <code>assets[type]</code> 显示该索引对应的图标。</p><p><strong>内置默认资源映射表：</strong></p><p>以下是内置默认图标与 <code>type</code> 值的对应关系：</p><table tabindex="0"><thead><tr><th style="text-align:left;">ID (索引)</th><th style="text-align:left;">房间类型</th></tr></thead><tbody><tr><td style="text-align:left;">0</td><td style="text-align:left;">通用/房间</td></tr><tr><td style="text-align:left;">1</td><td style="text-align:left;">客厅</td></tr><tr><td style="text-align:left;">2</td><td style="text-align:left;">餐厅</td></tr><tr><td style="text-align:left;">3</td><td style="text-align:left;">主卧</td></tr><tr><td style="text-align:left;">4</td><td style="text-align:left;">次卧/卧室</td></tr><tr><td style="text-align:left;">5</td><td style="text-align:left;">书房</td></tr><tr><td style="text-align:left;">6</td><td style="text-align:left;">厨房</td></tr><tr><td style="text-align:left;">7</td><td style="text-align:left;">卫生间</td></tr><tr><td style="text-align:left;">8</td><td style="text-align:left;">洗衣房</td></tr><tr><td style="text-align:left;">9</td><td style="text-align:left;">休息室</td></tr><tr><td style="text-align:left;">10</td><td style="text-align:left;">储物间</td></tr><tr><td style="text-align:left;">11</td><td style="text-align:left;">儿童房</td></tr><tr><td style="text-align:left;">12</td><td style="text-align:left;">阳光房</td></tr><tr><td style="text-align:left;">13</td><td style="text-align:left;">走廊</td></tr><tr><td style="text-align:left;">14</td><td style="text-align:left;">阳台</td></tr><tr><td style="text-align:left;">15</td><td style="text-align:left;">健身房</td></tr><tr><td style="text-align:left;">16</td><td style="text-align:left;">玄关</td></tr></tbody></table><p>当使用内置默认资源时，索引与房间类型的对应关系详见<a href="/guide/advanced-usage.html#房间类型图标">房间类型图标</a>。如果开发者通过此配置项自定义了数组，则映射关系完全取决于自定义数组的顺序。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>如果某个索引对应的资源为空字符串（<code>''</code>），则该类型的房间将不会显示任何图标。例如，通过设置 <code>assets[0] = ''</code> 可以隐藏 type 为 0 的房间图标。</p></div><h4 id="room-type-iconsize" tabindex="-1">room.type.iconSize <a class="header-anchor" href="#room-type-iconsize" aria-label="Permalink to "room.type.iconSize""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>12</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>房间类型图标大小。</p><h4 id="room-type-gap" tabindex="-1">room.type.gap <a class="header-anchor" href="#room-type-gap" aria-label="Permalink to "room.type.gap""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>4</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>图标与房间名称文字之间的间距。</p><h4 id="room-type-position" tabindex="-1">room.type.position <a class="header-anchor" href="#room-type-position" aria-label="Permalink to "room.type.position""></a></h4><ul><li><strong>类型</strong>: <code>'left' | 'right'</code></li><li><strong>默认值</strong>: <code>'left'</code></li></ul><p>图标相对于房间名称文字的显示位置。</p><h4 id="room-type-container" tabindex="-1">room.type.container <a class="header-anchor" href="#room-type-container" aria-label="Permalink to "room.type.container""></a></h4><p>房间类型图标背景容器配置。</p><h5 id="room-type-container-visible" tabindex="-1">room.type.container.visible <a class="header-anchor" href="#room-type-container-visible" aria-label="Permalink to "room.type.container.visible""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示背景容器。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li><strong>颜色逻辑</strong>： <ul><li>当开启背景容器（<code>container.visible: true</code>）时，背景将填充为房间名称颜色（<code>room.colors.name</code>），图标将自动设置为白色（<code>tint: #ffffff</code>）。</li><li>当禁用背景容器（<code>container.visible: false</code>）时，图标将直接使用房间名称颜色（<code>room.colors.name</code>）。</li></ul></li><li><strong>最佳实践</strong>：为了实现自动换色效果，建议使用单色（通常为黑色或白色）的 SVG 资源。如果使用彩色 PNG 资源，建议将 <code>container.visible</code> 设为 <code>false</code> 以保持原色。</li></ul></div><h5 id="room-type-container-size" tabindex="-1">room.type.container.size <a class="header-anchor" href="#room-type-container-size" aria-label="Permalink to "room.type.container.size""></a></h5><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>背景容器大小。</p><h5 id="room-type-container-borderradius" tabindex="-1">room.type.container.borderRadius <a class="header-anchor" href="#room-type-container-borderradius" aria-label="Permalink to "room.type.container.borderRadius""></a></h5><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>背景容器圆角大小。</p><h3 id="room-property" tabindex="-1">room.property <a class="header-anchor" href="#room-property" aria-label="Permalink to "room.property""></a></h3><p>房间属性配置。</p><h4 id="room-property-displayorders" tabindex="-1">room.property.displayOrders <a class="header-anchor" href="#room-property-displayorders" aria-label="Permalink to "room.property.displayOrders""></a></h4><ul><li><strong>类型</strong>: <code>('cleanMode' | 'suction' | 'cistern' | 'cleanTimes' | string)[]</code></li><li><strong>默认值</strong>: <code>['cleanMode', 'suction', 'cistern', 'cleanTimes']</code></li></ul><p>房间属性显示顺序。</p><p>你也可以传入自定义的字段名，比如 <code>['cleanMode', 'suction', 'cistern', 'cleanTimes', 'customProperty1']</code>。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>如果要隐藏某个房间属性，比如 <code>cleanTimes</code>，那么清扫次数图标将不会显示。</p></div><h4 id="room-property-customassets" tabindex="-1">room.property.customAssets <a class="header-anchor" href="#room-property-customassets" aria-label="Permalink to "room.property.customAssets""></a></h4><ul><li><strong>类型</strong>: <code>Record<string, string[]></code></li><li><strong>默认值</strong>: <code>undefined</code></li></ul><p>自定义属性图标资源配置，</p><p>你可以传入自定义的字段名和对应的图标资源数组，比如:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
182
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> room</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
|
183
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> property</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
|
184
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> displayOrders</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'cleanMode'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'suction'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'customProperty1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'cistern'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'cleanTimes'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'customProperty2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
185
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> customAssets</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
|
186
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> customProperty1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
|
|
187
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'your_custom_property_asset_url_0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
188
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'your_custom_property_asset_url_1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
189
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'your_custom_property_asset_url_2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
190
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'your_custom_property_asset_url_3'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
191
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
|
192
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> customProperty2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
|
|
193
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'your_custom_property_asset_url_0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
194
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'your_custom_property_asset_url_1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
195
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'your_custom_property_asset_url_2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
196
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'your_custom_property_asset_url_3'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
197
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
|
198
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
199
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
200
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
201
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>使用图标资源时，强烈建议使用白色图标，以便 SDK 能够根据房间主题色（<code>room.colors.propertyTheme</code>）自动调整图标颜色。</p></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>自定义属性配置完成后，还需要由 <code>roomProperties</code> 的 <code>customData</code> 数据驱动显示。你可以参考<a href="/guide/advanced-usage.html#自定义属性">自定义属性</a>章节。</p><p>目前自定义属性仅支持数值型的字段。</p></div><h4 id="room-property-iconwidth" tabindex="-1">room.property.iconWidth <a class="header-anchor" href="#room-property-iconwidth" aria-label="Permalink to "room.property.iconWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>14</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>房间属性图标宽度。</p><h4 id="room-property-iconheight" tabindex="-1">room.property.iconHeight <a class="header-anchor" href="#room-property-iconheight" aria-label="Permalink to "room.property.iconHeight""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>14</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>房间属性图标高度。</p><h4 id="room-property-foldable" tabindex="-1">room.property.foldable <a class="header-anchor" href="#room-property-foldable" aria-label="Permalink to "room.property.foldable""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>房间属性是否可折叠。</p><h4 id="room-property-offsetx" tabindex="-1">room.property.offsetX <a class="header-anchor" href="#room-property-offsetx" aria-label="Permalink to "room.property.offsetX""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>房间属性X轴偏移。</p><h4 id="room-property-offsety" tabindex="-1">room.property.offsetY <a class="header-anchor" href="#room-property-offsety" aria-label="Permalink to "room.property.offsetY""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>6</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>房间属性Y轴偏移。</p><h4 id="room-property-icongap" tabindex="-1">room.property.iconGap <a class="header-anchor" href="#room-property-icongap" aria-label="Permalink to "room.property.iconGap""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>房间属性图标间距。</p><h4 id="room-property-container" tabindex="-1">room.property.container <a class="header-anchor" href="#room-property-container" aria-label="Permalink to "room.property.container""></a></h4><p>房间属性容器样式配置。</p><h5 id="room-property-container-backgroundcolor" tabindex="-1">room.property.container.backgroundColor <a class="header-anchor" href="#room-property-container-backgroundcolor" aria-label="Permalink to "room.property.container.backgroundColor""></a></h5><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>房间属性容器背景颜色。</p><h5 id="room-property-container-paddingvertical" tabindex="-1">room.property.container.paddingVertical <a class="header-anchor" href="#room-property-container-paddingvertical" aria-label="Permalink to "room.property.container.paddingVertical""></a></h5><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>房间属性容器垂直内边距。</p><h5 id="room-property-container-paddinghorizontal" tabindex="-1">room.property.container.paddingHorizontal <a class="header-anchor" href="#room-property-container-paddinghorizontal" aria-label="Permalink to "room.property.container.paddingHorizontal""></a></h5><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>房间属性容器水平内边距。</p><h5 id="room-property-container-borderradius" tabindex="-1">room.property.container.borderRadius <a class="header-anchor" href="#room-property-container-borderradius" aria-label="Permalink to "room.property.container.borderRadius""></a></h5><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>房间属性容器边框圆角。</p><h5 id="room-property-container-tailheight" tabindex="-1">room.property.container.tailHeight <a class="header-anchor" href="#room-property-container-tailheight" aria-label="Permalink to "room.property.container.tailHeight""></a></h5><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>房间属性容器气泡三角形高度。</p><h5 id="room-property-container-tailwidth" tabindex="-1">room.property.container.tailWidth <a class="header-anchor" href="#room-property-container-tailwidth" aria-label="Permalink to "room.property.container.tailWidth""></a></h5><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>8</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>房间属性容器气泡三角形宽度。</p><h4 id="room-property-suction" tabindex="-1">room.property.suction <a class="header-anchor" href="#room-property-suction" aria-label="Permalink to "room.property.suction""></a></h4><p>吸力图标配置。</p><h5 id="room-property-suction-assets" tabindex="-1">room.property.suction.assets <a class="header-anchor" href="#room-property-suction-assets" aria-label="Permalink to "room.property.suction.assets""></a></h5><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>[内置资源, ...]</code></li></ul><p>吸力等级图标资源数组。建议传入的图标资源数量与吸力等级数量一致。</p><p>数组索引对应 <code>RoomProperty.suction</code> 值，即 <code>assets[suction]</code> 显示对应等级的图标。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>使用图标资源时，强烈建议使用白色图标，以便 SDK 能够根据房间主题色（<code>room.colors.propertyTheme</code>）自动调整图标颜色。</p></div><h4 id="room-property-cistern" tabindex="-1">room.property.cistern <a class="header-anchor" href="#room-property-cistern" aria-label="Permalink to "room.property.cistern""></a></h4><p>水量图标配置。</p><h5 id="room-property-cistern-assets" tabindex="-1">room.property.cistern.assets <a class="header-anchor" href="#room-property-cistern-assets" aria-label="Permalink to "room.property.cistern.assets""></a></h5><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>[内置资源, ...]</code></li></ul><p>水量图标资源数组。建议传入的图标资源数量与水量等级数量一致。</p><p>数组索引对应 <code>RoomProperty.cistern</code> 值，即 <code>assets[cistern]</code> 显示对应等级的图标。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>使用图标资源时，强烈建议使用白色图标，以便 SDK 能够根据房间主题色（<code>room.colors.propertyTheme</code>）自动调整图标颜色。</p></div><h4 id="room-property-cleanmode" tabindex="-1">room.property.cleanMode <a class="header-anchor" href="#room-property-cleanmode" aria-label="Permalink to "room.property.cleanMode""></a></h4><p>清扫模式图标配置。</p><h5 id="room-property-cleanmode-assets" tabindex="-1">room.property.cleanMode.assets <a class="header-anchor" href="#room-property-cleanmode-assets" aria-label="Permalink to "room.property.cleanMode.assets""></a></h5><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>[内置资源, ...]</code></li></ul><p>清扫模式图标资源数组。建议传入的图标资源数量与清扫模式等级数量一致。</p><p>数组索引对应 <code>RoomProperty.cleanMode</code> 值，即 <code>assets[cleanMode]</code> 显示对应等级的图标。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>使用图标资源时，强烈建议使用白色图标，以便 SDK 能够根据房间主题色（<code>room.colors.propertyTheme</code>）自动调整图标颜色。</p></div><h4 id="room-property-cleantimes" tabindex="-1">room.property.cleanTimes <a class="header-anchor" href="#room-property-cleantimes" aria-label="Permalink to "room.property.cleanTimes""></a></h4><p>清扫次数图标配置。</p><h5 id="room-property-cleantimes-assets" tabindex="-1">room.property.cleanTimes.assets <a class="header-anchor" href="#room-property-cleantimes-assets" aria-label="Permalink to "room.property.cleanTimes.assets""></a></h5><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>[内置资源, ...]</code></li></ul><p>清扫次数图标资源数组。建议传入的图标资源数量与清扫次数等级数量一致。</p><p>数组索引对应 <code>RoomProperty.cleanTimes - 1</code> 值，即 <code>assets[cleanTimes - 1]</code> 显示对应等级的图标。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>清扫次数的图标规则相对特殊，因为实际不存在<strong>0次</strong>清扫，所以数组索引需要<strong>减1</strong>。</p></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>使用图标资源时，强烈建议使用白色图标，以便 SDK 能够根据房间主题色（<code>room.colors.propertyTheme</code>）自动调整图标颜色。</p></div><h4 id="room-property-cleanorder" tabindex="-1">room.property.cleanOrder <a class="header-anchor" href="#room-property-cleanorder" aria-label="Permalink to "room.property.cleanOrder""></a></h4><p>清扫顺序配置。</p><h5 id="room-property-cleanorder-color" tabindex="-1">room.property.cleanOrder.color <a class="header-anchor" href="#room-property-cleanorder-color" aria-label="Permalink to "room.property.cleanOrder.color""></a></h5><ul><li><strong>类型</strong>: <code>ColorSource | 'auto'</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>清扫顺序文字颜色。</p><p><strong>可选值：</strong></p><ul><li><strong>颜色值</strong>（如 <code>'#ffffff'</code>、<code>'rgb(255, 255, 255)'</code> 等）：所有房间的清扫顺序文字使用固定的颜色</li><li><strong><code>'auto'</code></strong>：文字颜色自动跟随 <code>room.colors.active</code> 的主题色，实现每个房间的清扫顺序文字与房间填充色保持一致</li></ul><h5 id="room-property-cleanorder-backgroundcolor" tabindex="-1">room.property.cleanOrder.backgroundColor <a class="header-anchor" href="#room-property-cleanorder-backgroundcolor" aria-label="Permalink to "room.property.cleanOrder.backgroundColor""></a></h5><ul><li><strong>类型</strong>: <code>ColorSource | 'auto'</code></li><li><strong>默认值</strong>: <code>'auto'</code></li></ul><p>清扫顺序序号的圆形背景色。</p><p><strong>可选值：</strong></p><ul><li><strong><code>'auto'</code></strong>：背景色跟随房间属性图标的主题色，即 <code>room.colors.propertyTheme</code> / <code>propertyThemeInactive</code> / <code>propertyThemeNormal</code> 三态（选中 / 未选中 / 非选择模式）</li><li><strong>颜色值</strong>（如 <code>'#f0f0f0'</code>、<code>'rgb(240, 240, 240)'</code> 等）：所有房间的序号背景使用固定颜色。此时它与图标颜色解绑，上述三态一并失效</li></ul><h5 id="room-property-cleanorder-fontfamily" tabindex="-1">room.property.cleanOrder.fontFamily <a class="header-anchor" href="#room-property-cleanorder-fontfamily" aria-label="Permalink to "room.property.cleanOrder.fontFamily""></a></h5><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'system-ui, -apple-system, sans-serif'</code></li></ul><p>清扫顺序字体名称。</p><h5 id="room-property-cleanorder-fontweight" tabindex="-1">room.property.cleanOrder.fontWeight <a class="header-anchor" href="#room-property-cleanorder-fontweight" aria-label="Permalink to "room.property.cleanOrder.fontWeight""></a></h5><ul><li><strong>类型</strong>: <code>TextStyleFontWeight</code></li><li><strong>默认值</strong>: <code>'400'</code></li></ul><p>清扫顺序字体粗细。</p><h5 id="room-property-cleanorder-fontsize" tabindex="-1">room.property.cleanOrder.fontSize <a class="header-anchor" href="#room-property-cleanorder-fontsize" aria-label="Permalink to "room.property.cleanOrder.fontSize""></a></h5><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>10</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>清扫顺序字体大小。</p><h5 id="room-property-cleanorder-gapright" tabindex="-1">room.property.cleanOrder.gapRight <a class="header-anchor" href="#room-property-cleanorder-gapright" aria-label="Permalink to "room.property.cleanOrder.gapRight""></a></h5><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>清扫顺序右侧间距。</p><h3 id="room-selectionindicator" tabindex="-1">room.selectionIndicator <a class="header-anchor" href="#room-selectionindicator" aria-label="Permalink to "room.selectionIndicator""></a></h3><p>房间选择指示器配置。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p><code>enableRoomSelection</code> 为 <code>true</code> 时</p><ul><li>如果 <code>roomSelectionMode</code> 为 <code>checkmark</code> ，选中的房间会显示选择指示器。</li><li>如果 <code>roomSelectionMode</code> 为 <code>order</code> ，选中的房间会显示房间顺序。</li></ul></div><h4 id="room-selectionindicator-iconsrc" tabindex="-1">room.selectionIndicator.iconSrc <a class="header-anchor" href="#room-selectionindicator-iconsrc" aria-label="Permalink to "room.selectionIndicator.iconSrc""></a></h4><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>选择指示器图标资源路径。</p><h4 id="room-selectionindicator-iconwidth" tabindex="-1">room.selectionIndicator.iconWidth <a class="header-anchor" href="#room-selectionindicator-iconwidth" aria-label="Permalink to "room.selectionIndicator.iconWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>14</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>选择指示器图标宽度。</p><h4 id="room-selectionindicator-iconheight" tabindex="-1">room.selectionIndicator.iconHeight <a class="header-anchor" href="#room-selectionindicator-iconheight" aria-label="Permalink to "room.selectionIndicator.iconHeight""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>14</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>选择指示器图标高度。</p><h4 id="room-selectionindicator-containerwidth" tabindex="-1">room.selectionIndicator.containerWidth <a class="header-anchor" href="#room-selectionindicator-containerwidth" aria-label="Permalink to "room.selectionIndicator.containerWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>选择指示器容器宽度。</p><h4 id="room-selectionindicator-containerheight" tabindex="-1">room.selectionIndicator.containerHeight <a class="header-anchor" href="#room-selectionindicator-containerheight" aria-label="Permalink to "room.selectionIndicator.containerHeight""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>选择指示器容器高度。</p><h4 id="room-selectionindicator-strokewidth" tabindex="-1">room.selectionIndicator.strokeWidth <a class="header-anchor" href="#room-selectionindicator-strokewidth" aria-label="Permalink to "room.selectionIndicator.strokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>选择指示器描边宽度。</p><h4 id="room-selectionindicator-strokecolor" tabindex="-1">room.selectionIndicator.strokeColor <a class="header-anchor" href="#room-selectionindicator-strokecolor" aria-label="Permalink to "room.selectionIndicator.strokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource | 'auto'</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>选择指示器描边颜色，同时控制边框和尾部箭头的颜色。</p><p><strong>可选值：</strong></p><ul><li><strong>颜色值</strong>（如 <code>'#ffffff'</code>、<code>'rgb(255, 255, 255)'</code> 等）：所有选择指示器使用固定的描边颜色</li><li><strong><code>'auto'</code></strong>：描边颜色自动跟随 <code>room.colors.selectionIndicatorBackground</code> 的主题色，实现每个房间的选择指示器边框与背景色保持一致</li></ul><h4 id="room-selectionindicator-borderradius" tabindex="-1">room.selectionIndicator.borderRadius <a class="header-anchor" href="#room-selectionindicator-borderradius" aria-label="Permalink to "room.selectionIndicator.borderRadius""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>选择指示器边框圆角。</p><h4 id="room-selectionindicator-offsetx" tabindex="-1">room.selectionIndicator.offsetX <a class="header-anchor" href="#room-selectionindicator-offsetx" aria-label="Permalink to "room.selectionIndicator.offsetX""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>选择指示器X轴偏移。</p><h4 id="room-selectionindicator-offsety" tabindex="-1">room.selectionIndicator.offsetY <a class="header-anchor" href="#room-selectionindicator-offsety" aria-label="Permalink to "room.selectionIndicator.offsetY""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>4</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>选择指示器Y轴偏移。</p><h4 id="room-selectionindicator-tailheight" tabindex="-1">room.selectionIndicator.tailHeight <a class="header-anchor" href="#room-selectionindicator-tailheight" aria-label="Permalink to "room.selectionIndicator.tailHeight""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>选择指示器气泡三角形高度。</p><h4 id="room-selectionindicator-tailwidth" tabindex="-1">room.selectionIndicator.tailWidth <a class="header-anchor" href="#room-selectionindicator-tailwidth" aria-label="Permalink to "room.selectionIndicator.tailWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>6</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>选择指示器气泡三角形宽度。</p><h3 id="room-floortype" tabindex="-1">room.floorType <a class="header-anchor" href="#room-floortype" aria-label="Permalink to "room.floorType""></a></h3><p>地板材质配置。</p><h4 id="room-floortype-assets" tabindex="-1">room.floorType.assets <a class="header-anchor" href="#room-floortype-assets" aria-label="Permalink to "room.floorType.assets""></a></h4><ul><li><strong>类型</strong>: <code>string[]</code></li><li><strong>默认值</strong>: <code>['', '内置瓷砖资源', '内置木地板(横向)资源', '内置木地板(纵向)资源']</code></li></ul><p>地板材质图标资源数组。建议传入的图标资源数量与地板材质等级数量一致。</p><p>数组索引对应 <code>RoomProperty.floorType</code> 值，即 <code>assets[floorType]</code> 显示对应等级的图标。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li>强烈建议使用材质的最小重复单元的图片资源以提升性能。</li><li>通常 <code>floorType</code> 值为<strong>0</strong>时，表示无地板材质。这种情况下 <code>assets[0]</code> 可以设置为空字符串。</li></ul></div><h4 id="room-floortype-opacity" tabindex="-1">room.floorType.opacity <a class="header-anchor" href="#room-floortype-opacity" aria-label="Permalink to "room.floorType.opacity""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.1</code></li></ul><p>地板材质透明度。</p><h4 id="room-floortype-scale" tabindex="-1">room.floorType.scale <a class="header-anchor" href="#room-floortype-scale" aria-label="Permalink to "room.floorType.scale""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.2</code></li></ul><p>地板材质缩放系数。</p><h3 id="room-enableelasticscale" tabindex="-1">room.enableElasticScale <a class="header-anchor" href="#room-enableelasticscale" aria-label="Permalink to "room.enableElasticScale""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>是否启用房间标签（RoomInfo）的弹性缩放。档位断点由 <a href="#elasticscale"><code>elasticScale.breakpoints</code></a> 定义，本组件的各档倍数见下面三个字段。</p><h3 id="room-elasticminscale" tabindex="-1">room.elasticMinScale <a class="header-anchor" href="#room-elasticminscale" aria-label="Permalink to "room.elasticMinScale""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.6</code></li></ul><p>最低档的倍数。与 <code>elasticMaxScale</code> 一起构成两档式简写，展开为 <code>[elasticMinScale, 1, ..., 1, elasticMaxScale]</code>。</p><p>默认两个断点时展开为 <code>[0.6, 1, 1.5]</code>。</p><h3 id="room-elasticmaxscale" tabindex="-1">room.elasticMaxScale <a class="header-anchor" href="#room-elasticmaxscale" aria-label="Permalink to "room.elasticMaxScale""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1.5</code></li></ul><p>最高档的倍数。见 <code>elasticMinScale</code>。</p><h3 id="room-elasticfactors" tabindex="-1">room.elasticFactors <a class="header-anchor" href="#room-elasticfactors" aria-label="Permalink to "room.elasticFactors""></a></h3><ul><li><strong>类型</strong>: <code>number[]</code></li><li><strong>默认值</strong>: <code>undefined</code></li></ul><p>房间标签的各档倍数，长度须等于 <code>elasticScale.breakpoints.length + 1</code>。</p><p>给了它就以它为准，<code>elasticMinScale</code> / <code>elasticMaxScale</code> 不再参与。要控制中间档、或使用多于 3 档时用它。</p><p>长度对不上会打 warn 并<strong>整组降级为不启用</strong>（退回纯反向缩放），不会自动补齐。</p><h2 id="path" tabindex="-1">path <a class="header-anchor" href="#path" aria-label="Permalink to "path""></a></h2><p>路径配置。</p><h3 id="path-linewidthfixed" tabindex="-1">path.lineWidthFixed <a class="header-anchor" href="#path-linewidthfixed" aria-label="Permalink to "path.lineWidthFixed""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>路径线条宽度是否固定（不跟随地图缩放变化）</p><h3 id="path-incrementalthreshold" tabindex="-1">path.incrementalThreshold <a class="header-anchor" href="#path-incrementalthreshold" aria-label="Permalink to "path.incrementalThreshold""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>5</code></li></ul><p>路径增量绘制检测阈值。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>地图组件默认会开启路径增量绘制以提升性能。</p><p>当传入的路径相比上一次绘制的路径点数量变化不超过 <code>incrementalThreshold</code> 时，使用增量绘制 (仅绘制新增的部分)，否则使用全量绘制 (重新绘制整条路径)。</p><p>设置为<strong>0</strong>时将关闭路径增量绘制。</p></div><h3 id="path-commonpath" tabindex="-1">path.commonPath <a class="header-anchor" href="#path-commonpath" aria-label="Permalink to "path.commonPath""></a></h3><p>清扫路径配置。</p><h4 id="path-commonpath-visible" tabindex="-1">path.commonPath.visible <a class="header-anchor" href="#path-commonpath-visible" aria-label="Permalink to "path.commonPath.visible""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>清扫路径是否可见</p><h4 id="path-commonpath-color" tabindex="-1">path.commonPath.color <a class="header-anchor" href="#path-commonpath-color" aria-label="Permalink to "path.commonPath.color""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>清扫路径颜色</p><h4 id="path-commonpath-width" tabindex="-1">path.commonPath.width <a class="header-anchor" href="#path-commonpath-width" aria-label="Permalink to "path.commonPath.width""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.5</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>清扫路径宽度</p><h3 id="path-transitionpath" tabindex="-1">path.transitionPath <a class="header-anchor" href="#path-transitionpath" aria-label="Permalink to "path.transitionPath""></a></h3><p>转场路径配置。</p><h4 id="path-transitionpath-visible" tabindex="-1">path.transitionPath.visible <a class="header-anchor" href="#path-transitionpath-visible" aria-label="Permalink to "path.transitionPath.visible""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>转场路径是否可见</p><h4 id="path-transitionpath-color" tabindex="-1">path.transitionPath.color <a class="header-anchor" href="#path-transitionpath-color" aria-label="Permalink to "path.transitionPath.color""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>转场路径颜色</p><h4 id="path-transitionpath-width" tabindex="-1">path.transitionPath.width <a class="header-anchor" href="#path-transitionpath-width" aria-label="Permalink to "path.transitionPath.width""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.5</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>转场路径宽度</p><h3 id="path-chargepath" tabindex="-1">path.chargePath <a class="header-anchor" href="#path-chargepath" aria-label="Permalink to "path.chargePath""></a></h3><p>回充路径配置。</p><h4 id="path-chargepath-visible" tabindex="-1">path.chargePath.visible <a class="header-anchor" href="#path-chargepath-visible" aria-label="Permalink to "path.chargePath.visible""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>回充路径是否可见</p><h4 id="path-chargepath-color" tabindex="-1">path.chargePath.color <a class="header-anchor" href="#path-chargepath-color" aria-label="Permalink to "path.chargePath.color""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>回充路径颜色</p><h4 id="path-chargepath-width" tabindex="-1">path.chargePath.width <a class="header-anchor" href="#path-chargepath-width" aria-label="Permalink to "path.chargePath.width""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.5</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>回充路径宽度</p><h3 id="path-moppath" tabindex="-1">path.mopPath <a class="header-anchor" href="#path-moppath" aria-label="Permalink to "path.mopPath""></a></h3><p>拖地路径配置。</p><h4 id="path-moppath-linevisible" tabindex="-1">path.mopPath.lineVisible <a class="header-anchor" href="#path-moppath-linevisible" aria-label="Permalink to "path.mopPath.lineVisible""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>拖地核心线是否可见。</p><h4 id="path-moppath-linecolor" tabindex="-1">path.mopPath.lineColor <a class="header-anchor" href="#path-moppath-linecolor" aria-label="Permalink to "path.mopPath.lineColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>拖地核心线颜色。</p><h4 id="path-moppath-linewidth" tabindex="-1">path.mopPath.lineWidth <a class="header-anchor" href="#path-moppath-linewidth" aria-label="Permalink to "path.mopPath.lineWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.5</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>拖地核心线宽度。</p><h4 id="path-moppath-trackvisible" tabindex="-1">path.mopPath.trackVisible <a class="header-anchor" href="#path-moppath-trackvisible" aria-label="Permalink to "path.mopPath.trackVisible""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>拖地轨迹（宽度涂抹区域）是否可见。</p><h4 id="path-moppath-trackcolor" tabindex="-1">path.mopPath.trackColor <a class="header-anchor" href="#path-moppath-trackcolor" aria-label="Permalink to "path.mopPath.trackColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>拖地轨迹颜色。</p><h4 id="path-moppath-trackalpha" tabindex="-1">path.mopPath.trackAlpha <a class="header-anchor" href="#path-moppath-trackalpha" aria-label="Permalink to "path.mopPath.trackAlpha""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.4</code></li></ul><p>拖地轨迹透明度。</p><h4 id="path-moppath-trackwidth" tabindex="-1">path.mopPath.trackWidth <a class="header-anchor" href="#path-moppath-trackwidth" aria-label="Permalink to "path.mopPath.trackWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>4</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>拖地轨迹宽度。</p><h2 id="carpet" tabindex="-1">carpet <a class="header-anchor" href="#carpet" aria-label="Permalink to "carpet""></a></h2><p>地毯配置，控制地毯区域的显示效果。</p><h3 id="carpet-src" tabindex="-1">carpet.src <a class="header-anchor" href="#carpet-src" aria-label="Permalink to "carpet.src""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>地毯资源路径</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>强烈建议传入最小重复单元的图片资源以提升性能。</p></div><h3 id="carpet-opacity" tabindex="-1">carpet.opacity <a class="header-anchor" href="#carpet-opacity" aria-label="Permalink to "carpet.opacity""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.5</code></li></ul><p>地毯透明度</p><h3 id="carpet-scale" tabindex="-1">carpet.scale <a class="header-anchor" href="#carpet-scale" aria-label="Permalink to "carpet.scale""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.2</code></li></ul><p>地毯缩放系数</p><h3 id="carpet-material" tabindex="-1">carpet.material <a class="header-anchor" href="#carpet-material" aria-label="Permalink to "carpet.material""></a></h3><ul><li><strong>类型</strong>: <code>{ type: number; src: string; opacity: number; scale: number }[]</code></li><li><strong>默认值</strong>: <code>undefined</code></li></ul><p>地毯材质配置，用于按不同 <code>type</code> 指定不同的材质资源与渲染参数。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>当配置 <code>material</code> 时，优先级高于 <code>carpet.src</code>。</p></div><h2 id="furniture" tabindex="-1">furniture <a class="header-anchor" href="#furniture" aria-label="Permalink to "furniture""></a></h2><p>家具配置，控制地图上家具元素的显示和编辑行为。家具是基于图片的地图元素，支持拖拽、缩放和点击旋转操作。</p><h3 id="furniture-assets" tabindex="-1">furniture.assets <a class="header-anchor" href="#furniture-assets" aria-label="Permalink to "furniture.assets""></a></h3><ul><li><strong>类型</strong>: <code>FurnitureAsset[]</code></li><li><strong>默认值</strong>: <code>[{ type: 1, src: 内置双人床资源, width: 1.8, height: 2.0 }]</code></li></ul><p>家具素材列表。每个素材定义了一种家具类型的图片资源和默认尺寸。</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FurnitureAsset</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
202
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 家具类型编号，匹配 FurnitureParam.furnitureType</span></span>
|
|
203
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> src</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 图片 URL</span></span>
|
|
204
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> width</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 默认宽度（米）</span></span>
|
|
205
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 默认高度（米）</span></span>
|
|
206
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p><code>width</code> 和 <code>height</code> 的单位是米，用于 <code>getFurniturePointsByViewportCenter()</code> 生成初始矩形时确定家具的实际尺寸。SDK 内部会根据地图的 <code>resolution</code> 自动将米转换为像素坐标。</p><p>例如双人床默认 <code>width: 1.8</code>（1.8 米）、<code>height: 2.0</code>（2.0 米）。</p></div><h3 id="furniture-opacity" tabindex="-1">furniture.opacity <a class="header-anchor" href="#furniture-opacity" aria-label="Permalink to "furniture.opacity""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li></ul><p>家具图片的全局透明度 (0-1)。</p><h3 id="furniture-iconwrapperfillcolor" tabindex="-1">furniture.iconWrapperFillColor <a class="header-anchor" href="#furniture-iconwrapperfillcolor" aria-label="Permalink to "furniture.iconWrapperFillColor""></a></h3><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#26a69a'</code></li></ul><p>编辑按钮（删除、旋转、缩放、移动）图标容器的填充颜色。</p><h3 id="furniture-showdeletebutton" tabindex="-1">furniture.showDeleteButton <a class="header-anchor" href="#furniture-showdeletebutton" aria-label="Permalink to "furniture.showDeleteButton""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示家具编辑态的删除按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h3 id="furniture-showrotatebutton" tabindex="-1">furniture.showRotateButton <a class="header-anchor" href="#furniture-showrotatebutton" aria-label="Permalink to "furniture.showRotateButton""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示家具编辑态的旋转按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h3 id="furniture-showscalebutton" tabindex="-1">furniture.showScaleButton <a class="header-anchor" href="#furniture-showscalebutton" aria-label="Permalink to "furniture.showScaleButton""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示家具编辑态的缩放按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h3 id="furniture-showmovebutton" tabindex="-1">furniture.showMoveButton <a class="header-anchor" href="#furniture-showmovebutton" aria-label="Permalink to "furniture.showMoveButton""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示家具编辑态的移动按钮。<strong>关掉它不禁止平移</strong>——家具本体的拖拽走独立通道。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h3 id="furniture-outlineoffset" tabindex="-1">furniture.outlineOffset <a class="header-anchor" href="#furniture-outlineoffset" aria-label="Permalink to "furniture.outlineOffset""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑轮廓相对于家具边界的偏移距离。</p><h3 id="furniture-outlinestrokecolor" tabindex="-1">furniture.outlineStrokeColor <a class="header-anchor" href="#furniture-outlinestrokecolor" aria-label="Permalink to "furniture.outlineStrokeColor""></a></h3><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#26a69a'</code></li></ul><p>编辑轮廓描边颜色。</p><h3 id="furniture-outlinestrokewidth" tabindex="-1">furniture.outlineStrokeWidth <a class="header-anchor" href="#furniture-outlinestrokewidth" aria-label="Permalink to "furniture.outlineStrokeWidth""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1.5</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑轮廓描边宽度。</p><h3 id="furniture-outlinefillcolor" tabindex="-1">furniture.outlineFillColor <a class="header-anchor" href="#furniture-outlinefillcolor" aria-label="Permalink to "furniture.outlineFillColor""></a></h3><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(38, 166, 154, 0.05)'</code></li></ul><p>编辑轮廓填充颜色。</p><h3 id="furniture-outlinedashed" tabindex="-1">furniture.outlineDashed <a class="header-anchor" href="#furniture-outlinedashed" aria-label="Permalink to "furniture.outlineDashed""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>编辑轮廓是否为虚线。</p><h3 id="furniture-outlinedasharray" tabindex="-1">furniture.outlineDashArray <a class="header-anchor" href="#furniture-outlinedasharray" aria-label="Permalink to "furniture.outlineDashArray""></a></h3><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[4, 3]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑轮廓虚线样式 [实线长度, 间隙长度]。</p><h3 id="furniture-showsizetext" tabindex="-1">furniture.showSizeText <a class="header-anchor" href="#furniture-showsizetext" aria-label="Permalink to "furniture.showSizeText""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否在编辑状态下显示家具的尺寸文本。</p><h3 id="furniture-textcolor" tabindex="-1">furniture.textColor <a class="header-anchor" href="#furniture-textcolor" aria-label="Permalink to "furniture.textColor""></a></h3><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#26a69a'</code></li></ul><p>尺寸文本颜色。</p><h3 id="furniture-textposition" tabindex="-1">furniture.textPosition <a class="header-anchor" href="#furniture-textposition" aria-label="Permalink to "furniture.textPosition""></a></h3><ul><li><strong>类型</strong>: <code>'top' | 'right' | 'bottom' | 'left'</code></li><li><strong>默认值</strong>: <code>'bottom'</code></li></ul><p>尺寸文本显示位置。</p><h3 id="furniture-textoffset" tabindex="-1">furniture.textOffset <a class="header-anchor" href="#furniture-textoffset" aria-label="Permalink to "furniture.textOffset""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>8</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>尺寸文本距离轮廓的偏移。</p><h3 id="furniture-minscaleratio" tabindex="-1">furniture.minScaleRatio <a class="header-anchor" href="#furniture-minscaleratio" aria-label="Permalink to "furniture.minScaleRatio""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.5</code></li></ul><p>缩放按钮允许的最小缩放倍数（相对于初始尺寸）。设为 <code>0</code> 表示不限制最小缩放。</p><h3 id="furniture-maxscaleratio" tabindex="-1">furniture.maxScaleRatio <a class="header-anchor" href="#furniture-maxscaleratio" aria-label="Permalink to "furniture.maxScaleRatio""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li></ul><p>缩放按钮允许的最大缩放倍数（相对于初始尺寸）。设为 <code>Infinity</code> 表示不限制最大缩放。</p><h3 id="furniture-rotatedirection" tabindex="-1">furniture.rotateDirection <a class="header-anchor" href="#furniture-rotatedirection" aria-label="Permalink to "furniture.rotateDirection""></a></h3><ul><li><strong>类型</strong>: <code>'cw' | 'ccw'</code></li><li><strong>默认值</strong>: <code>'cw'</code></li></ul><p>点击旋转按钮时的旋转方向。</p><ul><li><code>'cw'</code>：顺时针旋转 90 度</li><li><code>'ccw'</code>：逆时针旋转 90 度</li></ul><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>旋转后，编辑按钮（删除、旋转、缩放、移动）会保持在各自的视觉位置不变，用户可以连续点击旋转按钮。</p></div><h3 id="furniture-lockaspectratio" tabindex="-1">furniture.lockAspectRatio <a class="header-anchor" href="#furniture-lockaspectratio" aria-label="Permalink to "furniture.lockAspectRatio""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>缩放时是否锁定宽高比。启用后，拖拽缩放手柄时宽度和高度将等比例缩放，保持家具原始的宽高比例不变。</p><h2 id="robot" tabindex="-1">robot <a class="header-anchor" href="#robot" aria-label="Permalink to "robot""></a></h2><p>机器人配置，控制机器人图标、动画和预警圈的显示。</p><h3 id="robot-icon" tabindex="-1">robot.icon <a class="header-anchor" href="#robot-icon" aria-label="Permalink to "robot.icon""></a></h3><p>机器人图标配置。</p><h4 id="robot-icon-sizefixed" tabindex="-1">robot.icon.sizeFixed <a class="header-anchor" href="#robot-icon-sizefixed" aria-label="Permalink to "robot.icon.sizeFixed""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>机器人图标尺寸是否固定（不跟随地图缩放变化）。</p><h4 id="robot-icon-width" tabindex="-1">robot.icon.width <a class="header-anchor" href="#robot-icon-width" aria-label="Permalink to "robot.icon.width""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>8</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>机器人图标宽度。</p><h4 id="robot-icon-height" tabindex="-1">robot.icon.height <a class="header-anchor" href="#robot-icon-height" aria-label="Permalink to "robot.icon.height""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>8</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>机器人图标高度。</p><h4 id="robot-icon-src" tabindex="-1">robot.icon.src <a class="header-anchor" href="#robot-icon-src" aria-label="Permalink to "robot.icon.src""></a></h4><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>机器人图标资源路径。</p><h3 id="robot-speed" tabindex="-1">robot.speed <a class="header-anchor" href="#robot-speed" aria-label="Permalink to "robot.speed""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0</code></li><li><strong>单位</strong>: <code>米/秒</code></li></ul><p>机器人移动速度，用于路径动画。</p><p>路径数据变化时，机器人和增量路径会按照 <code>speed</code> 配置的速度进行动画。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p><code>speed</code> 设置为<strong>0</strong>可以关闭路径动画，机器人会直接绘制到目标位置。</p></div><h3 id="robot-rotationcorrection" tabindex="-1">robot.rotationCorrection <a class="header-anchor" href="#robot-rotationcorrection" aria-label="Permalink to "robot.rotationCorrection""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0</code></li><li><strong>单位</strong>: <code>度</code></li></ul><p>机器人图标角度校正，用于校正图标默认朝向。</p><p>0度表示图标朝右，角度值按顺时针方向递增。</p><h3 id="robot-sleepanimation" tabindex="-1">robot.sleepAnimation <a class="header-anchor" href="#robot-sleepanimation" aria-label="Permalink to "robot.sleepAnimation""></a></h3><p>机器人睡眠动画配置。</p><h4 id="robot-sleepanimation-jsonsrc" tabindex="-1">robot.sleepAnimation.jsonSrc <a class="header-anchor" href="#robot-sleepanimation-jsonsrc" aria-label="Permalink to "robot.sleepAnimation.jsonSrc""></a></h4><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>睡眠动画JSON资源路径，使用<a href="https://www.texturepacker.com/" target="_blank" rel="noreferrer"><strong>TexturePacker</strong></a>生成的JSON文件</p><h4 id="robot-sleepanimation-imagesrc" tabindex="-1">robot.sleepAnimation.imageSrc <a class="header-anchor" href="#robot-sleepanimation-imagesrc" aria-label="Permalink to "robot.sleepAnimation.imageSrc""></a></h4><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>睡眠动画图片资源路径，使用<a href="https://www.texturepacker.com/" target="_blank" rel="noreferrer"><strong>TexturePacker</strong></a>生成的图片资源。</p><h4 id="robot-sleepanimation-imagesrc-1" tabindex="-1">robot.sleepAnimation.imageSrc <a class="header-anchor" href="#robot-sleepanimation-imagesrc-1" aria-label="Permalink to "robot.sleepAnimation.imageSrc""></a></h4><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>睡眠动画图片资源路径，使用<a href="https://www.texturepacker.com/" target="_blank" rel="noreferrer"><strong>TexturePacker</strong></a>生成的图片资源。</p><h4 id="robot-sleepanimation-frameprefix" tabindex="-1">robot.sleepAnimation.framePrefix <a class="header-anchor" href="#robot-sleepanimation-frameprefix" aria-label="Permalink to "robot.sleepAnimation.framePrefix""></a></h4><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'sleep_'</code></li></ul><p>动画帧名称前缀。</p><h4 id="robot-sleepanimation-width" tabindex="-1">robot.sleepAnimation.width <a class="header-anchor" href="#robot-sleepanimation-width" aria-label="Permalink to "robot.sleepAnimation.width""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>睡眠动画宽度。</p><h4 id="robot-sleepanimation-height" tabindex="-1">robot.sleepAnimation.height <a class="header-anchor" href="#robot-sleepanimation-height" aria-label="Permalink to "robot.sleepAnimation.height""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>睡眠动画高度。</p><h4 id="robot-sleepanimation-sizefixed" tabindex="-1">robot.sleepAnimation.sizeFixed <a class="header-anchor" href="#robot-sleepanimation-sizefixed" aria-label="Permalink to "robot.sleepAnimation.sizeFixed""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>睡眠动画尺寸是否固定。</p><h4 id="robot-sleepanimation-framecount" tabindex="-1">robot.sleepAnimation.frameCount <a class="header-anchor" href="#robot-sleepanimation-framecount" aria-label="Permalink to "robot.sleepAnimation.frameCount""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>96</code></li></ul><p>动画总帧数。</p><h4 id="robot-sleepanimation-offsetx" tabindex="-1">robot.sleepAnimation.offsetX <a class="header-anchor" href="#robot-sleepanimation-offsetx" aria-label="Permalink to "robot.sleepAnimation.offsetX""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>8</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>睡眠动画X轴偏移。</p><h4 id="robot-sleepanimation-offsety" tabindex="-1">robot.sleepAnimation.offsetY <a class="header-anchor" href="#robot-sleepanimation-offsety" aria-label="Permalink to "robot.sleepAnimation.offsetY""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>-8</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>睡眠动画Y轴偏移。</p><h3 id="robot-ring" tabindex="-1">robot.ring <a class="header-anchor" href="#robot-ring" aria-label="Permalink to "robot.ring""></a></h3><p>机器人预警圈配置。</p><h4 id="robot-ring-size" tabindex="-1">robot.ring.size <a class="header-anchor" href="#robot-ring-size" aria-label="Permalink to "robot.ring.size""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>预警圈大小。</p><h4 id="robot-ring-color" tabindex="-1">robot.ring.color <a class="header-anchor" href="#robot-ring-color" aria-label="Permalink to "robot.ring.color""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(255, 68, 68, 0.2)'</code></li></ul><p>预警圈填充颜色。</p><h4 id="robot-ring-strokewidth" tabindex="-1">robot.ring.strokeWidth <a class="header-anchor" href="#robot-ring-strokewidth" aria-label="Permalink to "robot.ring.strokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>预警圈描边宽度。</p><h4 id="robot-ring-strokecolor" tabindex="-1">robot.ring.strokeColor <a class="header-anchor" href="#robot-ring-strokecolor" aria-label="Permalink to "robot.ring.strokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>预警圈描边颜色。</p><h4 id="robot-ring-strokedashed" tabindex="-1">robot.ring.strokeDashed <a class="header-anchor" href="#robot-ring-strokedashed" aria-label="Permalink to "robot.ring.strokeDashed""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>预警圈描边是否为虚线。</p><h4 id="robot-ring-strokedasharray" tabindex="-1">robot.ring.strokeDashArray <a class="header-anchor" href="#robot-ring-strokedasharray" aria-label="Permalink to "robot.ring.strokeDashArray""></a></h4><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[4, 4]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>预警圈虚线样式 [实线长度, 间隙长度]。</p><h3 id="robot-pulsecircle" tabindex="-1">robot.pulseCircle <a class="header-anchor" href="#robot-pulsecircle" aria-label="Permalink to "robot.pulseCircle""></a></h3><p>机器人脉冲圈配置，控制呼吸动画效果。</p><h4 id="robot-pulsecircle-size" tabindex="-1">robot.pulseCircle.size <a class="header-anchor" href="#robot-pulsecircle-size" aria-label="Permalink to "robot.pulseCircle.size""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>12</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>脉冲圈的大小（直径）。</p><h4 id="robot-pulsecircle-color" tabindex="-1">robot.pulseCircle.color <a class="header-anchor" href="#robot-pulsecircle-color" aria-label="Permalink to "robot.pulseCircle.color""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#4cd964'</code></li></ul><p>脉冲圈填充颜色。</p><h4 id="robot-pulsecircle-strokewidth" tabindex="-1">robot.pulseCircle.strokeWidth <a class="header-anchor" href="#robot-pulsecircle-strokewidth" aria-label="Permalink to "robot.pulseCircle.strokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>脉冲圈描边宽度。</p><h4 id="robot-pulsecircle-strokecolor" tabindex="-1">robot.pulseCircle.strokeColor <a class="header-anchor" href="#robot-pulsecircle-strokecolor" aria-label="Permalink to "robot.pulseCircle.strokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>脉冲圈描边颜色。</p><h4 id="robot-pulsecircle-duration" tabindex="-1">robot.pulseCircle.duration <a class="header-anchor" href="#robot-pulsecircle-duration" aria-label="Permalink to "robot.pulseCircle.duration""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1000</code></li><li><strong>单位</strong>: <code>毫秒</code></li></ul><p>脉冲圈呼吸动画的持续时间（一个完整的呼吸周期）。</p><h4 id="robot-pulsecircle-sizefixed" tabindex="-1">robot.pulseCircle.sizeFixed <a class="header-anchor" href="#robot-pulsecircle-sizefixed" aria-label="Permalink to "robot.pulseCircle.sizeFixed""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>脉冲圈尺寸是否固定（不跟随地图缩放变化）。</p><h4 id="robot-pulsecircle-minscale" tabindex="-1">robot.pulseCircle.minScale <a class="header-anchor" href="#robot-pulsecircle-minscale" aria-label="Permalink to "robot.pulseCircle.minScale""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.5</code></li></ul><p>呼吸动画的最小缩放比例。</p><h4 id="robot-pulsecircle-maxscale" tabindex="-1">robot.pulseCircle.maxScale <a class="header-anchor" href="#robot-pulsecircle-maxscale" aria-label="Permalink to "robot.pulseCircle.maxScale""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li></ul><p>呼吸动画的最大缩放比例。</p><h4 id="robot-pulsecircle-minalpha" tabindex="-1">robot.pulseCircle.minAlpha <a class="header-anchor" href="#robot-pulsecircle-minalpha" aria-label="Permalink to "robot.pulseCircle.minAlpha""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.5</code></li></ul><p>呼吸动画的最小透明度（0-1 之间）。</p><h4 id="robot-pulsecircle-maxalpha" tabindex="-1">robot.pulseCircle.maxAlpha <a class="header-anchor" href="#robot-pulsecircle-maxalpha" aria-label="Permalink to "robot.pulseCircle.maxAlpha""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li></ul><p>呼吸动画的最大透明度（0-1 之间）。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>通过调整 <code>minScale/maxScale</code> 和 <code>minAlpha/maxAlpha</code> 可以自定义呼吸效果的幅度和透明度变化。 例如，更大的缩放范围（如 0.4 到 1.2）会产生更明显的呼吸效果。</p></div><h2 id="chargingstation" tabindex="-1">chargingStation <a class="header-anchor" href="#chargingstation" aria-label="Permalink to "chargingStation""></a></h2><p>充电桩配置，控制充电桩图标和预警圈的显示。</p><h3 id="chargingstation-icon" tabindex="-1">chargingStation.icon <a class="header-anchor" href="#chargingstation-icon" aria-label="Permalink to "chargingStation.icon""></a></h3><p>充电桩图标配置。</p><h4 id="chargingstation-icon-sizefixed" tabindex="-1">chargingStation.icon.sizeFixed <a class="header-anchor" href="#chargingstation-icon-sizefixed" aria-label="Permalink to "chargingStation.icon.sizeFixed""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>充电桩图标尺寸是否固定。</p><h4 id="chargingstation-icon-width" tabindex="-1">chargingStation.icon.width <a class="header-anchor" href="#chargingstation-icon-width" aria-label="Permalink to "chargingStation.icon.width""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>8</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>充电桩图标宽度。</p><h4 id="chargingstation-icon-height" tabindex="-1">chargingStation.icon.height <a class="header-anchor" href="#chargingstation-icon-height" aria-label="Permalink to "chargingStation.icon.height""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>8</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>充电桩图标高度。</p><h4 id="chargingstation-icon-src" tabindex="-1">chargingStation.icon.src <a class="header-anchor" href="#chargingstation-icon-src" aria-label="Permalink to "chargingStation.icon.src""></a></h4><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>充电桩图标资源路径。</p><h3 id="chargingstation-rotationcorrection" tabindex="-1">chargingStation.rotationCorrection <a class="header-anchor" href="#chargingstation-rotationcorrection" aria-label="Permalink to "chargingStation.rotationCorrection""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0</code></li><li><strong>单位</strong>: <code>度</code></li></ul><p>充电桩图标角度校正，用于校正图标默认朝向。</p><p>0度表示图标朝右，角度值按顺时针方向递增。</p><h3 id="chargingstation-ring" tabindex="-1">chargingStation.ring <a class="header-anchor" href="#chargingstation-ring" aria-label="Permalink to "chargingStation.ring""></a></h3><p>充电桩预警圈配置。</p><h4 id="chargingstation-ring-size" tabindex="-1">chargingStation.ring.size <a class="header-anchor" href="#chargingstation-ring-size" aria-label="Permalink to "chargingStation.ring.size""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>预警圈大小。</p><h4 id="chargingstation-ring-color" tabindex="-1">chargingStation.ring.color <a class="header-anchor" href="#chargingstation-ring-color" aria-label="Permalink to "chargingStation.ring.color""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(255, 68, 68, 0.2)'</code></li></ul><p>预警圈填充颜色。</p><h4 id="chargingstation-ring-strokewidth" tabindex="-1">chargingStation.ring.strokeWidth <a class="header-anchor" href="#chargingstation-ring-strokewidth" aria-label="Permalink to "chargingStation.ring.strokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>预警圈描边宽度。</p><h4 id="chargingstation-ring-strokecolor" tabindex="-1">chargingStation.ring.strokeColor <a class="header-anchor" href="#chargingstation-ring-strokecolor" aria-label="Permalink to "chargingStation.ring.strokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>预警圈描边颜色。</p><h4 id="chargingstation-ring-strokedashed" tabindex="-1">chargingStation.ring.strokeDashed <a class="header-anchor" href="#chargingstation-ring-strokedashed" aria-label="Permalink to "chargingStation.ring.strokeDashed""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>预警圈描边是否为虚线。</p><h4 id="chargingstation-ring-strokedasharray" tabindex="-1">chargingStation.ring.strokeDashArray <a class="header-anchor" href="#chargingstation-ring-strokedasharray" aria-label="Permalink to "chargingStation.ring.strokeDashArray""></a></h4><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[4, 4]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>预警圈虚线样式 [实线长度, 间隙长度]。</p><h2 id="controls" tabindex="-1">controls <a class="header-anchor" href="#controls" aria-label="Permalink to "controls""></a></h2><p>控制元素配置，包括各种编辑工具的样式和行为设置。</p><h3 id="edit-button-visibility" tabindex="-1">编辑按钮的可选显示 <a class="header-anchor" href="#edit-button-visibility" aria-label="Permalink to "编辑按钮的可选显示 {#edit-button-visibility}""></a></h3><p>禁扫区 / 禁拖区 / 清扫区 / 地毯 / 虚拟墙 / 门槛 / 坡道 / 家具（以及 <a href="#customzonetypes"><code>customZoneTypes</code></a> 声明的自定义区域类型）都支持逐个关掉编辑态四周的控制按钮，缺省全部显示：</p><table tabindex="0"><thead><tr><th style="text-align:left;">配置</th><th style="text-align:left;">关掉的按钮</th></tr></thead><tbody><tr><td style="text-align:left;"><code>showDeleteButton</code></td><td style="text-align:left;">删除</td></tr><tr><td style="text-align:left;"><code>showRotateButton</code></td><td style="text-align:left;">旋转</td></tr><tr><td style="text-align:left;"><code>showScaleButton</code></td><td style="text-align:left;">缩放</td></tr><tr><td style="text-align:left;"><code>showMoveButton</code></td><td style="text-align:left;">移动</td></tr></tbody></table><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
207
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> controls: {</span></span>
|
|
208
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 禁扫区只保留删除按钮</span></span>
|
|
209
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> forbiddenSweepZone: {</span></span>
|
|
210
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> showRotateButton: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
211
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> showScaleButton: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
212
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> showMoveButton: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
213
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
214
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
215
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">语义是「显不显示」，不是「能不能做」</p><p>这四个开关只控制按钮的可见性。按钮藏起来后它自己那条操作通道随之失效（隐藏的按钮不参与命中测试），但<strong>元素本体的手势不受影响</strong>：</p><ul><li><strong><code>showMoveButton: false</code> 不禁止平移。</strong> 区域、地毯、门槛、坡道的拖拽走填充区域，家具走图片本体，虚拟墙走线段本体——都是独立于移动按钮的通道，按钮藏了照样能拖动元素。移动按钮只是一个偏移在外、连着一根延长线的把手；关掉它，延长线一并消失。</li><li>四个全关时，虚线外轮廓与尺寸文本<strong>照常显示</strong>（它们是独立开关），元素看得出正处于编辑态，只是四周没有按钮。</li></ul></div><div class="tip custom-block"><p class="custom-block-title">虚拟墙的两处不同</p><ul><li><strong>虚拟墙没有独立的旋转按钮</strong>，因此不支持 <code>showRotateButton</code>。它的缩放按钮是「缩放 + 旋转」二合一（拖动时同时改变长度和朝向），<code>showScaleButton: false</code> 会把这两个能力一起关掉。</li><li>虚拟墙旋转时<strong>绕线段的固定起点</strong>转，四边形家族（区域 / 地毯 / 门槛 / 坡道 / 家具）绕图形中心转。</li></ul></div><div class="tip custom-block"><p class="custom-block-title">地毯的辅助缩放按钮</p><p>地毯在 <code>scaleMode: 'ratioLocked'</code> 下会额外出现横向 / 纵向两个小的辅助缩放按钮。它们属于缩放通道，随 <code>showScaleButton: false</code> 一并隐藏。</p></div><p>配置在元素<strong>进入编辑态时</strong>读取，因此运行时用 <code>updateConfig</code> 改这几个开关无需重建元素：区域与地毯会按现有机制重建，门槛 / 坡道 / 家具 / 虚拟墙在下一次进入编辑态时按新配置显示。</p><h3 id="element-disabled-style" tabindex="-1">元素禁用样式（disabled 块） <a class="header-anchor" href="#element-disabled-style" aria-label="Permalink to "元素禁用样式（disabled 块） {#element-disabled-style}""></a></h3><p>区域类元素（禁扫区 / 禁拖区 / 清扫区 / 自定义区域 / 地毯 / 虚拟墙 / 门槛 / 坡道 / 家具）被列入 <a href="/reference/runtime.html#元素禁用（disabled-ids）"><code>runtime.disabled*Ids</code></a> 后按<strong>空闲态渲染并叠加一组样式差量</strong>：</p><ul><li><strong>全局兜底</strong> <a href="#controls-disabledstyle"><code>controls.disabledStyle</code></a> 只有 <code>opacity</code> 一项——它是唯一对所有元素类型都成立的视觉概念。</li><li><strong>类型级覆盖</strong>：各元素配置下的可选 <code>disabled</code> 块，白名单只收该类型空闲态真正渲染的主体绘制字段（编辑态才画的 <code>outline*</code> / 按钮 / 尺寸文本不在其中——禁用态按空闲切片显示，覆盖它们不产生任何效果）：</li></ul><table tabindex="0"><thead><tr><th style="text-align:left;">元素</th><th style="text-align:left;"><code>disabled</code> 块可覆盖</th></tr></thead><tbody><tr><td style="text-align:left;">禁扫区 / 禁拖区 / 清扫区 / 自定义区域</td><td style="text-align:left;"><code>opacity</code>、<code>fillColor</code>、<code>strokeColor</code>、<code>strokeWidth</code>、<code>isDashed</code>、<code>dashArray</code>（虚线两键覆盖内框，缺省回退 <code>normal</code> 块）</td></tr><tr><td style="text-align:left;">虚拟墙</td><td style="text-align:left;"><code>opacity</code>、<code>lineColor</code>、<code>lineWidth</code>、<code>isDashed</code>、<code>dashArray</code>（虚线两键覆盖墙体线段，缺省回退 <code>normal</code> 块）</td></tr><tr><td style="text-align:left;">门槛</td><td style="text-align:left;"><code>opacity</code>、<code>passable</code> / <code>impassable</code>（各自部分覆盖 <code>ThresholdStyle</code>）</td></tr><tr><td style="text-align:left;">坡道</td><td style="text-align:left;"><code>opacity</code>、<code>fillColor</code>、<code>strokeColor</code>、<code>strokeWidth</code>、<code>arrowColor</code></td></tr><tr><td style="text-align:left;">地毯</td><td style="text-align:left;"><code>opacity</code>、<code>fillColor</code></td></tr><tr><td style="text-align:left;">家具</td><td style="text-align:left;"><code>opacity</code></td></tr></tbody></table><p><code>opacity</code> 叠加在元素根容器上，按 PIXI alpha 级联语义与子对象自身透明度<strong>相乘</strong>（家具贴图保留自身 <code>furniture.opacity</code>，最终透明度为两者之积）。</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
216
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> controls: {</span></span>
|
|
217
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 全局：所有禁用元素整体降到 40% 透明度（即出厂默认）</span></span>
|
|
218
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> disabledStyle: { opacity: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
219
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 类型级：禁用的禁扫区在变淡之外还要变灰、改虚线</span></span>
|
|
220
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> forbiddenSweepZone: {</span></span>
|
|
221
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> disabled: {</span></span>
|
|
222
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fillColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'rgba(153, 153, 153, 0.1)'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
223
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> strokeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#999999'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
224
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> isDashed: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
225
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dashArray: [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
226
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
227
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
228
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
229
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="controls-disabledstyle" tabindex="-1">controls.disabledStyle <a class="header-anchor" href="#controls-disabledstyle" aria-label="Permalink to "controls.disabledStyle""></a></h3><ul><li><strong>类型</strong>: <code>{ opacity: number }</code></li><li><strong>默认值</strong>: <code>{ opacity: 0.4 }</code></li></ul><p>禁用态全局兜底样式。只管「淡到什么程度」；要改颜色或虚线去类型级的 <code>disabled</code> 块（见<a href="#element-disabled-style">上一节</a>）。</p><h3 id="controls-iconwrapperwidth" tabindex="-1">controls.iconWrapperWidth <a class="header-anchor" href="#controls-iconwrapperwidth" aria-label="Permalink to "controls.iconWrapperWidth""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>24</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>操作按钮图标容器宽度</p><h3 id="controls-iconwrapperheight" tabindex="-1">controls.iconWrapperHeight <a class="header-anchor" href="#controls-iconwrapperheight" aria-label="Permalink to "controls.iconWrapperHeight""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>24</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>操作按钮图标容器高度</p><h3 id="controls-iconwrapperborderradius" tabindex="-1">controls.iconWrapperBorderRadius <a class="header-anchor" href="#controls-iconwrapperborderradius" aria-label="Permalink to "controls.iconWrapperBorderRadius""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>操作按钮图标容器边框圆角</p><h3 id="controls-iconwidth" tabindex="-1">controls.iconWidth <a class="header-anchor" href="#controls-iconwidth" aria-label="Permalink to "controls.iconWidth""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>12</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>操作按钮图标宽度</p><h3 id="controls-iconheight" tabindex="-1">controls.iconHeight <a class="header-anchor" href="#controls-iconheight" aria-label="Permalink to "controls.iconHeight""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>12</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>操作按钮图标高度</p><h3 id="controls-deleteiconsrc" tabindex="-1">controls.deleteIconSrc <a class="header-anchor" href="#controls-deleteiconsrc" aria-label="Permalink to "controls.deleteIconSrc""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>删除按钮图标资源路径</p><h3 id="controls-rotateiconsrc" tabindex="-1">controls.rotateIconSrc <a class="header-anchor" href="#controls-rotateiconsrc" aria-label="Permalink to "controls.rotateIconSrc""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>旋转按钮图标资源路径</p><h3 id="controls-scaleiconsrc" tabindex="-1">controls.scaleIconSrc <a class="header-anchor" href="#controls-scaleiconsrc" aria-label="Permalink to "controls.scaleIconSrc""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>缩放按钮图标资源路径</p><h3 id="controls-moveiconsrc" tabindex="-1">controls.moveIconSrc <a class="header-anchor" href="#controls-moveiconsrc" aria-label="Permalink to "controls.moveIconSrc""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>移动按钮图标资源路径</p><h3 id="controls-horizontalscaleiconsrc" tabindex="-1">controls.horizontalScaleIconSrc <a class="header-anchor" href="#controls-horizontalscaleiconsrc" aria-label="Permalink to "controls.horizontalScaleIconSrc""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>横向缩放按钮图标资源路径。</p><h3 id="controls-verticalscaleiconsrc" tabindex="-1">controls.verticalScaleIconSrc <a class="header-anchor" href="#controls-verticalscaleiconsrc" aria-label="Permalink to "controls.verticalScaleIconSrc""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>纵向缩放按钮图标资源路径。</p><h3 id="controls-movebuttonoffset" tabindex="-1">controls.moveButtonOffset <a class="header-anchor" href="#controls-movebuttonoffset" aria-label="Permalink to "controls.moveButtonOffset""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>30</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>移动按钮偏移距离</p><h3 id="controls-textfontsize" tabindex="-1">controls.textFontSize <a class="header-anchor" href="#controls-textfontsize" aria-label="Permalink to "controls.textFontSize""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>12</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>尺寸标签文本字体大小</p><h3 id="controls-textfontfamily" tabindex="-1">controls.textFontFamily <a class="header-anchor" href="#controls-textfontfamily" aria-label="Permalink to "controls.textFontFamily""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'system-ui, -apple-system, sans-serif'</code></li></ul><p>尺寸标签文本字体名称</p><h3 id="controls-textfontweight" tabindex="-1">controls.textFontWeight <a class="header-anchor" href="#controls-textfontweight" aria-label="Permalink to "controls.textFontWeight""></a></h3><ul><li><strong>类型</strong>: <code>TextStyleFontWeight</code></li><li><strong>默认值</strong>: <code>'400'</code></li></ul><p>尺寸标签文本字体粗细</p><h3 id="controls-renderorder" tabindex="-1">controls.renderOrder <a class="header-anchor" href="#controls-renderorder" aria-label="Permalink to "controls.renderOrder""></a></h3><ul><li><strong>类型</strong>: <code>ControlRenderItem[]</code></li><li><strong>默认值</strong>: <code>['forbiddenSweepZone', 'forbiddenMopZone', 'cleanZone', 'virtualWall', 'spot', 'wayPoint', 'divider']</code></li></ul><p>控制层内元素渲染顺序配置，数组从下到上生效（后面的元素显示在更上层）。</p><p><strong>可选值：</strong></p><ul><li><code>'forbiddenSweepZone'</code></li><li><code>'forbiddenMopZone'</code></li><li><code>'cleanZone'</code></li><li><code>'virtualWall'</code></li><li><code>'spot'</code></li><li><code>'wayPoint'</code></li><li><code>'divider'</code></li><li>任意通过 <a href="#customzonetypes"><code>customZoneTypes</code></a> 声明的自定义区域类型名</li></ul><p>配置说明：</p><ul><li>你可以通过调整数组顺序来控制不同控制元素的覆盖关系。</li><li>如果配置中缺少某些内置元素，SDK 会自动按默认顺序补齐（自定义类型不会被自动补齐）。</li><li>如果配置中存在重复元素，SDK 仅保留首次出现的位置。</li><li>门槛（threshold）与坡道（ramp）<strong>不在</strong>可排序元素之列：它们是不透明的地面元素，画在路径 / 机器人之下的地面标记层，层内顺序固定（坡道在下、门槛在上），不参与控制层排序。</li><li>未写入 <code>renderOrder</code> 的自定义类型会渲染在所有已声明元素之下，且它们之间的相对层级由创建顺序决定；建议把所有需要严格排序的自定义类型都显式写入 <code>renderOrder</code>。</li></ul><p>示例：让禁扫区域显示在禁拖区域上方</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapApplication</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
|
230
|
+
<span class="line"></span>
|
|
231
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">initialize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
232
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config: {</span></span>
|
|
233
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> controls: {</span></span>
|
|
234
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> renderOrder: [</span></span>
|
|
235
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'forbiddenMopZone'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
236
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'forbiddenSweepZone'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
237
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'cleanZone'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
238
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'virtualWall'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
239
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'spot'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
240
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'wayPoint'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
241
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'divider'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
242
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
|
243
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
244
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
245
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h3 id="controls-forbiddensweepzone" tabindex="-1">controls.forbiddenSweepZone <a class="header-anchor" href="#controls-forbiddensweepzone" aria-label="Permalink to "controls.forbiddenSweepZone""></a></h3><p>禁扫区域配置。</p><h4 id="controls-forbiddensweepzone-minsize" tabindex="-1">controls.forbiddenSweepZone.minSize <a class="header-anchor" href="#controls-forbiddensweepzone-minsize" aria-label="Permalink to "controls.forbiddenSweepZone.minSize""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>禁扫区域最小尺寸</p><h4 id="controls-forbiddensweepzone-maxsize" tabindex="-1">controls.forbiddenSweepZone.maxSize <a class="header-anchor" href="#controls-forbiddensweepzone-maxsize" aria-label="Permalink to "controls.forbiddenSweepZone.maxSize""></a></h4><ul><li><strong>类型</strong>: <code>number | undefined</code></li><li><strong>默认值</strong>: <code>undefined</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>禁扫区域最大尺寸（可选）。缺省、NaN、非正数或 ≤ minSize 时视为不限制，并会在控制台输出一次警告。</p><h4 id="controls-forbiddensweepzone-iconwrapperfillcolor" tabindex="-1">controls.forbiddenSweepZone.iconWrapperFillColor <a class="header-anchor" href="#controls-forbiddensweepzone-iconwrapperfillcolor" aria-label="Permalink to "controls.forbiddenSweepZone.iconWrapperFillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ff4444'</code></li></ul><p>图标容器填充颜色</p><h4 id="controls-forbiddensweepzone-strokecolor" tabindex="-1">controls.forbiddenSweepZone.strokeColor <a class="header-anchor" href="#controls-forbiddensweepzone-strokecolor" aria-label="Permalink to "controls.forbiddenSweepZone.strokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ff4444'</code></li></ul><p>禁扫区域描边颜色</p><h4 id="controls-forbiddensweepzone-strokewidth" tabindex="-1">controls.forbiddenSweepZone.strokeWidth <a class="header-anchor" href="#controls-forbiddensweepzone-strokewidth" aria-label="Permalink to "controls.forbiddenSweepZone.strokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>禁扫区域描边宽度</p><h4 id="controls-forbiddensweepzone-fillcolor" tabindex="-1">controls.forbiddenSweepZone.fillColor <a class="header-anchor" href="#controls-forbiddensweepzone-fillcolor" aria-label="Permalink to "controls.forbiddenSweepZone.fillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(255, 68, 68, 0.1)'</code></li></ul><p>禁扫区域填充颜色</p><h4 id="controls-forbiddensweepzone-outlineoffset" tabindex="-1">controls.forbiddenSweepZone.outlineOffset <a class="header-anchor" href="#controls-forbiddensweepzone-outlineoffset" aria-label="Permalink to "controls.forbiddenSweepZone.outlineOffset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>禁扫区域编辑轮廓偏移</p><h4 id="controls-forbiddensweepzone-outlinestrokecolor" tabindex="-1">controls.forbiddenSweepZone.outlineStrokeColor <a class="header-anchor" href="#controls-forbiddensweepzone-outlinestrokecolor" aria-label="Permalink to "controls.forbiddenSweepZone.outlineStrokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ff4444'</code></li></ul><p>禁扫区域编辑轮廓描边颜色</p><h4 id="controls-forbiddensweepzone-outlinestrokewidth" tabindex="-1">controls.forbiddenSweepZone.outlineStrokeWidth <a class="header-anchor" href="#controls-forbiddensweepzone-outlinestrokewidth" aria-label="Permalink to "controls.forbiddenSweepZone.outlineStrokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>禁扫区域编辑轮廓描边宽度</p><h4 id="controls-forbiddensweepzone-outlinedashed" tabindex="-1">controls.forbiddenSweepZone.outlineDashed <a class="header-anchor" href="#controls-forbiddensweepzone-outlinedashed" aria-label="Permalink to "controls.forbiddenSweepZone.outlineDashed""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>禁扫区域编辑轮廓是否为虚线</p><h4 id="controls-forbiddensweepzone-outlinedasharray" tabindex="-1">controls.forbiddenSweepZone.outlineDashArray <a class="header-anchor" href="#controls-forbiddensweepzone-outlinedasharray" aria-label="Permalink to "controls.forbiddenSweepZone.outlineDashArray""></a></h4><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[4, 3]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>禁扫区域编辑轮廓虚线样式</p><h4 id="controls-forbiddensweepzone-outlinefillcolor" tabindex="-1">controls.forbiddenSweepZone.outlineFillColor <a class="header-anchor" href="#controls-forbiddensweepzone-outlinefillcolor" aria-label="Permalink to "controls.forbiddenSweepZone.outlineFillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(255, 68, 68, 0.05)'</code></li></ul><p>禁扫区域编辑轮廓填充颜色</p><h4 id="controls-forbiddensweepzone-showrotatebutton" tabindex="-1">controls.forbiddenSweepZone.showRotateButton <a class="header-anchor" href="#controls-forbiddensweepzone-showrotatebutton" aria-label="Permalink to "controls.forbiddenSweepZone.showRotateButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示禁扫区域编辑态的旋转按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-forbiddensweepzone-showdeletebutton" tabindex="-1">controls.forbiddenSweepZone.showDeleteButton <a class="header-anchor" href="#controls-forbiddensweepzone-showdeletebutton" aria-label="Permalink to "controls.forbiddenSweepZone.showDeleteButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示禁扫区域编辑态的删除按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-forbiddensweepzone-showscalebutton" tabindex="-1">controls.forbiddenSweepZone.showScaleButton <a class="header-anchor" href="#controls-forbiddensweepzone-showscalebutton" aria-label="Permalink to "controls.forbiddenSweepZone.showScaleButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示禁扫区域编辑态的缩放按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-forbiddensweepzone-showmovebutton" tabindex="-1">controls.forbiddenSweepZone.showMoveButton <a class="header-anchor" href="#controls-forbiddensweepzone-showmovebutton" aria-label="Permalink to "controls.forbiddenSweepZone.showMoveButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示禁扫区域编辑态的移动按钮。<strong>关掉它不禁止平移</strong>——禁扫区域本体的拖拽走独立通道。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-forbiddensweepzone-textcolor" tabindex="-1">controls.forbiddenSweepZone.textColor <a class="header-anchor" href="#controls-forbiddensweepzone-textcolor" aria-label="Permalink to "controls.forbiddenSweepZone.textColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ff4444'</code></li></ul><p>禁扫区域尺寸标签文本颜色</p><h4 id="controls-forbiddensweepzone-textposition" tabindex="-1">controls.forbiddenSweepZone.textPosition <a class="header-anchor" href="#controls-forbiddensweepzone-textposition" aria-label="Permalink to "controls.forbiddenSweepZone.textPosition""></a></h4><ul><li><strong>类型</strong>: <code>'top' | 'right' | 'bottom' | 'left'</code></li><li><strong>默认值</strong>: <code>'bottom'</code></li></ul><p>禁扫区域尺寸标签文本位置</p><h4 id="controls-forbiddensweepzone-textoffset" tabindex="-1">controls.forbiddenSweepZone.textOffset <a class="header-anchor" href="#controls-forbiddensweepzone-textoffset" aria-label="Permalink to "controls.forbiddenSweepZone.textOffset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>8</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>禁扫区域尺寸标签文本偏移</p><h4 id="controls-forbiddensweepzone-editing" tabindex="-1">controls.forbiddenSweepZone.editing <a class="header-anchor" href="#controls-forbiddensweepzone-editing" aria-label="Permalink to "controls.forbiddenSweepZone.editing""></a></h4><p>区域框编辑模式样式配置。</p><h5 id="controls-forbiddensweepzone-editing-isdashed" tabindex="-1">controls.forbiddenSweepZone.editing.isDashed <a class="header-anchor" href="#controls-forbiddensweepzone-editing-isdashed" aria-label="Permalink to "controls.forbiddenSweepZone.editing.isDashed""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>编辑模式下禁扫区域框是否显示为虚线</p><h5 id="controls-forbiddensweepzone-editing-dasharray" tabindex="-1">controls.forbiddenSweepZone.editing.dashArray <a class="header-anchor" href="#controls-forbiddensweepzone-editing-dasharray" aria-label="Permalink to "controls.forbiddenSweepZone.editing.dashArray""></a></h5><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[0, 0]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑模式下禁扫区域框虚线样式</p><h4 id="controls-forbiddensweepzone-normal" tabindex="-1">controls.forbiddenSweepZone.normal <a class="header-anchor" href="#controls-forbiddensweepzone-normal" aria-label="Permalink to "controls.forbiddenSweepZone.normal""></a></h4><p>区域框普通模式样式配置。</p><h5 id="controls-forbiddensweepzone-normal-isdashed" tabindex="-1">controls.forbiddenSweepZone.normal.isDashed <a class="header-anchor" href="#controls-forbiddensweepzone-normal-isdashed" aria-label="Permalink to "controls.forbiddenSweepZone.normal.isDashed""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>普通模式下禁扫区域框是否显示为虚线</p><h5 id="controls-forbiddensweepzone-normal-dasharray" tabindex="-1">controls.forbiddenSweepZone.normal.dashArray <a class="header-anchor" href="#controls-forbiddensweepzone-normal-dasharray" aria-label="Permalink to "controls.forbiddenSweepZone.normal.dashArray""></a></h5><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[0, 0]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>普通模式下禁扫区域框虚线样式</p><h4 id="controls-forbiddensweepzone-centericon" tabindex="-1">controls.forbiddenSweepZone.centerIcon <a class="header-anchor" href="#controls-forbiddensweepzone-centericon" aria-label="Permalink to "controls.forbiddenSweepZone.centerIcon""></a></h4><ul><li><strong>类型</strong>: <code>ZoneCenterIconConfig | undefined</code></li><li><strong>默认值</strong>: <code>undefined</code></li></ul><p>禁扫区域框中心图标。缺省时区域不创建任何图标对象。</p><p>图标位置实时取四角点的中心，随拖拽、旋转、缩放同步；地图整体旋转时图标反向旋转保持水平；图标不参与命中测试，不会挡住区域的拖拽与点击。</p><p>配置为<strong>类型级</strong>粒度——同一区域类型的所有实例共用一个图标。</p><table tabindex="0"><thead><tr><th style="text-align:left;">字段</th><th style="text-align:left;">类型</th><th style="text-align:left;">默认值</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;"><code>src</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">必填</td><td style="text-align:left;">图标资源路径</td></tr><tr><td style="text-align:left;"><code>size</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;"><code>24</code></td><td style="text-align:left;">图标边长；<code>sizeFixed</code> 为 <code>true</code> 时是屏幕像素，否则是地图像素</td></tr><tr><td style="text-align:left;"><code>sizeFixed</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;"><code>true</code></td><td style="text-align:left;">尺寸是否固定（不跟随地图缩放）</td></tr><tr><td style="text-align:left;"><code>anchor</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;"><code>0.5</code></td><td style="text-align:left;">锚点（x/y 同值）：<code>0</code> 左上、<code>0.5</code> 居中、<code>1</code> 右下</td></tr><tr><td style="text-align:left;"><code>opacity</code></td><td style="text-align:left;"><code>number</code></td><td style="text-align:left;"><code>1</code></td><td style="text-align:left;">不透明度</td></tr><tr><td style="text-align:left;"><code>showInEditing</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;"><code>true</code></td><td style="text-align:left;">编辑态是否显示</td></tr><tr><td style="text-align:left;"><code>showInNormal</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;"><code>true</code></td><td style="text-align:left;">普通态是否显示</td></tr><tr><td style="text-align:left;"><code>showInDisabled</code></td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;">回退 <code>showInNormal</code></td><td style="text-align:left;">禁用态是否显示。禁用元素整体变淡时，一枚淡化的类型图标可能被读成「这条规则失效了」，语义含混时用它藏掉</td></tr></tbody></table><p>图标边长会按区域框短边的 80% 封顶，因此框缩到 <code>minSize</code> 时图标随框变小，不会溢出框外。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">initialize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
246
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config: {</span></span>
|
|
247
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> controls: {</span></span>
|
|
248
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> forbiddenSweepZone: {</span></span>
|
|
249
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> centerIcon: {</span></span>
|
|
250
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> src: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'https://example.com/no-sweep.png'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
251
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> size: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">28</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
252
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
253
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
254
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
255
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
256
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h3 id="controls-forbiddenmopzone" tabindex="-1">controls.forbiddenMopZone <a class="header-anchor" href="#controls-forbiddenmopzone" aria-label="Permalink to "controls.forbiddenMopZone""></a></h3><p>禁拖区域配置。</p><h4 id="controls-forbiddenmopzone-minsize" tabindex="-1">controls.forbiddenMopZone.minSize <a class="header-anchor" href="#controls-forbiddenmopzone-minsize" aria-label="Permalink to "controls.forbiddenMopZone.minSize""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>禁拖区域最小尺寸</p><h4 id="controls-forbiddenmopzone-maxsize" tabindex="-1">controls.forbiddenMopZone.maxSize <a class="header-anchor" href="#controls-forbiddenmopzone-maxsize" aria-label="Permalink to "controls.forbiddenMopZone.maxSize""></a></h4><ul><li><strong>类型</strong>: <code>number | undefined</code></li><li><strong>默认值</strong>: <code>undefined</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>禁拖区域最大尺寸（可选）。缺省、NaN、非正数或 ≤ minSize 时视为不限制，并会在控制台输出一次警告。</p><h4 id="controls-forbiddenmopzone-iconwrapperfillcolor" tabindex="-1">controls.forbiddenMopZone.iconWrapperFillColor <a class="header-anchor" href="#controls-forbiddenmopzone-iconwrapperfillcolor" aria-label="Permalink to "controls.forbiddenMopZone.iconWrapperFillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#fe8a07'</code></li></ul><p>图标容器填充颜色</p><h4 id="controls-forbiddenmopzone-strokecolor" tabindex="-1">controls.forbiddenMopZone.strokeColor <a class="header-anchor" href="#controls-forbiddenmopzone-strokecolor" aria-label="Permalink to "controls.forbiddenMopZone.strokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#fe8a07'</code></li></ul><p>禁拖区域描边颜色</p><h4 id="controls-forbiddenmopzone-strokewidth" tabindex="-1">controls.forbiddenMopZone.strokeWidth <a class="header-anchor" href="#controls-forbiddenmopzone-strokewidth" aria-label="Permalink to "controls.forbiddenMopZone.strokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>禁拖区域描边宽度</p><h4 id="controls-forbiddenmopzone-fillcolor" tabindex="-1">controls.forbiddenMopZone.fillColor <a class="header-anchor" href="#controls-forbiddenmopzone-fillcolor" aria-label="Permalink to "controls.forbiddenMopZone.fillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(254, 138, 7, 0.1)'</code></li></ul><p>禁拖区域填充颜色</p><h4 id="controls-forbiddenmopzone-outlineoffset" tabindex="-1">controls.forbiddenMopZone.outlineOffset <a class="header-anchor" href="#controls-forbiddenmopzone-outlineoffset" aria-label="Permalink to "controls.forbiddenMopZone.outlineOffset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>禁拖区域轮廓偏移</p><h4 id="controls-forbiddenmopzone-outlinestrokecolor" tabindex="-1">controls.forbiddenMopZone.outlineStrokeColor <a class="header-anchor" href="#controls-forbiddenmopzone-outlinestrokecolor" aria-label="Permalink to "controls.forbiddenMopZone.outlineStrokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#fe8a07'</code></li></ul><p>禁拖区域轮廓描边颜色</p><h4 id="controls-forbiddenmopzone-outlinestrokewidth" tabindex="-1">controls.forbiddenMopZone.outlineStrokeWidth <a class="header-anchor" href="#controls-forbiddenmopzone-outlinestrokewidth" aria-label="Permalink to "controls.forbiddenMopZone.outlineStrokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>禁拖区域轮廓描边宽度</p><h4 id="controls-forbiddenmopzone-outlinedashed" tabindex="-1">controls.forbiddenMopZone.outlineDashed <a class="header-anchor" href="#controls-forbiddenmopzone-outlinedashed" aria-label="Permalink to "controls.forbiddenMopZone.outlineDashed""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>禁拖区域轮廓是否为虚线</p><h4 id="controls-forbiddenmopzone-outlinedasharray" tabindex="-1">controls.forbiddenMopZone.outlineDashArray <a class="header-anchor" href="#controls-forbiddenmopzone-outlinedasharray" aria-label="Permalink to "controls.forbiddenMopZone.outlineDashArray""></a></h4><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[4, 3]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>禁拖区域轮廓虚线样式</p><h4 id="controls-forbiddenmopzone-outlinefillcolor" tabindex="-1">controls.forbiddenMopZone.outlineFillColor <a class="header-anchor" href="#controls-forbiddenmopzone-outlinefillcolor" aria-label="Permalink to "controls.forbiddenMopZone.outlineFillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(254, 138, 7, 0.05)'</code></li></ul><p>禁拖区域轮廓填充颜色</p><h4 id="controls-forbiddenmopzone-showrotatebutton" tabindex="-1">controls.forbiddenMopZone.showRotateButton <a class="header-anchor" href="#controls-forbiddenmopzone-showrotatebutton" aria-label="Permalink to "controls.forbiddenMopZone.showRotateButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示禁拖区域编辑态的旋转按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-forbiddenmopzone-showdeletebutton" tabindex="-1">controls.forbiddenMopZone.showDeleteButton <a class="header-anchor" href="#controls-forbiddenmopzone-showdeletebutton" aria-label="Permalink to "controls.forbiddenMopZone.showDeleteButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示禁拖区域编辑态的删除按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-forbiddenmopzone-showscalebutton" tabindex="-1">controls.forbiddenMopZone.showScaleButton <a class="header-anchor" href="#controls-forbiddenmopzone-showscalebutton" aria-label="Permalink to "controls.forbiddenMopZone.showScaleButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示禁拖区域编辑态的缩放按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-forbiddenmopzone-showmovebutton" tabindex="-1">controls.forbiddenMopZone.showMoveButton <a class="header-anchor" href="#controls-forbiddenmopzone-showmovebutton" aria-label="Permalink to "controls.forbiddenMopZone.showMoveButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示禁拖区域编辑态的移动按钮。<strong>关掉它不禁止平移</strong>——禁拖区域本体的拖拽走独立通道。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-forbiddenmopzone-textcolor" tabindex="-1">controls.forbiddenMopZone.textColor <a class="header-anchor" href="#controls-forbiddenmopzone-textcolor" aria-label="Permalink to "controls.forbiddenMopZone.textColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#fe8a07'</code></li></ul><p>禁拖区域文本颜色</p><h4 id="controls-forbiddenmopzone-textposition" tabindex="-1">controls.forbiddenMopZone.textPosition <a class="header-anchor" href="#controls-forbiddenmopzone-textposition" aria-label="Permalink to "controls.forbiddenMopZone.textPosition""></a></h4><ul><li><strong>类型</strong>: <code>'top' | 'right' | 'bottom' | 'left'</code></li><li><strong>默认值</strong>: <code>'bottom'</code></li></ul><p>禁拖区域文本位置</p><h4 id="controls-forbiddenmopzone-textoffset" tabindex="-1">controls.forbiddenMopZone.textOffset <a class="header-anchor" href="#controls-forbiddenmopzone-textoffset" aria-label="Permalink to "controls.forbiddenMopZone.textOffset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>8</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>禁拖区域文本偏移</p><h4 id="controls-forbiddenmopzone-editing" tabindex="-1">controls.forbiddenMopZone.editing <a class="header-anchor" href="#controls-forbiddenmopzone-editing" aria-label="Permalink to "controls.forbiddenMopZone.editing""></a></h4><p>区域框编辑模式样式配置。</p><h5 id="controls-forbiddenmopzone-editing-isdashed" tabindex="-1">controls.forbiddenMopZone.editing.isDashed <a class="header-anchor" href="#controls-forbiddenmopzone-editing-isdashed" aria-label="Permalink to "controls.forbiddenMopZone.editing.isDashed""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>编辑模式下禁拖区域框是否显示为虚线</p><h5 id="controls-forbiddenmopzone-editing-dasharray" tabindex="-1">controls.forbiddenMopZone.editing.dashArray <a class="header-anchor" href="#controls-forbiddenmopzone-editing-dasharray" aria-label="Permalink to "controls.forbiddenMopZone.editing.dashArray""></a></h5><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[0, 0]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑模式下禁拖区域框虚线样式</p><h4 id="controls-forbiddenmopzone-normal" tabindex="-1">controls.forbiddenMopZone.normal <a class="header-anchor" href="#controls-forbiddenmopzone-normal" aria-label="Permalink to "controls.forbiddenMopZone.normal""></a></h4><p>区域框普通模式样式配置。</p><h5 id="controls-forbiddenmopzone-normal-isdashed" tabindex="-1">controls.forbiddenMopZone.normal.isDashed <a class="header-anchor" href="#controls-forbiddenmopzone-normal-isdashed" aria-label="Permalink to "controls.forbiddenMopZone.normal.isDashed""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>普通模式下禁拖区域框是否显示为虚线</p><h5 id="controls-forbiddenmopzone-normal-dasharray" tabindex="-1">controls.forbiddenMopZone.normal.dashArray <a class="header-anchor" href="#controls-forbiddenmopzone-normal-dasharray" aria-label="Permalink to "controls.forbiddenMopZone.normal.dashArray""></a></h5><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[0, 0]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>普通模式下禁拖区域框虚线样式</p><h4 id="controls-forbiddenmopzone-centericon" tabindex="-1">controls.forbiddenMopZone.centerIcon <a class="header-anchor" href="#controls-forbiddenmopzone-centericon" aria-label="Permalink to "controls.forbiddenMopZone.centerIcon""></a></h4><ul><li><strong>类型</strong>: <code>ZoneCenterIconConfig | undefined</code></li><li><strong>默认值</strong>: <code>undefined</code></li></ul><p>禁拖区域框中心图标。字段与语义同 <a href="#controls-forbiddensweepzone-centericon">controls.forbiddenSweepZone.centerIcon</a>。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">initialize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
257
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config: {</span></span>
|
|
258
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> controls: {</span></span>
|
|
259
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> forbiddenMopZone: {</span></span>
|
|
260
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> centerIcon: {</span></span>
|
|
261
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> src: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'https://example.com/no-mop.png'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
262
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
263
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
264
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
265
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
266
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h3 id="controls-carpet" tabindex="-1">controls.carpet <a class="header-anchor" href="#controls-carpet" aria-label="Permalink to "controls.carpet""></a></h3><p>自定义地毯编辑配置。</p><h4 id="controls-carpet-minsize" tabindex="-1">controls.carpet.minSize <a class="header-anchor" href="#controls-carpet-minsize" aria-label="Permalink to "controls.carpet.minSize""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>自定义地毯最小尺寸。</p><h4 id="controls-carpet-maxsize" tabindex="-1">controls.carpet.maxSize <a class="header-anchor" href="#controls-carpet-maxsize" aria-label="Permalink to "controls.carpet.maxSize""></a></h4><ul><li><strong>类型</strong>: <code>number | undefined</code></li><li><strong>默认值</strong>: <code>undefined</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>地毯最大尺寸（可选）。缺省、NaN、非正数或 ≤ minSize 时视为不限制，并会在控制台输出一次警告。</p><h4 id="controls-carpet-iconwrapperfillcolor" tabindex="-1">controls.carpet.iconWrapperFillColor <a class="header-anchor" href="#controls-carpet-iconwrapperfillcolor" aria-label="Permalink to "controls.carpet.iconWrapperFillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#5d68fe'</code></li></ul><p>图标容器填充颜色，会作用于旋转、缩放、移动以及横向/纵向辅助缩放按钮。</p><h4 id="controls-carpet-deleteiconwrapperfillcolor" tabindex="-1">controls.carpet.deleteIconWrapperFillColor <a class="header-anchor" href="#controls-carpet-deleteiconwrapperfillcolor" aria-label="Permalink to "controls.carpet.deleteIconWrapperFillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource | undefined</code></li><li><strong>默认值</strong>: <code>'#ff4444'</code></li></ul><p>地毯删除按钮的图标容器填充颜色。未设置时回退到 <code>controls.carpet.iconWrapperFillColor</code>。</p><h4 id="controls-carpet-rotatemode" tabindex="-1">controls.carpet.rotateMode <a class="header-anchor" href="#controls-carpet-rotatemode" aria-label="Permalink to "controls.carpet.rotateMode""></a></h4><ul><li><strong>类型</strong>: <code>'step' | 'free'</code></li><li><strong>默认值</strong>: <code>'step'</code></li></ul><p>地毯旋转按钮交互模式。<code>step</code> 表示点击后顺时针旋转 90 度，<code>free</code> 表示按住拖动连续旋转。</p><h4 id="controls-carpet-scalemode" tabindex="-1">controls.carpet.scaleMode <a class="header-anchor" href="#controls-carpet-scalemode" aria-label="Permalink to "controls.carpet.scaleMode""></a></h4><ul><li><strong>类型</strong>: <code>'free' | 'ratioLocked'</code></li><li><strong>默认值</strong>: <code>'ratioLocked'</code></li></ul><p>地毯右下角缩放按钮交互模式。<code>ratioLocked</code> 表示等比缩放，同时显示横向和纵向辅助缩放按钮；<code>free</code> 表示宽高独立缩放，并隐藏辅助缩放按钮。</p><h4 id="controls-carpet-fillcolor" tabindex="-1">controls.carpet.fillColor <a class="header-anchor" href="#controls-carpet-fillcolor" aria-label="Permalink to "controls.carpet.fillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(93, 104, 254, 0.1)'</code></li></ul><p>地毯填充颜色。</p><h4 id="controls-carpet-outlineoffset" tabindex="-1">controls.carpet.outlineOffset <a class="header-anchor" href="#controls-carpet-outlineoffset" aria-label="Permalink to "controls.carpet.outlineOffset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>30</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑轮廓偏移。</p><h4 id="controls-carpet-outlinestrokecolor" tabindex="-1">controls.carpet.outlineStrokeColor <a class="header-anchor" href="#controls-carpet-outlinestrokecolor" aria-label="Permalink to "controls.carpet.outlineStrokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(0, 0, 0, 0.7)'</code></li></ul><p>编辑轮廓描边颜色。</p><h4 id="controls-carpet-outlinestrokewidth" tabindex="-1">controls.carpet.outlineStrokeWidth <a class="header-anchor" href="#controls-carpet-outlinestrokewidth" aria-label="Permalink to "controls.carpet.outlineStrokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑轮廓描边宽度。</p><h4 id="controls-carpet-outlinedashed" tabindex="-1">controls.carpet.outlineDashed <a class="header-anchor" href="#controls-carpet-outlinedashed" aria-label="Permalink to "controls.carpet.outlineDashed""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>编辑轮廓是否虚线。</p><h4 id="controls-carpet-outlinedasharray" tabindex="-1">controls.carpet.outlineDashArray <a class="header-anchor" href="#controls-carpet-outlinedasharray" aria-label="Permalink to "controls.carpet.outlineDashArray""></a></h4><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[4, 3]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑轮廓虚线样式。</p><h4 id="controls-carpet-outlinefillcolor" tabindex="-1">controls.carpet.outlineFillColor <a class="header-anchor" href="#controls-carpet-outlinefillcolor" aria-label="Permalink to "controls.carpet.outlineFillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(93, 104, 254, 0.05)'</code></li></ul><p>编辑轮廓填充颜色。</p><h4 id="controls-carpet-showrotatebutton" tabindex="-1">controls.carpet.showRotateButton <a class="header-anchor" href="#controls-carpet-showrotatebutton" aria-label="Permalink to "controls.carpet.showRotateButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示地毯编辑态的旋转按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-carpet-showdeletebutton" tabindex="-1">controls.carpet.showDeleteButton <a class="header-anchor" href="#controls-carpet-showdeletebutton" aria-label="Permalink to "controls.carpet.showDeleteButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示地毯编辑态的删除按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-carpet-showscalebutton" tabindex="-1">controls.carpet.showScaleButton <a class="header-anchor" href="#controls-carpet-showscalebutton" aria-label="Permalink to "controls.carpet.showScaleButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示地毯编辑态的缩放按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-carpet-showmovebutton" tabindex="-1">controls.carpet.showMoveButton <a class="header-anchor" href="#controls-carpet-showmovebutton" aria-label="Permalink to "controls.carpet.showMoveButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示地毯编辑态的移动按钮。<strong>关掉它不禁止平移</strong>——地毯本体的拖拽走独立通道。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-carpet-textcolor" tabindex="-1">controls.carpet.textColor <a class="header-anchor" href="#controls-carpet-textcolor" aria-label="Permalink to "controls.carpet.textColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#5d68fe'</code></li></ul><p>尺寸文本颜色。</p><h4 id="controls-carpet-textposition" tabindex="-1">controls.carpet.textPosition <a class="header-anchor" href="#controls-carpet-textposition" aria-label="Permalink to "controls.carpet.textPosition""></a></h4><ul><li><strong>类型</strong>: <code>'top' | 'right' | 'bottom' | 'left'</code></li><li><strong>默认值</strong>: <code>'bottom'</code></li></ul><p>尺寸文本位置。</p><h4 id="controls-carpet-textoffset" tabindex="-1">controls.carpet.textOffset <a class="header-anchor" href="#controls-carpet-textoffset" aria-label="Permalink to "controls.carpet.textOffset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>20</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>尺寸文本偏移。</p><h4 id="controls-carpet-editing" tabindex="-1">controls.carpet.editing <a class="header-anchor" href="#controls-carpet-editing" aria-label="Permalink to "controls.carpet.editing""></a></h4><h5 id="controls-carpet-editing-isdashed" tabindex="-1">controls.carpet.editing.isDashed <a class="header-anchor" href="#controls-carpet-editing-isdashed" aria-label="Permalink to "controls.carpet.editing.isDashed""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>编辑模式是否虚线。</p><h5 id="controls-carpet-editing-dasharray" tabindex="-1">controls.carpet.editing.dashArray <a class="header-anchor" href="#controls-carpet-editing-dasharray" aria-label="Permalink to "controls.carpet.editing.dashArray""></a></h5><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[4, 3]</code></li></ul><p>编辑模式虚线样式。</p><h4 id="controls-carpet-normal" tabindex="-1">controls.carpet.normal <a class="header-anchor" href="#controls-carpet-normal" aria-label="Permalink to "controls.carpet.normal""></a></h4><h5 id="controls-carpet-normal-isdashed" tabindex="-1">controls.carpet.normal.isDashed <a class="header-anchor" href="#controls-carpet-normal-isdashed" aria-label="Permalink to "controls.carpet.normal.isDashed""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>普通模式是否虚线。</p><h5 id="controls-carpet-normal-dasharray" tabindex="-1">controls.carpet.normal.dashArray <a class="header-anchor" href="#controls-carpet-normal-dasharray" aria-label="Permalink to "controls.carpet.normal.dashArray""></a></h5><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[0, 0]</code></li></ul><p>普通模式虚线样式。</p><h3 id="cleanzone" tabindex="-1">cleanZone <a class="header-anchor" href="#cleanzone" aria-label="Permalink to "cleanZone""></a></h3><p>清扫区域配置。</p><h4 id="controls-cleanzone-minsize" tabindex="-1">controls.cleanZone.minSize <a class="header-anchor" href="#controls-cleanzone-minsize" aria-label="Permalink to "controls.cleanZone.minSize""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>清扫区域最小尺寸</p><h4 id="controls-cleanzone-maxsize" tabindex="-1">controls.cleanZone.maxSize <a class="header-anchor" href="#controls-cleanzone-maxsize" aria-label="Permalink to "controls.cleanZone.maxSize""></a></h4><ul><li><strong>类型</strong>: <code>number | undefined</code></li><li><strong>默认值</strong>: <code>undefined</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>清扫区域最大尺寸（可选）。缺省、NaN、非正数或 ≤ minSize 时视为不限制，并会在控制台输出一次警告。</p><h4 id="controls-cleanzone-iconwrapperfillcolor" tabindex="-1">controls.cleanZone.iconWrapperFillColor <a class="header-anchor" href="#controls-cleanzone-iconwrapperfillcolor" aria-label="Permalink to "controls.cleanZone.iconWrapperFillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#5d68fe'</code></li></ul><p>清扫区域图标容器填充颜色</p><h4 id="controls-cleanzone-strokecolor" tabindex="-1">controls.cleanZone.strokeColor <a class="header-anchor" href="#controls-cleanzone-strokecolor" aria-label="Permalink to "controls.cleanZone.strokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#5d68fe'</code></li></ul><p>清扫区域描边颜色</p><h4 id="controls-cleanzone-strokewidth" tabindex="-1">controls.cleanZone.strokeWidth <a class="header-anchor" href="#controls-cleanzone-strokewidth" aria-label="Permalink to "controls.cleanZone.strokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>清扫区域描边宽度</p><h4 id="controls-cleanzone-fillcolor" tabindex="-1">controls.cleanZone.fillColor <a class="header-anchor" href="#controls-cleanzone-fillcolor" aria-label="Permalink to "controls.cleanZone.fillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(93, 104, 254, 0.1)'</code></li></ul><p>清扫区域填充颜色</p><h4 id="controls-cleanzone-outlineoffset" tabindex="-1">controls.cleanZone.outlineOffset <a class="header-anchor" href="#controls-cleanzone-outlineoffset" aria-label="Permalink to "controls.cleanZone.outlineOffset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>清扫区域轮廓偏移</p><h4 id="controls-cleanzone-outlinestrokecolor" tabindex="-1">controls.cleanZone.outlineStrokeColor <a class="header-anchor" href="#controls-cleanzone-outlinestrokecolor" aria-label="Permalink to "controls.cleanZone.outlineStrokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#5d68fe'</code></li></ul><p>清扫区域轮廓描边颜色</p><h4 id="controls-cleanzone-outlinestrokewidth" tabindex="-1">controls.cleanZone.outlineStrokeWidth <a class="header-anchor" href="#controls-cleanzone-outlinestrokewidth" aria-label="Permalink to "controls.cleanZone.outlineStrokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>清扫区域轮廓描边宽度</p><h4 id="controls-cleanzone-outlinedashed" tabindex="-1">controls.cleanZone.outlineDashed <a class="header-anchor" href="#controls-cleanzone-outlinedashed" aria-label="Permalink to "controls.cleanZone.outlineDashed""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>清扫区域轮廓是否为虚线</p><h4 id="controls-cleanzone-outlinedasharray" tabindex="-1">controls.cleanZone.outlineDashArray <a class="header-anchor" href="#controls-cleanzone-outlinedasharray" aria-label="Permalink to "controls.cleanZone.outlineDashArray""></a></h4><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[4, 3]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>清扫区域轮廓虚线样式</p><h4 id="controls-cleanzone-outlinefillcolor" tabindex="-1">controls.cleanZone.outlineFillColor <a class="header-anchor" href="#controls-cleanzone-outlinefillcolor" aria-label="Permalink to "controls.cleanZone.outlineFillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(93, 104, 254, 0.05)'</code></li></ul><p>清扫区域轮廓填充颜色</p><h4 id="controls-cleanzone-showrotatebutton" tabindex="-1">controls.cleanZone.showRotateButton <a class="header-anchor" href="#controls-cleanzone-showrotatebutton" aria-label="Permalink to "controls.cleanZone.showRotateButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示清扫区域编辑态的旋转按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-cleanzone-showdeletebutton" tabindex="-1">controls.cleanZone.showDeleteButton <a class="header-anchor" href="#controls-cleanzone-showdeletebutton" aria-label="Permalink to "controls.cleanZone.showDeleteButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示清扫区域编辑态的删除按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-cleanzone-showscalebutton" tabindex="-1">controls.cleanZone.showScaleButton <a class="header-anchor" href="#controls-cleanzone-showscalebutton" aria-label="Permalink to "controls.cleanZone.showScaleButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示清扫区域编辑态的缩放按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-cleanzone-showmovebutton" tabindex="-1">controls.cleanZone.showMoveButton <a class="header-anchor" href="#controls-cleanzone-showmovebutton" aria-label="Permalink to "controls.cleanZone.showMoveButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示清扫区域编辑态的移动按钮。<strong>关掉它不禁止平移</strong>——清扫区域本体的拖拽走独立通道。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-cleanzone-textcolor" tabindex="-1">controls.cleanZone.textColor <a class="header-anchor" href="#controls-cleanzone-textcolor" aria-label="Permalink to "controls.cleanZone.textColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#5d68fe'</code></li></ul><p>清扫区域文本颜色</p><h4 id="controls-cleanzone-textposition" tabindex="-1">controls.cleanZone.textPosition <a class="header-anchor" href="#controls-cleanzone-textposition" aria-label="Permalink to "controls.cleanZone.textPosition""></a></h4><ul><li><strong>类型</strong>: <code>'top' | 'right' | 'bottom' | 'left'</code></li><li><strong>默认值</strong>: <code>'bottom'</code></li></ul><p>清扫区域文本位置</p><h4 id="controls-cleanzone-textoffset" tabindex="-1">controls.cleanZone.textOffset <a class="header-anchor" href="#controls-cleanzone-textoffset" aria-label="Permalink to "controls.cleanZone.textOffset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>8</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>清扫区域文本偏移</p><h4 id="controls-cleanzone-editing" tabindex="-1">controls.cleanZone.editing <a class="header-anchor" href="#controls-cleanzone-editing" aria-label="Permalink to "controls.cleanZone.editing""></a></h4><p>区域框编辑模式样式配置。</p><h5 id="controls-cleanzone-editing-isdashed" tabindex="-1">controls.cleanZone.editing.isDashed <a class="header-anchor" href="#controls-cleanzone-editing-isdashed" aria-label="Permalink to "controls.cleanZone.editing.isDashed""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>编辑模式下清扫区域框是否显示为虚线</p><h5 id="controls-cleanzone-editing-dasharray" tabindex="-1">controls.cleanZone.editing.dashArray <a class="header-anchor" href="#controls-cleanzone-editing-dasharray" aria-label="Permalink to "controls.cleanZone.editing.dashArray""></a></h5><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[0, 0]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑模式下清扫区域框虚线样式</p><h4 id="controls-cleanzone-normal" tabindex="-1">controls.cleanZone.normal <a class="header-anchor" href="#controls-cleanzone-normal" aria-label="Permalink to "controls.cleanZone.normal""></a></h4><p>区域框普通模式样式配置。</p><h5 id="controls-cleanzone-normal-isdashed" tabindex="-1">controls.cleanZone.normal.isDashed <a class="header-anchor" href="#controls-cleanzone-normal-isdashed" aria-label="Permalink to "controls.cleanZone.normal.isDashed""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>普通模式下清扫区域框是否显示为虚线</p><h5 id="controls-cleanzone-normal-dasharray" tabindex="-1">controls.cleanZone.normal.dashArray <a class="header-anchor" href="#controls-cleanzone-normal-dasharray" aria-label="Permalink to "controls.cleanZone.normal.dashArray""></a></h5><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[0, 0]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>普通模式下清扫区域框虚线样式</p><h3 id="controls-virtualwall" tabindex="-1">controls.virtualWall <a class="header-anchor" href="#controls-virtualwall" aria-label="Permalink to "controls.virtualWall""></a></h3><p>虚拟墙配置。</p><h4 id="controls-virtualwall-iconwrapperfillcolor" tabindex="-1">controls.virtualWall.iconWrapperFillColor <a class="header-anchor" href="#controls-virtualwall-iconwrapperfillcolor" aria-label="Permalink to "controls.virtualWall.iconWrapperFillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ff4444'</code></li></ul><p>虚拟墙图标容器填充颜色</p><h4 id="controls-virtualwall-showdeletebutton" tabindex="-1">controls.virtualWall.showDeleteButton <a class="header-anchor" href="#controls-virtualwall-showdeletebutton" aria-label="Permalink to "controls.virtualWall.showDeleteButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示虚拟墙编辑态的删除按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-virtualwall-showscalebutton" tabindex="-1">controls.virtualWall.showScaleButton <a class="header-anchor" href="#controls-virtualwall-showscalebutton" aria-label="Permalink to "controls.virtualWall.showScaleButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示虚拟墙编辑态的缩放按钮。这颗按钮是**「缩放 + 旋转」二合一**（拖动时同时改变墙的长度与朝向，绕线段固定起点旋转），关掉它等于同时关掉这两个能力。</p><div class="warning custom-block"><p class="custom-block-title">虚拟墙没有 <code>showRotateButton</code></p><p>虚拟墙的编辑面只有删除 / 缩放 / 移动三颗按钮，<strong>没有独立的旋转按钮</strong>，因此不支持 <code>showRotateButton</code>（写了也不生效）。旋转由上面的缩放按钮承担。</p></div><h4 id="controls-virtualwall-showmovebutton" tabindex="-1">controls.virtualWall.showMoveButton <a class="header-anchor" href="#controls-virtualwall-showmovebutton" aria-label="Permalink to "controls.virtualWall.showMoveButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示虚拟墙编辑态的移动按钮。<strong>关掉它不禁止平移</strong>——拖拽墙体线段本身即可移动，移动按钮只是一个偏移在外的把手（关掉后它的延长线一并消失）。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-virtualwall-linewidth" tabindex="-1">controls.virtualWall.lineWidth <a class="header-anchor" href="#controls-virtualwall-linewidth" aria-label="Permalink to "controls.virtualWall.lineWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>虚拟墙线条宽度</p><h4 id="controls-virtualwall-linecolor" tabindex="-1">controls.virtualWall.lineColor <a class="header-anchor" href="#controls-virtualwall-linecolor" aria-label="Permalink to "controls.virtualWall.lineColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ff4444'</code></li></ul><p>虚拟墙线条颜色</p><h4 id="controls-virtualwall-hitareathickness" tabindex="-1">controls.virtualWall.hitAreaThickness <a class="header-anchor" href="#controls-virtualwall-hitareathickness" aria-label="Permalink to "controls.virtualWall.hitAreaThickness""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>30</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>虚拟墙热区厚度</p><h4 id="controls-virtualwall-outlineoffset" tabindex="-1">controls.virtualWall.outlineOffset <a class="header-anchor" href="#controls-virtualwall-outlineoffset" aria-label="Permalink to "controls.virtualWall.outlineOffset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>虚拟墙轮廓偏移</p><h4 id="controls-virtualwall-outlinestrokecolor" tabindex="-1">controls.virtualWall.outlineStrokeColor <a class="header-anchor" href="#controls-virtualwall-outlinestrokecolor" aria-label="Permalink to "controls.virtualWall.outlineStrokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ff4444'</code></li></ul><p>虚拟墙轮廓描边颜色</p><h4 id="controls-virtualwall-outlinestrokewidth" tabindex="-1">controls.virtualWall.outlineStrokeWidth <a class="header-anchor" href="#controls-virtualwall-outlinestrokewidth" aria-label="Permalink to "controls.virtualWall.outlineStrokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>虚拟墙轮廓描边宽度</p><h4 id="controls-virtualwall-outlinedashed" tabindex="-1">controls.virtualWall.outlineDashed <a class="header-anchor" href="#controls-virtualwall-outlinedashed" aria-label="Permalink to "controls.virtualWall.outlineDashed""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>虚拟墙轮廓是否为虚线</p><h4 id="controls-virtualwall-outlinedasharray" tabindex="-1">controls.virtualWall.outlineDashArray <a class="header-anchor" href="#controls-virtualwall-outlinedasharray" aria-label="Permalink to "controls.virtualWall.outlineDashArray""></a></h4><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[4, 3]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>虚拟墙轮廓虚线样式</p><h4 id="controls-virtualwall-outlinefillcolor" tabindex="-1">controls.virtualWall.outlineFillColor <a class="header-anchor" href="#controls-virtualwall-outlinefillcolor" aria-label="Permalink to "controls.virtualWall.outlineFillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(255, 68, 68, 0.05)'</code></li></ul><p>虚拟墙轮廓填充颜色</p><h4 id="controls-virtualwall-minwidth" tabindex="-1">controls.virtualWall.minWidth <a class="header-anchor" href="#controls-virtualwall-minwidth" aria-label="Permalink to "controls.virtualWall.minWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>虚拟墙最小宽度</p><h4 id="controls-virtualwall-maxwidth" tabindex="-1">controls.virtualWall.maxWidth <a class="header-anchor" href="#controls-virtualwall-maxwidth" aria-label="Permalink to "controls.virtualWall.maxWidth""></a></h4><ul><li><strong>类型</strong>: <code>number | undefined</code></li><li><strong>默认值</strong>: <code>undefined</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>虚拟墙最大宽度（可选）。缺省、NaN、非正数或 ≤ minWidth 时视为不限制，并会在控制台输出一次警告。</p><h4 id="controls-virtualwall-textcolor" tabindex="-1">controls.virtualWall.textColor <a class="header-anchor" href="#controls-virtualwall-textcolor" aria-label="Permalink to "controls.virtualWall.textColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ff4444'</code></li></ul><p>虚拟墙文本颜色</p><h4 id="controls-virtualwall-textoffset" tabindex="-1">controls.virtualWall.textOffset <a class="header-anchor" href="#controls-virtualwall-textoffset" aria-label="Permalink to "controls.virtualWall.textOffset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>8</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>虚拟墙文本偏移</p><h4 id="controls-virtualwall-editing" tabindex="-1">controls.virtualWall.editing <a class="header-anchor" href="#controls-virtualwall-editing" aria-label="Permalink to "controls.virtualWall.editing""></a></h4><p>虚拟墙编辑模式样式配置。</p><h5 id="controls-virtualwall-editing-isdashed" tabindex="-1">controls.virtualWall.editing.isDashed <a class="header-anchor" href="#controls-virtualwall-editing-isdashed" aria-label="Permalink to "controls.virtualWall.editing.isDashed""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>编辑模式下是否使用虚线。</p><h5 id="controls-virtualwall-editing-dasharray" tabindex="-1">controls.virtualWall.editing.dashArray <a class="header-anchor" href="#controls-virtualwall-editing-dasharray" aria-label="Permalink to "controls.virtualWall.editing.dashArray""></a></h5><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[0, 0]</code></li></ul><p>编辑模式虚线样式。</p><h4 id="controls-virtualwall-normal" tabindex="-1">controls.virtualWall.normal <a class="header-anchor" href="#controls-virtualwall-normal" aria-label="Permalink to "controls.virtualWall.normal""></a></h4><p>虚拟墙普通模式样式配置。</p><h5 id="controls-virtualwall-normal-isdashed" tabindex="-1">controls.virtualWall.normal.isDashed <a class="header-anchor" href="#controls-virtualwall-normal-isdashed" aria-label="Permalink to "controls.virtualWall.normal.isDashed""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>普通模式下是否使用虚线。</p><h5 id="controls-virtualwall-normal-dasharray" tabindex="-1">controls.virtualWall.normal.dashArray <a class="header-anchor" href="#controls-virtualwall-normal-dasharray" aria-label="Permalink to "controls.virtualWall.normal.dashArray""></a></h5><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[0, 0]</code></li></ul><p>普通模式虚线样式。</p><h3 id="controls-threshold" tabindex="-1">controls.threshold <a class="header-anchor" href="#controls-threshold" aria-label="Permalink to "controls.threshold""></a></h3><p>门槛配置。门槛是四角坐标描述的斜纹矩形条带；条带为真实世界尺寸（随地图缩放），描边 / 圆角 / 热区边距为屏幕像素（不随缩放），<strong>斜纹线宽与间距是条带厚度的比例</strong>。编辑面复用四边形家族的编辑控件（四角按钮：删除 / 旋转 / 缩放 / 移动）。</p><p>默认观感为「危险胶带」：白色底 + 粗斜纹，可通行蓝白、不可通行红白，斜纹方向 <code>/</code>。整套纹路跟着条带一起缩放，所以<strong>条纹根数、疏密、着色比例在任何地图缩放、任何条带厚度下都一样</strong>——0.15m 与 0.4m 的门槛、放大与缩小，看起来都是同一张贴纸。</p><div class="warning custom-block"><p class="custom-block-title">0.0.x 破坏性变更</p><p><code>stripeWidth</code> / <code>stripeGap</code> 的单位从屏幕像素改成了条带厚度的比例。旧值（例如 <code>stripeWidth: 3</code>）现在表示「3 倍条带厚度」，会画成一整片实色。升级时请按新语义重填，或直接删掉这两项用默认值。</p></div><h4 id="controls-threshold-stripewidth" tabindex="-1">controls.threshold.stripeWidth <a class="header-anchor" href="#controls-threshold-stripewidth" aria-label="Permalink to "controls.threshold.stripeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.3</code></li><li><strong>单位</strong>: 条带厚度的比例（<strong>不是像素</strong>）</li></ul><p>斜纹线宽，垂直于斜纹方向度量。<code>0.3</code> 表示线宽为条带厚度的 30%——0.4m 的门槛画 0.12m 宽的斜纹，0.15m 的门槛画 0.045m，观感一致。</p><h4 id="controls-threshold-stripegap" tabindex="-1">controls.threshold.stripeGap <a class="header-anchor" href="#controls-threshold-stripegap" aria-label="Permalink to "controls.threshold.stripeGap""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.4</code></li><li><strong>单位</strong>: 条带厚度的比例（<strong>不是像素</strong>）</li></ul><p>相邻斜纹间距，沿条带长度方向度量。步距 <code>stripeWidth + stripeGap</code>（默认 <code>0.7</code>）决定疏密：任一竖切面上约有 <code>1 / 0.7 ≈ 1.4</code> 根斜纹穿过条带。</p><div class="tip custom-block"><p class="custom-block-title">两者不同轴</p><p><code>stripeWidth</code> 是垂直于斜纹的线宽，同一根斜纹沿条带长度方向占 <code>stripeWidth / sin(stripeAngle)</code>（45° 时是 <code>× √2</code>）。所以着色比例约为 <code>stripeWidth / sin(stripeAngle) / (stripeWidth + stripeGap)</code>，默认值（0.3 / 0.4 / 55°）下约 <strong>55%</strong>。想整体调疏密就一起放大两个值（保持比值不变），想调色块占比就只动 <code>stripeWidth</code>。</p></div><h4 id="controls-threshold-stripedirection" tabindex="-1">controls.threshold.stripeDirection <a class="header-anchor" href="#controls-threshold-stripedirection" aria-label="Permalink to "controls.threshold.stripeDirection""></a></h4><ul><li><strong>类型</strong>: <code>'forward' | 'backward'</code></li><li><strong>默认值</strong>: <code>'forward'</code></li></ul><p>斜纹倾斜方向。<code>'forward'</code> 为 <code>/</code>（沿条带长度方向向右上），<code>'backward'</code> 为 <code>\\</code>（向右下）。厂商惯例不一，两种都支持。</p><h4 id="controls-threshold-stripeangle" tabindex="-1">controls.threshold.stripeAngle <a class="header-anchor" href="#controls-threshold-stripeangle" aria-label="Permalink to "controls.threshold.stripeAngle""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>55</code></li><li><strong>单位</strong>: 度（与条带长度方向的夹角），钳制在 <code>[10, 90]</code></li></ul><p>默认 <code>55</code>，比常见的危险胶带角度（45°）更立一些。<code>90</code> 为垂直于条带的竖条纹；超出范围或非数值会回落到区间内 / 默认值。</p><div class="warning custom-block"><p class="custom-block-title">改角度会连带改变着色</p><p>斜纹越陡，横穿条带需要的水平距离越短（<code>厚度 / tan(角度)</code>），而且一根斜纹沿长度方向只占 <code>stripeWidth / sin(角度)</code>（45° 时是 <code>× √2</code>，90° 时是 <code>× 1</code>）。所以<strong>只调陡角度会让条带变淡</strong>——默认的 55° + <code>stripeWidth</code> 0.3 着色约 55%，同样参数在 45° 下是 61%。</p><p>想在别的角度上维持约 61% 着色（默认步距 0.7），<code>stripeWidth</code> 要按 <code>sin(角度)</code> 同步放大：</p><table tabindex="0"><thead><tr><th><code>stripeAngle</code></th><th>维持 61% 着色的 <code>stripeWidth</code></th></tr></thead><tbody><tr><td>45</td><td>0.30</td></tr><tr><td>55</td><td>0.35</td></tr><tr><td>65</td><td>0.39</td></tr><tr><td>75</td><td>0.41</td></tr><tr><td>90</td><td>0.43</td></tr></tbody></table></div><h4 id="controls-threshold-borderwidth" tabindex="-1">controls.threshold.borderWidth <a class="header-anchor" href="#controls-threshold-borderwidth" aria-label="Permalink to "controls.threshold.borderWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>条带边框线宽（屏幕像素）。颜色与斜纹同为 <code>passable.color</code> / <code>impassable.color</code>。</p><h4 id="controls-threshold-cornerradius" tabindex="-1">controls.threshold.cornerRadius <a class="header-anchor" href="#controls-threshold-cornerradius" aria-label="Permalink to "controls.threshold.cornerRadius""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>条带圆角半径（屏幕像素）。自动不超过条带半厚 / 半长。</p><h4 id="controls-threshold-passable" tabindex="-1">controls.threshold.passable <a class="header-anchor" href="#controls-threshold-passable" aria-label="Permalink to "controls.threshold.passable""></a></h4><p>可通行门槛样式（默认蓝白斜纹）。</p><h5 id="controls-threshold-passable-color" tabindex="-1">controls.threshold.passable.color <a class="header-anchor" href="#controls-threshold-passable-color" aria-label="Permalink to "controls.threshold.passable.color""></a></h5><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#2f54eb'</code></li></ul><p>条纹与描边颜色。</p><h5 id="controls-threshold-passable-fillcolor" tabindex="-1">controls.threshold.passable.fillColor <a class="header-anchor" href="#controls-threshold-passable-fillcolor" aria-label="Permalink to "controls.threshold.passable.fillColor""></a></h5><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>条带底色。默认为不透明白色（斜纹之间的留白）；想让地图透出来就改成半透明色。</p><h4 id="controls-threshold-impassable" tabindex="-1">controls.threshold.impassable <a class="header-anchor" href="#controls-threshold-impassable" aria-label="Permalink to "controls.threshold.impassable""></a></h4><p>不可通行门槛样式（默认红白斜纹）。</p><h5 id="controls-threshold-impassable-color" tabindex="-1">controls.threshold.impassable.color <a class="header-anchor" href="#controls-threshold-impassable-color" aria-label="Permalink to "controls.threshold.impassable.color""></a></h5><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ff4d4f'</code></li></ul><p>条纹与描边颜色。</p><h5 id="controls-threshold-impassable-fillcolor" tabindex="-1">controls.threshold.impassable.fillColor <a class="header-anchor" href="#controls-threshold-impassable-fillcolor" aria-label="Permalink to "controls.threshold.impassable.fillColor""></a></h5><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>条带底色。</p><h4 id="controls-threshold-minlength" tabindex="-1">controls.threshold.minLength <a class="header-anchor" href="#controls-threshold-minlength" aria-label="Permalink to "controls.threshold.minLength""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.4</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>最小长度。绘制与缩放时长边（顶点 0→1）被钳制到不小于该值。</p><h4 id="controls-threshold-maxlength" tabindex="-1">controls.threshold.maxLength <a class="header-anchor" href="#controls-threshold-maxlength" aria-label="Permalink to "controls.threshold.maxLength""></a></h4><ul><li><strong>类型</strong>: <code>number | undefined</code></li><li><strong>默认值</strong>: <code>3</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>最大长度（可选）。缺省或 ≤ minLength 时不限制。</p><h4 id="controls-threshold-minheight" tabindex="-1">controls.threshold.minHeight <a class="header-anchor" href="#controls-threshold-minheight" aria-label="Permalink to "controls.threshold.minHeight""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.1</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>最小厚度。绘制与缩放时厚度边（顶点 0→3）被钳制到不小于该值。</p><h4 id="controls-threshold-maxheight" tabindex="-1">controls.threshold.maxHeight <a class="header-anchor" href="#controls-threshold-maxheight" aria-label="Permalink to "controls.threshold.maxHeight""></a></h4><ul><li><strong>类型</strong>: <code>number | undefined</code></li><li><strong>默认值</strong>: <code>0.4</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>最大厚度（可选）。缺省或 ≤ minHeight 时不限制。</p><div class="warning custom-block"><p class="custom-block-title">配置变更</p><p>0.0.18 起门槛数据改为四角坐标，厚度总能从数据反解出来，<code>controls.threshold.defaultHeight</code> 因此被移除。</p></div><h4 id="controls-threshold-iconwrapperfillcolor" tabindex="-1">controls.threshold.iconWrapperFillColor <a class="header-anchor" href="#controls-threshold-iconwrapperfillcolor" aria-label="Permalink to "controls.threshold.iconWrapperFillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ff4444'</code></li></ul><p>四角控制按钮图标容器填充颜色（编辑态显示）。</p><h4 id="controls-threshold-showdeletebutton" tabindex="-1">controls.threshold.showDeleteButton <a class="header-anchor" href="#controls-threshold-showdeletebutton" aria-label="Permalink to "controls.threshold.showDeleteButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示门槛编辑态的删除按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-threshold-showrotatebutton" tabindex="-1">controls.threshold.showRotateButton <a class="header-anchor" href="#controls-threshold-showrotatebutton" aria-label="Permalink to "controls.threshold.showRotateButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示门槛编辑态的旋转按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-threshold-showscalebutton" tabindex="-1">controls.threshold.showScaleButton <a class="header-anchor" href="#controls-threshold-showscalebutton" aria-label="Permalink to "controls.threshold.showScaleButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示门槛编辑态的缩放按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-threshold-showmovebutton" tabindex="-1">controls.threshold.showMoveButton <a class="header-anchor" href="#controls-threshold-showmovebutton" aria-label="Permalink to "controls.threshold.showMoveButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示门槛编辑态的移动按钮。<strong>关掉它不禁止平移</strong>——门槛本体的拖拽走独立通道。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-threshold-hitareapadding" tabindex="-1">controls.threshold.hitAreaPadding <a class="header-anchor" href="#controls-threshold-hitareapadding" aria-label="Permalink to "controls.threshold.hitAreaPadding""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>12</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>点击热区在条带每一侧向外扩展的可抓边距（屏幕像素）。热区厚度 = 条带高度 + 2 × 该值，因此条带无论多厚都保有固定的可抓边距，细条带也不会难以点中。</p><h4 id="controls-threshold-outlineoffset" tabindex="-1">controls.threshold.outlineOffset <a class="header-anchor" href="#controls-threshold-outlineoffset" aria-label="Permalink to "controls.threshold.outlineOffset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑态轮廓相对条带边缘的偏移。</p><h4 id="controls-threshold-outlinestrokecolor" tabindex="-1">controls.threshold.outlineStrokeColor <a class="header-anchor" href="#controls-threshold-outlinestrokecolor" aria-label="Permalink to "controls.threshold.outlineStrokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#666666'</code></li></ul><p>编辑态轮廓描边颜色。</p><h4 id="controls-threshold-outlinestrokewidth" tabindex="-1">controls.threshold.outlineStrokeWidth <a class="header-anchor" href="#controls-threshold-outlinestrokewidth" aria-label="Permalink to "controls.threshold.outlineStrokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑态轮廓描边宽度。</p><h4 id="controls-threshold-outlinedashed" tabindex="-1">controls.threshold.outlineDashed <a class="header-anchor" href="#controls-threshold-outlinedashed" aria-label="Permalink to "controls.threshold.outlineDashed""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>编辑态轮廓是否为虚线。</p><h4 id="controls-threshold-outlinedasharray" tabindex="-1">controls.threshold.outlineDashArray <a class="header-anchor" href="#controls-threshold-outlinedasharray" aria-label="Permalink to "controls.threshold.outlineDashArray""></a></h4><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[4, 3]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑态轮廓虚线样式。</p><h4 id="controls-threshold-outlinefillcolor" tabindex="-1">controls.threshold.outlineFillColor <a class="header-anchor" href="#controls-threshold-outlinefillcolor" aria-label="Permalink to "controls.threshold.outlineFillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(102, 102, 102, 0.05)'</code></li></ul><p>编辑态轮廓填充颜色。</p><h4 id="controls-threshold-textcolor" tabindex="-1">controls.threshold.textColor <a class="header-anchor" href="#controls-threshold-textcolor" aria-label="Permalink to "controls.threshold.textColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#666666'</code></li></ul><p>尺寸标签（长×厚）文本颜色（编辑态显示）。</p><h4 id="controls-threshold-textoffset" tabindex="-1">controls.threshold.textOffset <a class="header-anchor" href="#controls-threshold-textoffset" aria-label="Permalink to "controls.threshold.textOffset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>尺寸标签相对轮廓边缘向外的偏移。</p><h3 id="controls-ramp" tabindex="-1">controls.ramp <a class="header-anchor" href="#controls-ramp" aria-label="Permalink to "controls.ramp""></a></h3><p>坡道配置。坡道是四角坐标描述的不透明矩形地面元素，纹样是<strong>朝上（顺坡向）的浅角箭头</strong>：尖端在正中、指向坡向。坡道画在<strong>路径 / 机器人 / 房间名之下</strong>的地面标记层（不参与 <a href="#controls-renderorder"><code>controls.renderOrder</code></a> 排序），编辑面复用四边形家族的编辑控件（四角按钮：删除 / 旋转 / 缩放 / 移动）。</p><p><strong>箭头按「铺瓷砖」排布，不是把单个箭头拉满坡道宽度。</strong> 砖的尺寸只由<strong>短边</strong>决定（<code>短边 / arrowDensity</code>），再沿坡向铺若干<strong>行</strong>、沿宽方向铺若干<strong>列</strong> —— 因此任何宽高比的坡道看到的都是同一块砖，只是数量不同：方形坡道 1 列 6 行（就是 UED 稿本身），又宽又矮的坡道会多铺几列，又窄又高的会多铺几行。</p><details class="details custom-block"><summary>为什么必须铺砖：拉伸单个箭头会随宽高比垮掉</summary><p>折角深浅取自砖宽、线宽取自行距。如果砖宽等于坡道全宽，这两个特征就分别挂在宽、高两条边上，「折角 ÷ 线宽」直接等于宽高比：</p><table tabindex="0"><thead><tr><th>坡道</th><th>折角 ÷ 线宽</th><th>观感</th></tr></thead><tbody><tr><td>又窄又高</td><td>≈ 0.14</td><td>折角只有线宽的 1/7，退化成一叠胖带子</td></tr><tr><td>方形</td><td>≈ 1</td><td>正常</td></tr><tr><td>又宽又矮</td><td>≈ 6</td><td>细发丝配大折角</td></tr></tbody></table><p>铺砖后这个比值在任何宽高比下都恒定在 <code>1</code> 附近。</p></details><p>三条尺寸规则刻意不同，都是为了让箭头在任何情况下都读得出方向：</p><ul><li><strong>最小步距（屏幕像素）是密度天花板</strong>，不是实际间距。地图缩得很小时它顶掉砖尺寸，砖变大、行数变少，箭头不会糊成一片；它同时兜住砖宽，又扁又宽的坡道不会碎成一排几像素宽的碎片。</li><li><strong>线宽按实际行距的比例算</strong>（<a href="#controls-ramp-arrowthicknessratio"><code>arrowThicknessRatio</code></a>），不锁死在屏幕像素。行距随坡道尺寸变化，线宽必须跟着长 —— 否则放大地图就会看到又宽又疏的缝里夹着细发丝一样的箭头。</li><li><strong>折角是角度而非固定像素。</strong> 外凸量由 <code>半个砖宽 × tan(角度)</code> 反推，所以任何坡道尺寸下箭头形状都一样；若用固定像素，宽砖上的箭头会被摊平成近似直线。</li></ul><p>排版还会在上下各预留线宽（尖端按斜接量预留），因此首尾两行箭头<strong>都不会被裁掉一半</strong>。多列时列与列之间留一道缝，缝宽取自行与行之间的缝（横竖同一个节奏）—— 箭头挨在一起会连成「∧∨∧」一道波浪，读不出方向。</p><h4 id="controls-ramp-fillcolor" tabindex="-1">controls.ramp.fillColor <a class="header-anchor" href="#controls-ramp-fillcolor" aria-label="Permalink to "controls.ramp.fillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#7679dd'</code></li></ul><p>底色。<strong>不透明</strong> —— 坡道是地面元素，会完全盖住地板；因其画在路径 / 机器人之下，不会遮挡活动元素。</p><h4 id="controls-ramp-strokecolor" tabindex="-1">controls.ramp.strokeColor <a class="header-anchor" href="#controls-ramp-strokecolor" aria-label="Permalink to "controls.ramp.strokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#5b60cf'</code></li></ul><p>描边颜色。</p><h4 id="controls-ramp-strokewidth" tabindex="-1">controls.ramp.strokeWidth <a class="header-anchor" href="#controls-ramp-strokewidth" aria-label="Permalink to "controls.ramp.strokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li><li><strong>单位</strong>: <code>px</code>（屏幕像素，不随地图缩放）</li></ul><p>描边线宽。</p><h4 id="controls-ramp-arrowcolor" tabindex="-1">controls.ramp.arrowColor <a class="header-anchor" href="#controls-ramp-arrowcolor" aria-label="Permalink to "controls.ramp.arrowColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(255, 255, 255, 0.4)'</code></li></ul><p>箭头颜色。默认是白色 40% 透明叠在底色上，因此改 <a href="#controls-ramp-fillcolor"><code>fillColor</code></a> 时箭头会自动跟随，不需要两处对着调。</p><h4 id="controls-ramp-arrowthickness" tabindex="-1">controls.ramp.arrowThickness <a class="header-anchor" href="#controls-ramp-arrowthickness" aria-label="Permalink to "controls.ramp.arrowThickness""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>3</code></li><li><strong>单位</strong>: <code>px</code>（屏幕像素，不随地图缩放）</li></ul><p>箭头<strong>最小</strong>线宽。实际线宽取 <code>实际行距 × arrowThicknessRatio</code> 与本值中的较大者 —— 正常缩放下由比例决定，坡道小到 / 地图缩到线要细过本值时由本值兜底，保证箭头不会细成看不见。</p><h4 id="controls-ramp-arrowthicknessratio" tabindex="-1">controls.ramp.arrowThicknessRatio <a class="header-anchor" href="#controls-ramp-arrowthicknessratio" aria-label="Permalink to "controls.ramp.arrowThicknessRatio""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.43</code></li></ul><p>箭头线宽相对<strong>实际行距</strong>的比例（<code>3 / 7</code>，取自 UED 矢量稿的线宽与步距）。</p><p>线宽跟着行距走而不是锁在固定像素：行距随坡道尺寸变化，如果线宽不跟着长，放大地图就会看到又宽又疏的缝里夹着细发丝。按比例算才能让线与缝的粗细比恒定，任何缩放下都是同一张贴纸。</p><p>调大线更粗（越接近实心块），调小线更细。</p><h4 id="controls-ramp-arrowgap" tabindex="-1">controls.ramp.arrowGap <a class="header-anchor" href="#controls-ramp-arrowgap" aria-label="Permalink to "controls.ramp.arrowGap""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>4</code></li><li><strong>单位</strong>: <code>px</code>（屏幕像素，不随地图缩放）</li></ul><p>相邻箭头的<strong>最小</strong>间隙，沿坡向度量。最小步距 <code>arrowThickness + arrowGap</code>（默认 <code>7px</code>）是密度天花板 —— 箭头永远不会比这更挤。地图缩得很小时它会顶掉 <a href="#controls-ramp-arrowdensity"><code>arrowDensity</code></a> 算出的砖尺寸，让砖变大、行数变少；它也同时兜住砖宽，防止又扁又宽的坡道碎成一排几像素宽的碎片。</p><h4 id="controls-ramp-arrowdensity" tabindex="-1">controls.ramp.arrowDensity <a class="header-anchor" href="#controls-ramp-arrowdensity" aria-label="Permalink to "controls.ramp.arrowDensity""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>6</code></li></ul><p>纹样密度：<strong>短边</strong>上铺几个箭头（<code>6</code> 取自 UED 稿在自己方形画板上的箭头根数，所以方形坡道铺出来就是稿子本身）。</p><p>砖的尺寸 = <code>短边 / arrowDensity</code>，长边方向按同一块砖铺整数份。调小更稀（例如 <code>4</code>：砖更大、箭头更少更粗），调大更密 —— 但密度还受最小步距 <code>arrowThickness + arrowGap</code> 约束，调大到塞不下时不会生效。</p><div class="warning custom-block"><p class="custom-block-title">这个值不是「最多几个箭头」</p><p>它是<strong>短边</strong>上的格数。又窄又高的坡道会按同一块砖沿长边铺出远多于 6 行 —— 那正是让它保持箭头观感的原因（否则 6 行摊在长坡道上，行距被拉开、线宽跟着变粗，就退化成胖带子）。要整体调稀请调本值，不要试图给行数设上限。</p></div><h4 id="controls-ramp-arrowangle" tabindex="-1">controls.ramp.arrowAngle <a class="header-anchor" href="#controls-ramp-arrowangle" aria-label="Permalink to "controls.ramp.arrowAngle""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>9</code></li><li><strong>单位</strong>: 度（箭头两臂相对横轴的抬升角），钳制在 <code>[1, 60]</code></li></ul><p>折角角度。外凸量由 <code>半个砖宽 × tan(角度)</code> 反推，因此任何坡道尺寸、任何缩放下箭头形状恒定。</p><p>调小会让箭头趋于平直（低于 <code>1°</code> 视觉上就是一条直线），调大则两臂变陡、吃掉更多行距。默认 <code>9</code> 取自 UED 矢量稿（外凸 3 / 半长 19.5 ≈ 8.7°），是一道很浅的折。</p><div class="tip custom-block"><p class="custom-block-title">小坡道上箭头会偏平</p><p><code>9°</code> 是很浅的角：0.5m 的坡道在默认缩放下只有 10px 宽，折角外凸不到 1px，方向几乎看不出来。如果你的场景里小坡道很常见，把这个值调陡（例如 <code>20</code>）会明显好读。</p></div><h4 id="controls-ramp-arrowinset" tabindex="-1">controls.ramp.arrowInset <a class="header-anchor" href="#controls-ramp-arrowinset" aria-label="Permalink to "controls.ramp.arrowInset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>3</code></li><li><strong>单位</strong>: <code>px</code>（屏幕像素，不随地图缩放）</li></ul><p>箭头区域相对坡道边缘的内缩，四边同值 —— 箭头不贴边（与 UED 稿一致）。自动不超过坡道的半宽 / 半高。</p><h4 id="controls-ramp-minwidth" tabindex="-1">controls.ramp.minWidth <a class="header-anchor" href="#controls-ramp-minwidth" aria-label="Permalink to "controls.ramp.minWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.2</code></li><li><strong>单位</strong>: 米</li></ul><p>最小宽度。绘制与缩放时宽边（顶点 0→1）被钳制到不小于该值。</p><h4 id="controls-ramp-maxwidth" tabindex="-1">controls.ramp.maxWidth <a class="header-anchor" href="#controls-ramp-maxwidth" aria-label="Permalink to "controls.ramp.maxWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>4</code></li><li><strong>单位</strong>: 米</li></ul><p>最大宽度，可选。缺省或 ≤ <code>minWidth</code> 时不限制。</p><h4 id="controls-ramp-minheight" tabindex="-1">controls.ramp.minHeight <a class="header-anchor" href="#controls-ramp-minheight" aria-label="Permalink to "controls.ramp.minHeight""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0.4</code></li><li><strong>单位</strong>: 米</li></ul><p>最小高度。绘制与缩放时高边（顶点 0→3）被钳制到不小于该值。高方向即坡向， <code>getRampPointsByViewportCenter</code> 的缺省高度正好等于本值 —— 新建坡道一开始就在 最薄的那一档，只能变厚。</p><div class="warning custom-block"><p class="custom-block-title">调低到 0.3m 以下时箭头会退化成条纹</p><p><a href="#controls-ramp-arrowinset"><code>arrowInset</code></a> 的内缩加上 <a href="#controls-ramp-arrowthickness"><code>arrowThickness</code></a> 的最低线宽会吃掉整个厚度， 折角外凸不到 1px —— 画出来是一排细条纹而不是箭头。这是厚度本身放不下箭头， 不是配置错了。默认的 <code>0.4m</code> 在这条线之上。</p></div><h4 id="controls-ramp-maxheight" tabindex="-1">controls.ramp.maxHeight <a class="header-anchor" href="#controls-ramp-maxheight" aria-label="Permalink to "controls.ramp.maxHeight""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>4</code></li><li><strong>单位</strong>: 米</li></ul><p>最大高度，可选。缺省或 ≤ <code>minHeight</code> 时不限制。</p><h4 id="controls-ramp-iconwrapperfillcolor" tabindex="-1">controls.ramp.iconWrapperFillColor <a class="header-anchor" href="#controls-ramp-iconwrapperfillcolor" aria-label="Permalink to "controls.ramp.iconWrapperFillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ff4444'</code></li></ul><p>四角控制按钮图标容器填充颜色（编辑态显示）。</p><h4 id="controls-ramp-showdeletebutton" tabindex="-1">controls.ramp.showDeleteButton <a class="header-anchor" href="#controls-ramp-showdeletebutton" aria-label="Permalink to "controls.ramp.showDeleteButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示坡道编辑态的删除按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-ramp-showrotatebutton" tabindex="-1">controls.ramp.showRotateButton <a class="header-anchor" href="#controls-ramp-showrotatebutton" aria-label="Permalink to "controls.ramp.showRotateButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示坡道编辑态的旋转按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-ramp-showscalebutton" tabindex="-1">controls.ramp.showScaleButton <a class="header-anchor" href="#controls-ramp-showscalebutton" aria-label="Permalink to "controls.ramp.showScaleButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示坡道编辑态的缩放按钮。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-ramp-showmovebutton" tabindex="-1">controls.ramp.showMoveButton <a class="header-anchor" href="#controls-ramp-showmovebutton" aria-label="Permalink to "controls.ramp.showMoveButton""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示坡道编辑态的移动按钮。<strong>关掉它不禁止平移</strong>——坡道本体的拖拽走独立通道。语义与例外见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><h4 id="controls-ramp-outlineoffset" tabindex="-1">controls.ramp.outlineOffset <a class="header-anchor" href="#controls-ramp-outlineoffset" aria-label="Permalink to "controls.ramp.outlineOffset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑态轮廓相对坡道边缘的偏移。</p><h4 id="controls-ramp-outlinestrokecolor" tabindex="-1">controls.ramp.outlineStrokeColor <a class="header-anchor" href="#controls-ramp-outlinestrokecolor" aria-label="Permalink to "controls.ramp.outlineStrokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#666666'</code></li></ul><p>编辑态轮廓描边颜色。</p><h4 id="controls-ramp-outlinestrokewidth" tabindex="-1">controls.ramp.outlineStrokeWidth <a class="header-anchor" href="#controls-ramp-outlinestrokewidth" aria-label="Permalink to "controls.ramp.outlineStrokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑态轮廓描边宽度。</p><h4 id="controls-ramp-outlinedashed" tabindex="-1">controls.ramp.outlineDashed <a class="header-anchor" href="#controls-ramp-outlinedashed" aria-label="Permalink to "controls.ramp.outlineDashed""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>编辑态轮廓是否虚线。</p><h4 id="controls-ramp-outlinedasharray" tabindex="-1">controls.ramp.outlineDashArray <a class="header-anchor" href="#controls-ramp-outlinedasharray" aria-label="Permalink to "controls.ramp.outlineDashArray""></a></h4><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[4, 3]</code></li></ul><p>编辑态轮廓虚线数组。</p><h4 id="controls-ramp-outlinefillcolor" tabindex="-1">controls.ramp.outlineFillColor <a class="header-anchor" href="#controls-ramp-outlinefillcolor" aria-label="Permalink to "controls.ramp.outlineFillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(102, 102, 102, 0.05)'</code></li></ul><p>编辑态轮廓填充颜色。</p><h4 id="controls-ramp-textcolor" tabindex="-1">controls.ramp.textColor <a class="header-anchor" href="#controls-ramp-textcolor" aria-label="Permalink to "controls.ramp.textColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#666666'</code></li></ul><p>尺寸标签（宽×高）文本颜色（编辑态显示）。</p><h4 id="controls-ramp-textoffset" tabindex="-1">controls.ramp.textOffset <a class="header-anchor" href="#controls-ramp-textoffset" aria-label="Permalink to "controls.ramp.textOffset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>尺寸标签相对轮廓边缘向外的偏移。</p><h3 id="controls-spot" tabindex="-1">controls.spot <a class="header-anchor" href="#controls-spot" aria-label="Permalink to "controls.spot""></a></h3><p>定点清扫配置。</p><h4 id="controls-spot-iconsrc" tabindex="-1">controls.spot.iconSrc <a class="header-anchor" href="#controls-spot-iconsrc" aria-label="Permalink to "controls.spot.iconSrc""></a></h4><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>定点清扫图标资源路径</p><h4 id="controls-spot-iconsize" tabindex="-1">controls.spot.iconSize <a class="header-anchor" href="#controls-spot-iconsize" aria-label="Permalink to "controls.spot.iconSize""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>8</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>定点清扫图标大小</p><h4 id="controls-spot-iconsizefixed" tabindex="-1">controls.spot.iconSizeFixed <a class="header-anchor" href="#controls-spot-iconsizefixed" aria-label="Permalink to "controls.spot.iconSizeFixed""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>定点清扫图标尺寸是否固定（不跟随地图缩放）</p><h4 id="controls-spot-iconanchor" tabindex="-1">controls.spot.iconAnchor <a class="header-anchor" href="#controls-spot-iconanchor" aria-label="Permalink to "controls.spot.iconAnchor""></a></h4><ul><li><strong>类型</strong>: <code>Point</code></li><li><strong>默认值</strong>: <code>{ x: 0.5, y: 0.5 }</code></li></ul><p>定点清扫中心图标的锚点位置,用于控制图标相对于坐标点的对齐方式。</p><p>锚点坐标系说明:</p><ul><li><code>{x: 0, y: 0}</code> 表示左上角</li><li><code>{x: 0.5, y: 0.5}</code> 表示中心点(默认)</li><li><code>{x: 0.5, y: 1}</code> 表示底部中心(适用于气泡/水滴形状的图标)</li><li><code>{x: 1, y: 1}</code> 表示右下角</li></ul><p><strong>注意</strong>: 图标锚点只影响中心图标本身,外框(填充/边框)与文本标签仍以坐标点为基准布局。所有 Spot 统一使用此配置中的锚点值。</p><p><strong>示例</strong>:</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> mapInstance</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapApplication</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
267
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config: {</span></span>
|
|
268
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> controls: {</span></span>
|
|
269
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> spot: {</span></span>
|
|
270
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> iconAnchor: { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 水滴图标底部尖端对准坐标点</span></span>
|
|
271
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
272
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
273
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
274
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h4 id="controls-spot-size" tabindex="-1">controls.spot.size <a class="header-anchor" href="#controls-spot-size" aria-label="Permalink to "controls.spot.size""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li><li><strong>单位</strong>: <code>米</code></li></ul><p>定点清扫区域尺寸</p><h4 id="controls-spot-strokecolor" tabindex="-1">controls.spot.strokeColor <a class="header-anchor" href="#controls-spot-strokecolor" aria-label="Permalink to "controls.spot.strokeColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#5d68fe'</code></li></ul><p>定点清扫描边颜色</p><h4 id="controls-spot-strokewidth" tabindex="-1">controls.spot.strokeWidth <a class="header-anchor" href="#controls-spot-strokewidth" aria-label="Permalink to "controls.spot.strokeWidth""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>定点清扫描边宽度</p><h4 id="controls-spot-fillcolor" tabindex="-1">controls.spot.fillColor <a class="header-anchor" href="#controls-spot-fillcolor" aria-label="Permalink to "controls.spot.fillColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'rgba(93, 104, 254, 0.1)'</code></li></ul><p>定点清扫填充颜色</p><h4 id="controls-spot-showtext" tabindex="-1">controls.spot.showText <a class="header-anchor" href="#controls-spot-showtext" aria-label="Permalink to "controls.spot.showText""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示定点清扫文本（米数）</p><h4 id="controls-spot-textcolor" tabindex="-1">controls.spot.textColor <a class="header-anchor" href="#controls-spot-textcolor" aria-label="Permalink to "controls.spot.textColor""></a></h4><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#5d68fe'</code></li></ul><p>定点清扫文本颜色</p><h4 id="controls-spot-textposition" tabindex="-1">controls.spot.textPosition <a class="header-anchor" href="#controls-spot-textposition" aria-label="Permalink to "controls.spot.textPosition""></a></h4><ul><li><strong>类型</strong>: <code>'top' | 'right' | 'bottom' | 'left'</code></li><li><strong>默认值</strong>: <code>'bottom'</code></li></ul><p>定点清扫文本位置</p><h4 id="controls-spot-textoffset" tabindex="-1">controls.spot.textOffset <a class="header-anchor" href="#controls-spot-textoffset" aria-label="Permalink to "controls.spot.textOffset""></a></h4><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>8</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>定点清扫文本偏移</p><h4 id="controls-spot-namelabel" tabindex="-1">controls.spot.nameLabel <a class="header-anchor" href="#controls-spot-namelabel" aria-label="Permalink to "controls.spot.nameLabel""></a></h4><ul><li><strong>类型</strong>: <code>object</code></li><li><strong>默认值</strong>: 见下方字段说明</li></ul><p>定点清扫名称标签配置。名称标签只会在 <code>SpotParam.name?.trim()</code> 非空时显示， 展示文本为 <code>trim()</code> 后的值；<code>position</code> 和 <code>offset</code> 的语义与现有的定点清扫文本 标签一致，均以定点框为参照。</p><p>对于直接消费完整配置对象的场景，<code>controls.spot.nameLabel</code> 也是可选字段；如果 默认样式符合页面风格，可以省略该配置并使用 SDK 默认值。</p><h5 id="controls-spot-namelabel-fontsize" tabindex="-1">controls.spot.nameLabel.fontSize <a class="header-anchor" href="#controls-spot-namelabel-fontsize" aria-label="Permalink to "controls.spot.nameLabel.fontSize""></a></h5><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>12</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>名称标签字号。</p><h5 id="controls-spot-namelabel-fontfamily" tabindex="-1">controls.spot.nameLabel.fontFamily <a class="header-anchor" href="#controls-spot-namelabel-fontfamily" aria-label="Permalink to "controls.spot.nameLabel.fontFamily""></a></h5><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'system-ui, -apple-system, sans-serif'</code></li></ul><p>名称标签字体。</p><h5 id="controls-spot-namelabel-fontweight" tabindex="-1">controls.spot.nameLabel.fontWeight <a class="header-anchor" href="#controls-spot-namelabel-fontweight" aria-label="Permalink to "controls.spot.nameLabel.fontWeight""></a></h5><ul><li><strong>类型</strong>: <code>TextStyleFontWeight</code></li><li><strong>默认值</strong>: <code>'400'</code></li></ul><p>名称标签字重。</p><h5 id="controls-spot-namelabel-color" tabindex="-1">controls.spot.nameLabel.color <a class="header-anchor" href="#controls-spot-namelabel-color" aria-label="Permalink to "controls.spot.nameLabel.color""></a></h5><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#5d68fe'</code></li></ul><p>名称标签颜色。</p><h5 id="controls-spot-namelabel-position" tabindex="-1">controls.spot.nameLabel.position <a class="header-anchor" href="#controls-spot-namelabel-position" aria-label="Permalink to "controls.spot.nameLabel.position""></a></h5><ul><li><strong>类型</strong>: <code>'top' | 'right' | 'bottom' | 'left'</code></li><li><strong>默认值</strong>: <code>'top'</code></li></ul><p>名称标签位置。位置计算方式与 <code>controls.spot.textPosition</code> 一致。</p><h5 id="controls-spot-namelabel-offset" tabindex="-1">controls.spot.nameLabel.offset <a class="header-anchor" href="#controls-spot-namelabel-offset" aria-label="Permalink to "controls.spot.nameLabel.offset""></a></h5><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>-8</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>名称标签相对定点框的偏移。偏移计算方式与 <code>controls.spot.textOffset</code> 一致； 默认值会将 <code>top</code> 位置的名称标签显示在定点框上边框外侧。</p><h5 id="controls-spot-namelabel-editing-visible" tabindex="-1">controls.spot.nameLabel.editing.visible <a class="header-anchor" href="#controls-spot-namelabel-editing-visible" aria-label="Permalink to "controls.spot.nameLabel.editing.visible""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>编辑模式下是否显示名称标签。</p><h5 id="controls-spot-namelabel-normal-visible" tabindex="-1">controls.spot.nameLabel.normal.visible <a class="header-anchor" href="#controls-spot-namelabel-normal-visible" aria-label="Permalink to "controls.spot.nameLabel.normal.visible""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>普通模式下是否显示名称标签。</p><h4 id="controls-spot-editing" tabindex="-1">controls.spot.editing <a class="header-anchor" href="#controls-spot-editing" aria-label="Permalink to "controls.spot.editing""></a></h4><p>定点清扫编辑模式样式配置。</p><h5 id="controls-spot-editing-isdashed" tabindex="-1">controls.spot.editing.isDashed <a class="header-anchor" href="#controls-spot-editing-isdashed" aria-label="Permalink to "controls.spot.editing.isDashed""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>是否使用虚线边框。</p><h5 id="controls-spot-editing-dasharray" tabindex="-1">controls.spot.editing.dashArray <a class="header-anchor" href="#controls-spot-editing-dasharray" aria-label="Permalink to "controls.spot.editing.dashArray""></a></h5><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[0, 0]</code></li></ul><p>虚线边框的间距配置。</p><h5 id="controls-spot-editing-showicon" tabindex="-1">controls.spot.editing.showIcon <a class="header-anchor" href="#controls-spot-editing-showicon" aria-label="Permalink to "controls.spot.editing.showIcon""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>编辑模式下是否显示中心图标。</p><h5 id="controls-spot-editing-showframe" tabindex="-1">controls.spot.editing.showFrame <a class="header-anchor" href="#controls-spot-editing-showframe" aria-label="Permalink to "controls.spot.editing.showFrame""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>编辑模式下是否显示框体（填充和边框）。</p><h4 id="controls-spot-normal" tabindex="-1">controls.spot.normal <a class="header-anchor" href="#controls-spot-normal" aria-label="Permalink to "controls.spot.normal""></a></h4><p>定点清扫普通模式样式配置。</p><h5 id="controls-spot-normal-isdashed" tabindex="-1">controls.spot.normal.isDashed <a class="header-anchor" href="#controls-spot-normal-isdashed" aria-label="Permalink to "controls.spot.normal.isDashed""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>是否使用虚线边框。</p><h5 id="controls-spot-normal-dasharray" tabindex="-1">controls.spot.normal.dashArray <a class="header-anchor" href="#controls-spot-normal-dasharray" aria-label="Permalink to "controls.spot.normal.dashArray""></a></h5><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[0, 0]</code></li></ul><p>虚线边框的间距配置。</p><h5 id="controls-spot-normal-showicon" tabindex="-1">controls.spot.normal.showIcon <a class="header-anchor" href="#controls-spot-normal-showicon" aria-label="Permalink to "controls.spot.normal.showIcon""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>普通模式下是否显示中心图标。</p><h5 id="controls-spot-normal-showframe" tabindex="-1">controls.spot.normal.showFrame <a class="header-anchor" href="#controls-spot-normal-showframe" aria-label="Permalink to "controls.spot.normal.showFrame""></a></h5><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>普通模式下是否显示框体（填充和边框）。</p><h3 id="controls-waypoint" tabindex="-1">controls.wayPoint <a class="header-anchor" href="#controls-waypoint" aria-label="Permalink to "controls.wayPoint""></a></h3><p>途径点配置。</p><h4 id="controls-waypoint-showorder" tabindex="-1">controls.wayPoint.showOrder <a class="header-anchor" href="#controls-waypoint-showorder" aria-label="Permalink to "controls.wayPoint.showOrder""></a></h4><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>是否显示途径点序号。</p><h4 id="controls-waypoint-normal" tabindex="-1">controls.wayPoint.normal <a class="header-anchor" href="#controls-waypoint-normal" aria-label="Permalink to "controls.wayPoint.normal""></a></h4><p>途径点普通模式样式配置。</p><h5 id="controls-waypoint-normal-iconsrc" tabindex="-1">controls.wayPoint.normal.iconSrc <a class="header-anchor" href="#controls-waypoint-normal-iconsrc" aria-label="Permalink to "controls.wayPoint.normal.iconSrc""></a></h5><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>普通模式下途径点图标资源路径。</p><h5 id="controls-waypoint-normal-iconsize" tabindex="-1">controls.wayPoint.normal.iconSize <a class="header-anchor" href="#controls-waypoint-normal-iconsize" aria-label="Permalink to "controls.wayPoint.normal.iconSize""></a></h5><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>32</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>普通模式下途径点图标大小（固定屏幕像素）。</p><h5 id="controls-waypoint-normal-ordertext" tabindex="-1">controls.wayPoint.normal.orderText <a class="header-anchor" href="#controls-waypoint-normal-ordertext" aria-label="Permalink to "controls.wayPoint.normal.orderText""></a></h5><p>普通模式下序号文本样式配置。</p><h6 id="controls-waypoint-normal-ordertext-fontsize" tabindex="-1">controls.wayPoint.normal.orderText.fontSize <a class="header-anchor" href="#controls-waypoint-normal-ordertext-fontsize" aria-label="Permalink to "controls.wayPoint.normal.orderText.fontSize""></a></h6><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>10</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>序号文本字体大小。</p><h6 id="controls-waypoint-normal-ordertext-fontfamily" tabindex="-1">controls.wayPoint.normal.orderText.fontFamily <a class="header-anchor" href="#controls-waypoint-normal-ordertext-fontfamily" aria-label="Permalink to "controls.wayPoint.normal.orderText.fontFamily""></a></h6><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'system-ui, -apple-system, sans-serif'</code></li></ul><p>序号文本字体。</p><h6 id="controls-waypoint-normal-ordertext-fontweight" tabindex="-1">controls.wayPoint.normal.orderText.fontWeight <a class="header-anchor" href="#controls-waypoint-normal-ordertext-fontweight" aria-label="Permalink to "controls.wayPoint.normal.orderText.fontWeight""></a></h6><ul><li><strong>类型</strong>: <code>TextStyleFontWeight</code></li><li><strong>默认值</strong>: <code>'600'</code></li></ul><p>序号文本字体粗细。</p><h6 id="controls-waypoint-normal-ordertext-color" tabindex="-1">controls.wayPoint.normal.orderText.color <a class="header-anchor" href="#controls-waypoint-normal-ordertext-color" aria-label="Permalink to "controls.wayPoint.normal.orderText.color""></a></h6><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#8a8a8a'</code></li></ul><p>序号文本颜色。</p><h5 id="controls-waypoint-normal-ordercontainer" tabindex="-1">controls.wayPoint.normal.orderContainer <a class="header-anchor" href="#controls-waypoint-normal-ordercontainer" aria-label="Permalink to "controls.wayPoint.normal.orderContainer""></a></h5><p>普通模式下序号容器样式配置。</p><h6 id="controls-waypoint-normal-ordercontainer-size" tabindex="-1">controls.wayPoint.normal.orderContainer.size <a class="header-anchor" href="#controls-waypoint-normal-ordercontainer-size" aria-label="Permalink to "controls.wayPoint.normal.orderContainer.size""></a></h6><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>12</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>序号容器大小（圆形直径）。</p><h6 id="controls-waypoint-normal-ordercontainer-backgroundcolor" tabindex="-1">controls.wayPoint.normal.orderContainer.backgroundColor <a class="header-anchor" href="#controls-waypoint-normal-ordercontainer-backgroundcolor" aria-label="Permalink to "controls.wayPoint.normal.orderContainer.backgroundColor""></a></h6><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>序号容器背景颜色。</p><h6 id="controls-waypoint-normal-ordercontainer-offsety" tabindex="-1">controls.wayPoint.normal.orderContainer.offsetY <a class="header-anchor" href="#controls-waypoint-normal-ordercontainer-offsety" aria-label="Permalink to "controls.wayPoint.normal.orderContainer.offsetY""></a></h6><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>20</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>序号容器垂直偏移量。基准值为图标底部中心。</p><h6 id="controls-waypoint-normal-ordercontainer-offsetx" tabindex="-1">controls.wayPoint.normal.orderContainer.offsetX <a class="header-anchor" href="#controls-waypoint-normal-ordercontainer-offsetx" aria-label="Permalink to "controls.wayPoint.normal.orderContainer.offsetX""></a></h6><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>序号容器水平偏移量。基准值为图标底部中心。</p><h4 id="controls-waypoint-editing" tabindex="-1">controls.wayPoint.editing <a class="header-anchor" href="#controls-waypoint-editing" aria-label="Permalink to "controls.wayPoint.editing""></a></h4><p>途径点编辑模式样式配置。结构与 <code>normal</code> 相同，但可以设置不同的图标、尺寸和序号样式。</p><h5 id="controls-waypoint-editing-iconsrc" tabindex="-1">controls.wayPoint.editing.iconSrc <a class="header-anchor" href="#controls-waypoint-editing-iconsrc" aria-label="Permalink to "controls.wayPoint.editing.iconSrc""></a></h5><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>内置资源</code></li></ul><p>编辑模式下途径点图标资源路径。</p><h5 id="controls-waypoint-editing-iconsize" tabindex="-1">controls.wayPoint.editing.iconSize <a class="header-anchor" href="#controls-waypoint-editing-iconsize" aria-label="Permalink to "controls.wayPoint.editing.iconSize""></a></h5><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>38</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑模式下途径点图标大小。</p><h5 id="controls-waypoint-editing-ordertext" tabindex="-1">controls.wayPoint.editing.orderText <a class="header-anchor" href="#controls-waypoint-editing-ordertext" aria-label="Permalink to "controls.wayPoint.editing.orderText""></a></h5><p>编辑模式下序号文本样式配置。</p><h6 id="controls-waypoint-editing-ordertext-fontsize" tabindex="-1">controls.wayPoint.editing.orderText.fontSize <a class="header-anchor" href="#controls-waypoint-editing-ordertext-fontsize" aria-label="Permalink to "controls.wayPoint.editing.orderText.fontSize""></a></h6><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>14</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑模式序号文本字体大小。</p><h6 id="controls-waypoint-editing-ordertext-fontfamily" tabindex="-1">controls.wayPoint.editing.orderText.fontFamily <a class="header-anchor" href="#controls-waypoint-editing-ordertext-fontfamily" aria-label="Permalink to "controls.wayPoint.editing.orderText.fontFamily""></a></h6><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'system-ui, -apple-system, sans-serif'</code></li></ul><p>编辑模式序号文本字体。</p><h6 id="controls-waypoint-editing-ordertext-fontweight" tabindex="-1">controls.wayPoint.editing.orderText.fontWeight <a class="header-anchor" href="#controls-waypoint-editing-ordertext-fontweight" aria-label="Permalink to "controls.wayPoint.editing.orderText.fontWeight""></a></h6><ul><li><strong>类型</strong>: <code>TextStyleFontWeight</code></li><li><strong>默认值</strong>: <code>'600'</code></li></ul><p>编辑模式序号文本字体粗细。</p><h6 id="controls-waypoint-editing-ordertext-color" tabindex="-1">controls.wayPoint.editing.orderText.color <a class="header-anchor" href="#controls-waypoint-editing-ordertext-color" aria-label="Permalink to "controls.wayPoint.editing.orderText.color""></a></h6><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ff4444'</code></li></ul><p>编辑模式序号文本颜色。</p><h5 id="controls-waypoint-editing-ordercontainer" tabindex="-1">controls.wayPoint.editing.orderContainer <a class="header-anchor" href="#controls-waypoint-editing-ordercontainer" aria-label="Permalink to "controls.wayPoint.editing.orderContainer""></a></h5><p>编辑模式下序号容器样式配置。</p><h6 id="controls-waypoint-editing-ordercontainer-size" tabindex="-1">controls.wayPoint.editing.orderContainer.size <a class="header-anchor" href="#controls-waypoint-editing-ordercontainer-size" aria-label="Permalink to "controls.wayPoint.editing.orderContainer.size""></a></h6><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>16</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑模式序号容器大小（圆形直径）。</p><h6 id="controls-waypoint-editing-ordercontainer-backgroundcolor" tabindex="-1">controls.wayPoint.editing.orderContainer.backgroundColor <a class="header-anchor" href="#controls-waypoint-editing-ordercontainer-backgroundcolor" aria-label="Permalink to "controls.wayPoint.editing.orderContainer.backgroundColor""></a></h6><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>编辑模式序号容器背景颜色。</p><h6 id="controls-waypoint-editing-ordercontainer-offsety" tabindex="-1">controls.wayPoint.editing.orderContainer.offsetY <a class="header-anchor" href="#controls-waypoint-editing-ordercontainer-offsety" aria-label="Permalink to "controls.wayPoint.editing.orderContainer.offsetY""></a></h6><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>23</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑模式序号容器垂直偏移量。</p><h6 id="controls-waypoint-editing-ordercontainer-offsetx" tabindex="-1">controls.wayPoint.editing.orderContainer.offsetX <a class="header-anchor" href="#controls-waypoint-editing-ordercontainer-offsetx" aria-label="Permalink to "controls.wayPoint.editing.orderContainer.offsetX""></a></h6><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>0</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>编辑模式序号容器水平偏移量。</p><h2 id="customzonetypes" tabindex="-1">customZoneTypes <a class="header-anchor" href="#customzonetypes" aria-label="Permalink to "customZoneTypes""></a></h2><ul><li><strong>类型</strong>: <code>Record<string, Partial<ZoneTypeDefinition>> | undefined</code></li><li><strong>默认值</strong>: <code>undefined</code></li></ul><p>自定义矩形区域类型声明。key 为自定义类型的名称（会作为 <code>customZones</code> prop 的分组 key、<a href="/reference/runtime.html#editingcustomzoneids"><code>runtime.editingCustomZoneIds</code></a> 的分组 key、以及 <a href="/reference/callbacks.html#onclickcustomzone"><code>onClickCustomZone</code></a> 等回调的 <code>type</code> 参数），value 为该类型的样式配置。</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><ul><li>key <strong>不得</strong>与三种内置区域类型（<code>forbiddenSweepZone</code> / <code>forbiddenMopZone</code> / <code>cleanZone</code>）重名；重名会被 SDK 忽略并打印告警。</li><li>内置区域继续使用 <a href="#controls-forbiddensweepzone"><code>controls.forbiddenSweepZone</code></a> 等独立的配置节点，不在此声明。</li></ul></div><p>每个自定义类型的 value 支持的字段与 <a href="#controls-forbiddensweepzone"><code>controls.forbiddenSweepZone</code></a> 一致：<code>minSize</code> / <code>maxSize</code> / <code>strokeColor</code> / <code>strokeWidth</code> / <code>fillColor</code> / <code>iconWrapperFillColor</code> / <code>outlineOffset</code> / <code>outlineStrokeColor</code> / <code>outlineStrokeWidth</code> / <code>outlineDashed</code> / <code>outlineDashArray</code> / <code>outlineFillColor</code> / <code>showRotateButton</code> / <code>showDeleteButton</code> / <code>showScaleButton</code> / <code>showMoveButton</code> / <code>textColor</code> / <code>textPosition</code> / <code>textOffset</code> / <code>editing</code> / <code>normal</code> 等。未显式声明的字段会回退到 SDK 默认值。四个 <code>showXxxButton</code> 的语义见<a href="#edit-button-visibility">编辑按钮的可选显示</a>。</p><p><strong>示例</strong>：声明一个"宠物清洁区"类型</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span></span>
|
|
275
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{</span></span>
|
|
276
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> customZoneTypes: {</span></span>
|
|
277
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> petCleanZone: {</span></span>
|
|
278
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> minSize: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
279
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> strokeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#7c3aed'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
280
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> strokeWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
281
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fillColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'rgba(124, 58, 237, 0.15)'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
282
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> outlineStrokeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#7c3aed'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
283
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> outlineFillColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'rgba(124, 58, 237, 0.05)'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
284
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> textColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#7c3aed'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
285
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> iconWrapperFillColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#7c3aed'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
286
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
287
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
288
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
|
|
289
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> customZones</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{</span></span>
|
|
290
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> petCleanZone: [</span></span>
|
|
291
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /* ZoneParam[] */</span></span>
|
|
292
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
|
293
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
|
|
294
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onClickCustomZone</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">zone</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
295
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /* ... */</span></span>
|
|
296
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
|
|
297
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/></span></span></code></pre></div><p>更多用法参见 <a href="/guide/advanced-usage.html#自定义区域">进阶使用 · 自定义区域</a>。</p><h2 id="divider" tabindex="-1">divider <a class="header-anchor" href="#divider" aria-label="Permalink to "divider""></a></h2><p>分割线配置，控制房间分割线的样式和行为。</p><h3 id="divider-linecolor" tabindex="-1">divider.lineColor <a class="header-anchor" href="#divider-linecolor" aria-label="Permalink to "divider.lineColor""></a></h3><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ff4444'</code></li></ul><p>分割线颜色。</p><h3 id="divider-dashlinewidth" tabindex="-1">divider.dashLineWidth <a class="header-anchor" href="#divider-dashlinewidth" aria-label="Permalink to "divider.dashLineWidth""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>分割线宽度。</p><h3 id="divider-dashlinedasharray" tabindex="-1">divider.dashLineDashArray <a class="header-anchor" href="#divider-dashlinedasharray" aria-label="Permalink to "divider.dashLineDashArray""></a></h3><ul><li><strong>类型</strong>: <code>[number, number]</code></li><li><strong>默认值</strong>: <code>[4, 3]</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>分割线样式。</p><h3 id="divider-solidlinewidth" tabindex="-1">divider.solidLineWidth <a class="header-anchor" href="#divider-solidlinewidth" aria-label="Permalink to "divider.solidLineWidth""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>分割线有效部分宽度。</p><h3 id="divider-endpointsize" tabindex="-1">divider.endPointSize <a class="header-anchor" href="#divider-endpointsize" aria-label="Permalink to "divider.endPointSize""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>12</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>分割线端点的<strong>外接尺寸</strong>：圆形取直径，菱形取对角线。两种形状同口径，换形状不改变端点看上去的大小。</p><h3 id="divider-endpointshape" tabindex="-1">divider.endPointShape <a class="header-anchor" href="#divider-endpointshape" aria-label="Permalink to "divider.endPointShape""></a></h3><ul><li><strong>类型</strong>: <code>'circle' | 'diamond'</code></li><li><strong>默认值</strong>: <code>'circle'</code></li></ul><p>分割线端点形状。菱形按 <a href="#divider-endpointsize"><code>endPointSize</code></a> 的外接尺寸绘制，填充与描边沿用 <code>endPointColor</code> / <code>endPointStrokeColor</code> / <code>endPointStrokeWidth</code>，热区也与圆形一致。</p><p>菱形会反向旋转抵消地图旋转，因此地图转到任意角度它都是正菱形，不会看起来像正方形。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>端点形状在分割线创建时（<code>runtime.dividingRoomId</code> 指向某个房间时）读取，运行中改配置要重新进入分割模式才会重画。</p></div><h3 id="divider-endpointcolor" tabindex="-1">divider.endPointColor <a class="header-anchor" href="#divider-endpointcolor" aria-label="Permalink to "divider.endPointColor""></a></h3><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ff4444'</code></li></ul><p>分割线端点颜色。</p><h3 id="divider-endpointstrokecolor" tabindex="-1">divider.endPointStrokeColor <a class="header-anchor" href="#divider-endpointstrokecolor" aria-label="Permalink to "divider.endPointStrokeColor""></a></h3><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#ffffff'</code></li></ul><p>分割线端点描边颜色。</p><h3 id="divider-endpointstrokewidth" tabindex="-1">divider.endPointStrokeWidth <a class="header-anchor" href="#divider-endpointstrokewidth" aria-label="Permalink to "divider.endPointStrokeWidth""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>2</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>分割线端点描边宽度。</p><h3 id="divider-hitareathickness" tabindex="-1">divider.hitAreaThickness <a class="header-anchor" href="#divider-hitareathickness" aria-label="Permalink to "divider.hitAreaThickness""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>30</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>分割线热区厚度。</p><h3 id="divider-resetdividerwhenoutofroom" tabindex="-1">divider.resetDividerWhenOutOfRoom <a class="header-anchor" href="#divider-resetdividerwhenoutofroom" aria-label="Permalink to "divider.resetDividerWhenOutOfRoom""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>分割线越界时是否重置到初始位置。越界怎么判由 <a href="#divider-outofroomcriterion"><code>outOfRoomCriterion</code></a> 决定。</p><h3 id="divider-outofroomcriterion" tabindex="-1">divider.outOfRoomCriterion <a class="header-anchor" href="#divider-outofroomcriterion" aria-label="Permalink to "divider.outOfRoomCriterion""></a></h3><ul><li><strong>类型</strong>: <code>'boundingBox' | 'solidLine'</code></li><li><strong>默认值</strong>: <code>'boundingBox'</code></li></ul><p>越界判据。它同时决定 <a href="/reference/callbacks.html#ondivideroutofroom"><code>onDividerOutOfRoom</code></a> 何时触发与 <a href="#divider-resetdividerwhenoutofroom"><code>resetDividerWhenOutOfRoom</code></a> 何时把线弹回——两者共用一次判定，所以「回调说越界」与「分割线被重置」永远一致。</p><ul><li><code>'boundingBox'</code>（宽松）：整条线段与房间<strong>包围盒</strong>完全不相交才算越界。</li><li><code>'solidLine'</code>（严格）：<strong>算不出有效实线</strong>即算越界，也就是这条线已经切不动这个房间。判据是房间的真实填充（栅格逐像素 / 结构化轮廓），所以 L 形房间的凹口也判得准。</li></ul><p>两者是包含关系：整条线跑出包围盒必然算不出实线，反之不然。差别集中在这几种情形——</p><table tabindex="0"><thead><tr><th style="text-align:left;">分割线状态</th><th style="text-align:center;"><code>'boundingBox'</code></th><th style="text-align:center;"><code>'solidLine'</code></th></tr></thead><tbody><tr><td style="text-align:left;">端点被拖进房间内部</td><td style="text-align:center;">不算越界</td><td style="text-align:center;">算越界</td></tr><tr><td style="text-align:left;">线只擦到房间一个角（实线不足 3px）</td><td style="text-align:center;">不算越界</td><td style="text-align:center;">算越界</td></tr><tr><td style="text-align:left;">线偏出房间但仍压着包围盒</td><td style="text-align:center;">不算越界</td><td style="text-align:center;">算越界</td></tr><tr><td style="text-align:left;">线仍横穿房间</td><td style="text-align:center;">不算越界</td><td style="text-align:center;">不算越界</td></tr><tr><td style="text-align:left;">整条线跑出包围盒</td><td style="text-align:center;">算越界</td><td style="text-align:center;">算越界</td></tr></tbody></table><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>拖<strong>端点</strong>时另一个端点不动，线段绕着它扫，多数方向仍与包围盒相交——<code>'boundingBox'</code> 因此对端点拖拽很不敏感。要让端点拖拽也被判到，用 <code>'solidLine'</code>。</p></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>房间几何还没就绪时（分割线刚创建、房间图形未渲染）两种判据一律判<strong>不越界</strong>，不会把「还没画出来」误报成越界。</p></div><h3 id="divider-defaultextension" tabindex="-1">divider.defaultExtension <a class="header-anchor" href="#divider-defaultextension" aria-label="Permalink to "divider.defaultExtension""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>20</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>初始分割线端点超出房间包围盒的像素值。</p><h3 id="divider-defaultdirection" tabindex="-1">divider.defaultDirection <a class="header-anchor" href="#divider-defaultdirection" aria-label="Permalink to "divider.defaultDirection""></a></h3><ul><li><strong>类型</strong>: <code>'horizontal' | 'vertical'</code></li><li><strong>默认值</strong>: <code>'horizontal'</code></li></ul><p>初始分割线方向。</p><h2 id="detectedobject" tabindex="-1">detectedObject <a class="header-anchor" href="#detectedobject" aria-label="Permalink to "detectedObject""></a></h2><p>AI检测物体配置。</p><h3 id="detectedobject-height" tabindex="-1">detectedObject.height <a class="header-anchor" href="#detectedobject-height" aria-label="Permalink to "detectedObject.height""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>43</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>检测物体高度。</p><h3 id="detectedobject-width" tabindex="-1">detectedObject.width <a class="header-anchor" href="#detectedobject-width" aria-label="Permalink to "detectedObject.width""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>38</code></li><li><strong>单位</strong>: <code>px</code></li></ul><p>检测物体宽度。</p><h3 id="detectedobject-interactive" tabindex="-1">detectedObject.interactive <a class="header-anchor" href="#detectedobject-interactive" aria-label="Permalink to "detectedObject.interactive""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>检测物体是否可交互。</p><h3 id="detectedobject-anchor" tabindex="-1">detectedObject.anchor <a class="header-anchor" href="#detectedobject-anchor" aria-label="Permalink to "detectedObject.anchor""></a></h3><ul><li><strong>类型</strong>: <code>Point</code></li><li><strong>默认值</strong>: <code>{ x: 0.5, y: 0.5 }</code></li></ul><p>检测物体图标的锚点位置,用于控制图标相对于坐标点的对齐方式。</p><p>锚点坐标系说明:</p><ul><li><code>{x: 0, y: 0}</code> 表示左上角</li><li><code>{x: 0.5, y: 0.5}</code> 表示中心点(默认)</li><li><code>{x: 0.5, y: 1}</code> 表示底部中心(适用于气泡形状的图标)</li><li><code>{x: 1, y: 1}</code> 表示右下角</li></ul><p><strong>注意</strong>: 所有 DetectedObject 统一使用此配置中的锚点值,以确保图标规范统一。</p><p><strong>示例</strong>:</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> mapInstance</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapApplication</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
298
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config: {</span></span>
|
|
299
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> detectedObject: {</span></span>
|
|
300
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> anchor: { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 所有检测物体都使用底部中心作为锚点</span></span>
|
|
301
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
302
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
303
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h3 id="detectedobject-enableelasticscale" tabindex="-1">detectedObject.enableElasticScale <a class="header-anchor" href="#detectedobject-enableelasticscale" aria-label="Permalink to "detectedObject.enableElasticScale""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>false</code></li></ul><p>是否启用检测物体图标的弹性缩放。档位断点由 <a href="#elasticscale"><code>elasticScale.breakpoints</code></a> 定义，与房间标签共用，两者在同一刻切档。</p><h3 id="detectedobject-elasticfactors" tabindex="-1">detectedObject.elasticFactors <a class="header-anchor" href="#detectedobject-elasticfactors" aria-label="Permalink to "detectedObject.elasticFactors""></a></h3><ul><li><strong>类型</strong>: <code>number[]</code></li><li><strong>默认值</strong>: <code>[0.5, 1, 2]</code></li></ul><p>检测物体图标的各档倍数，长度须等于 <code>elasticScale.breakpoints.length + 1</code>。</p><p>倍数与房间标签分开配，而且<strong>小元素需要比大元素更大的倍数区间</strong>才看得出变化：约 120px 宽的气泡靠 <code>0.6 → 1.5</code> 就摆出 ~108px，而 38px 的图标用同样区间只摆 ~30px，在缩放的地图上读作「没动」。默认值是对着屏幕定的，不是推出来的。</p><p>默认值下，38×43 的图标在最低档到最高档之间跨 19×22 ~ 76×86 px——最高档偏大是有意的。要克制的接入方自己配小一点即可。</p><p>倍数乘在<strong>最终尺寸</strong>上，含单条数据自带的 <code>width</code> / <code>height</code>：档位是「随缩放变化」的语义，<code>width</code> / <code>height</code> 是「这个物体多大」的语义，两者正交。</p><p>长度对不上会打 warn 并<strong>整组降级为不启用</strong>（退回纯反向缩放），不会自动补齐。</p><h2 id="snapshot" tabindex="-1">snapshot <a class="header-anchor" href="#snapshot" aria-label="Permalink to "snapshot""></a></h2><p>截图配置。</p><h3 id="snapshot-format" tabindex="-1">snapshot.format <a class="header-anchor" href="#snapshot-format" aria-label="Permalink to "snapshot.format""></a></h3><ul><li><strong>类型</strong>: <code>'png' | 'jpg' | 'webp'</code></li><li><strong>默认值</strong>: <code>'png'</code></li></ul><p>截图输出格式。</p><h3 id="snapshot-quality" tabindex="-1">snapshot.quality <a class="header-anchor" href="#snapshot-quality" aria-label="Permalink to "snapshot.quality""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li></ul><p>截图质量 (0-1)。</p><h3 id="snapshot-antialias" tabindex="-1">snapshot.antialias <a class="header-anchor" href="#snapshot-antialias" aria-label="Permalink to "snapshot.antialias""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>截图是否开启抗锯齿。</p><h3 id="snapshot-resolution" tabindex="-1">snapshot.resolution <a class="header-anchor" href="#snapshot-resolution" aria-label="Permalink to "snapshot.resolution""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>4</code></li></ul><p>截图分辨率倍数。</p>`,1708)])])}const u=e(a,[["render",l]]);export{g as __pageData,u as default};
|