@ray-js/robot-map-sdk 0.0.14 → 0.0.15-beta.10

package/dist-docs/assets/chunks/{webworkerAll.D3-je4ql.js → webworkerAll.BDE--V3_.js}

@@ -1,4 +1,4 @@
-import{ac as S,ae as I,af as B,aI as O,p as F,M as w,a4 as A,a0 as E,ak as m,T as y,aA as U,X as C,w as M,aj as Y,x as P}from"./index.BLj_eQCu.js";import"./framework.CBLqO2Q1.js";import"./mapValues.D2X8cRgC.js";import"./theme.DZz2Y3xc.js";var X=`in vec2 vTextureCoord;
+import{ac as S,ae as I,af as B,aI as O,p as F,M as w,a4 as A,a0 as E,ak as m,T as y,aA as U,X as C,w as M,aj as Y,x as P}from"./index.XqZt0iXF.js";import"./framework.CBLqO2Q1.js";import"./mapValues.D2X8cRgC.js";import"./theme.BrQ0iun4.js";var X=`in vec2 vTextureCoord;
 out vec4 finalColor;
 uniform sampler2D uTexture;
 void main() {

package/dist-docs/assets/{guide_advanced-usage.md.B0nlUHzZ.js → guide_advanced-usage.md.DNWCmYfB.js}

@@ -1,4 +1,4 @@
-import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g=JSON.parse('{"title":"进阶使用","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-usage.md","filePath":"guide/advanced-usage.md","lastUpdated":1777535786000}'),l={name:"guide/advanced-usage.md"};function p(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[h(`<h1 id="进阶使用" tabindex="-1">进阶使用 <a class="header-anchor" href="#进阶使用" aria-label="Permalink to &quot;进阶使用&quot;">​</a></h1><p>Tuya Robot Map 的进阶使用，包含了我们认为的最佳实践。</p><h2 id="自适应缩放" tabindex="-1">自适应缩放 <a class="header-anchor" href="#自适应缩放" aria-label="Permalink to &quot;自适应缩放&quot;">​</a></h2><p>自适应缩放是地图 SDK 的核心功能之一，它会自动调整地图的缩放比例和位置，确保地图能够以合适的大小居中显示在视口中。</p><h3 id="什么是-scale" tabindex="-1">什么是 scale？ <a class="header-anchor" href="#什么是-scale" aria-label="Permalink to &quot;什么是 scale？&quot;">​</a></h3><p><code>scale</code> 表示地图的缩放比例。<strong><code>scale = 1</code> 表示地图按照真实像素尺寸显示</strong>。</p><p>例如，如果你的地图数据是 300×300 的尺寸：</p><ul><li><code>scale = 1</code> 时，地图会用 300×300 像素显示</li><li><code>scale = 2</code> 时，地图会放大到 600×600 像素</li><li><code>scale = 0.5</code> 时，地图会缩小到 150×150 像素</li></ul><h3 id="自适应缩放的触发时机" tabindex="-1">自适应缩放的触发时机 <a class="header-anchor" href="#自适应缩放的触发时机" aria-label="Permalink to &quot;自适应缩放的触发时机&quot;">​</a></h3><p>自适应缩放会在以下情况自动触发：</p><ol><li><strong>地图首次绘制</strong>：当地图第一次加载时</li><li><strong>地图 ID 变化</strong>：切换到不同的地图时</li><li><strong>地图状态变化</strong>：地图的 <code>status</code> 字段变化时（例如从建图中变为建图完成）</li><li><strong>地图原点变化</strong>：地图的 <code>origin</code> 坐标变化超过阈值时</li><li><strong>地图尺寸变化</strong>：地图的 <code>size</code> (宽度或高度) 变化超过阈值时</li><li><strong>地图旋转</strong>：通过 <code>runtime.mapRotation</code> 旋转地图后</li></ol><h3 id="自适应缩放的计算逻辑" tabindex="-1">自适应缩放的计算逻辑 <a class="header-anchor" href="#自适应缩放的计算逻辑" aria-label="Permalink to &quot;自适应缩放的计算逻辑&quot;">​</a></h3><p>当触发自适应缩放时，SDK 会按照以下步骤计算最终的缩放比例：</p><h4 id="_1-计算初始缩放比例" tabindex="-1">1. 计算初始缩放比例 <a class="header-anchor" href="#_1-计算初始缩放比例" aria-label="Permalink to &quot;1. 计算初始缩放比例&quot;">​</a></h4><p>SDK 会根据 <a href="/reference/config.html#map-autopaddinghorizontalpercent"><code>map.autoPaddingHorizontalPercent</code></a> 和 <a href="/reference/config.html#map-autopaddingverticalpercent"><code>map.autoPaddingVerticalPercent</code></a> 计算出一个初始的缩放比例，确保地图能够完整显示并保留指定的边距。</p><p>例如，如果视口宽度是 375px，<code>autoPaddingHorizontalPercent</code> 是 0.05（默认值），那么：</p><ul><li>水平方向的可用空间 = 375 × (1 - 0.05 × 2) = 337.5px</li><li>如果地图实际宽度是 300px，则计算出的 scale = 337.5 / 300 ≈ 1.125</li><li>如果地图实际宽度是 600px，则计算出的 scale = 337.5 / 600 ≈ 0.5625</li></ul><h4 id="_2-应用缩放比例限制" tabindex="-1">2. 应用缩放比例限制 <a class="header-anchor" href="#_2-应用缩放比例限制" aria-label="Permalink to &quot;2. 应用缩放比例限制&quot;">​</a></h4><p>计算出的初始缩放比例会受到 <a href="/reference/config.html#interaction-fitminscale"><code>interaction.fitMinScale</code></a> 和 <a href="/reference/config.html#interaction-fitmaxscale"><code>interaction.fitMaxScale</code></a> 的限制：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>最终 scale = Math.max(fitMinScale, Math.min(初始 scale, fitMaxScale))</span></span></code></pre></div><h3 id="常见问题与解决方案" tabindex="-1">常见问题与解决方案 <a class="header-anchor" href="#常见问题与解决方案" aria-label="Permalink to &quot;常见问题与解决方案&quot;">​</a></h3><h4 id="问题-1-超大地图显示不全" tabindex="-1">问题 1：超大地图显示不全 <a class="header-anchor" href="#问题-1-超大地图显示不全" aria-label="Permalink to &quot;问题 1：超大地图显示不全&quot;">​</a></h4><p><strong>现象</strong>：地图很大，但只能看到部分内容，无法看到完整地图。</p><p><strong>原因</strong>：当地图尺寸超过视口时，SDK 计算出的缩放比例可能小于 1（需要缩小地图）。但是 <code>fitMinScale</code> 的默认值是 1，会限制地图不能缩小到小于原始尺寸，导致地图无法完整显示。</p><p><strong>解决方案</strong>：将 <code>fitMinScale</code> 设置为小于 1 的值，允许地图缩小。</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;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span></span>
+import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g=JSON.parse('{"title":"进阶使用","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-usage.md","filePath":"guide/advanced-usage.md","lastUpdated":1780021074000}'),l={name:"guide/advanced-usage.md"};function p(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[h(`<h1 id="进阶使用" tabindex="-1">进阶使用 <a class="header-anchor" href="#进阶使用" aria-label="Permalink to &quot;进阶使用&quot;">​</a></h1><p>Tuya Robot Map 的进阶使用，包含了我们认为的最佳实践。</p><h2 id="自适应缩放" tabindex="-1">自适应缩放 <a class="header-anchor" href="#自适应缩放" aria-label="Permalink to &quot;自适应缩放&quot;">​</a></h2><p>自适应缩放是地图 SDK 的核心功能之一，它会自动调整地图的缩放比例和位置，确保地图能够以合适的大小居中显示在视口中。</p><h3 id="什么是-scale" tabindex="-1">什么是 scale？ <a class="header-anchor" href="#什么是-scale" aria-label="Permalink to &quot;什么是 scale？&quot;">​</a></h3><p><code>scale</code> 表示地图的缩放比例。<strong><code>scale = 1</code> 表示地图按照真实像素尺寸显示</strong>。</p><p>例如，如果你的地图数据是 300×300 的尺寸：</p><ul><li><code>scale = 1</code> 时，地图会用 300×300 像素显示</li><li><code>scale = 2</code> 时，地图会放大到 600×600 像素</li><li><code>scale = 0.5</code> 时，地图会缩小到 150×150 像素</li></ul><h3 id="自适应缩放的触发时机" tabindex="-1">自适应缩放的触发时机 <a class="header-anchor" href="#自适应缩放的触发时机" aria-label="Permalink to &quot;自适应缩放的触发时机&quot;">​</a></h3><p>自适应缩放会在以下情况自动触发：</p><ol><li><strong>地图首次绘制</strong>：当地图第一次加载时</li><li><strong>地图 ID 变化</strong>：切换到不同的地图时</li><li><strong>地图状态变化</strong>：地图的 <code>status</code> 字段变化时（例如从建图中变为建图完成）</li><li><strong>地图原点变化</strong>：地图的 <code>origin</code> 坐标变化超过阈值时</li><li><strong>地图尺寸变化</strong>：地图的 <code>size</code> (宽度或高度) 变化超过阈值时</li><li><strong>地图旋转</strong>：通过 <code>runtime.mapRotation</code> 旋转地图后</li></ol><h3 id="自适应缩放的计算逻辑" tabindex="-1">自适应缩放的计算逻辑 <a class="header-anchor" href="#自适应缩放的计算逻辑" aria-label="Permalink to &quot;自适应缩放的计算逻辑&quot;">​</a></h3><p>当触发自适应缩放时，SDK 会按照以下步骤计算最终的缩放比例：</p><h4 id="_1-计算初始缩放比例" tabindex="-1">1. 计算初始缩放比例 <a class="header-anchor" href="#_1-计算初始缩放比例" aria-label="Permalink to &quot;1. 计算初始缩放比例&quot;">​</a></h4><p>SDK 会根据 <a href="/reference/config.html#map-autopaddinghorizontalpercent"><code>map.autoPaddingHorizontalPercent</code></a> 和 <a href="/reference/config.html#map-autopaddingverticalpercent"><code>map.autoPaddingVerticalPercent</code></a> 计算出一个初始的缩放比例，确保地图能够完整显示并保留指定的边距。</p><p>例如，如果视口宽度是 375px，<code>autoPaddingHorizontalPercent</code> 是 0.05（默认值），那么：</p><ul><li>水平方向的可用空间 = 375 × (1 - 0.05 × 2) = 337.5px</li><li>如果地图实际宽度是 300px，则计算出的 scale = 337.5 / 300 ≈ 1.125</li><li>如果地图实际宽度是 600px，则计算出的 scale = 337.5 / 600 ≈ 0.5625</li></ul><h4 id="_2-应用缩放比例限制" tabindex="-1">2. 应用缩放比例限制 <a class="header-anchor" href="#_2-应用缩放比例限制" aria-label="Permalink to &quot;2. 应用缩放比例限制&quot;">​</a></h4><p>计算出的初始缩放比例会受到 <a href="/reference/config.html#interaction-fitminscale"><code>interaction.fitMinScale</code></a> 和 <a href="/reference/config.html#interaction-fitmaxscale"><code>interaction.fitMaxScale</code></a> 的限制：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>最终 scale = Math.max(fitMinScale, Math.min(初始 scale, fitMaxScale))</span></span></code></pre></div><h3 id="常见问题与解决方案" tabindex="-1">常见问题与解决方案 <a class="header-anchor" href="#常见问题与解决方案" aria-label="Permalink to &quot;常见问题与解决方案&quot;">​</a></h3><h4 id="问题-1-超大地图显示不全" tabindex="-1">问题 1：超大地图显示不全 <a class="header-anchor" href="#问题-1-超大地图显示不全" aria-label="Permalink to &quot;问题 1：超大地图显示不全&quot;">​</a></h4><p><strong>现象</strong>：地图很大，但只能看到部分内容，无法看到完整地图。</p><p><strong>原因</strong>：当地图尺寸超过视口时，SDK 计算出的缩放比例可能小于 1（需要缩小地图）。但是 <code>fitMinScale</code> 的默认值是 1，会限制地图不能缩小到小于原始尺寸，导致地图无法完整显示。</p><p><strong>解决方案</strong>：将 <code>fitMinScale</code> 设置为小于 1 的值，允许地图缩小。</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;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span></span>
 <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>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    interaction: {</span></span>
 <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // 允许地图缩小到原始尺寸的 50%</span></span>
@@ -418,13 +418,14 @@ import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g
 <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      onRemoveCustomZone</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{handleRemoveCustomZone}</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    /&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  )</span></span>
-<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>controls.forbiddenSweepZone</code> 等内置区域一致（<code>strokeColor</code> / <code>fillColor</code> / <code>minSize</code> / <code>maxSize</code> / <code>editing</code> / <code>normal</code> 等），未声明的字段会回退到 SDK 默认值。</p></div><h3 id="定点框" tabindex="-1">定点框 <a class="header-anchor" href="#定点框" aria-label="Permalink to &quot;定点框&quot;">​</a></h3><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:#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;"> &#39;react&#39;</span></span>
+<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>controls.forbiddenSweepZone</code> 等内置区域一致（<code>strokeColor</code> / <code>fillColor</code> / <code>minSize</code> / <code>maxSize</code> / <code>editing</code> / <code>normal</code> 等），未声明的字段会回退到 SDK 默认值。</p></div><h3 id="定点框" tabindex="-1">定点框 <a class="header-anchor" href="#定点框" aria-label="Permalink to &quot;定点框&quot;">​</a></h3><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:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { useState } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { RobotMap, SpotParam } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@ray-js/robot-map&#39;</span></span>
 <span class="line"></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapPage</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;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
 <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;">spots</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setSpots</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;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">SpotParam</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]&gt;([</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;spot&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;主卧床边&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      point: { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ])</span></span>
@@ -451,6 +452,16 @@ import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            strokeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#5d68fe&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
 <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>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            fillColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(93, 104, 254, 0.1)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            nameLabel: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">              fontSize: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">              fontFamily: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Arial&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">              fontWeight: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;500&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">              color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#5d68fe&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">              position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;top&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">              offset: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">              editing: { visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">              normal: { visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            },</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          },</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        },</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }}</span></span>
@@ -524,7 +535,19 @@ import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Button</span><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;">{handleAddVirtualWall}&gt;新增虚拟墙&lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">View</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  )</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="房间信息" tabindex="-1">房间信息 <a class="header-anchor" href="#房间信息" aria-label="Permalink to &quot;房间信息&quot;">​</a></h2><h3 id="数据处理" tabindex="-1">数据处理 <a class="header-anchor" href="#数据处理" aria-label="Permalink to &quot;数据处理&quot;">​</a></h3><p>房间信息的展示完全受控于你传入的 <code>roomProperties</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:#6A737D;--shiki-dark:#6A737D;">// 房间属性类型</span></span>
+<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 &quot;基于任意中心点生成矩形顶点&quot;">​</a></h3><p>除了 <code>*ByViewportCenter</code> 家族默认使用视口中心外，SDK 还提供通用方法 <code>getRectPointsByCenter</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;"> robot</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mapApi.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">snapshot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().robot</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> points</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mapApi.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getRectPointsByCenter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  center: { x: robot.x, y: robot.y }, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 机器人位置，地图坐标系</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,                            </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 米</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  height: </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:#6A737D;--shiki-dark:#6A737D;">// 米</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // applyMapRotation 默认 true，矩形在屏幕上视觉保持正放；</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 如果你只需要地图坐标系下的轴对齐矩形，传 false。</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setCustomZones</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">customZones,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  { id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;newZone&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;custom&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, points },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div><h2 id="房间信息" tabindex="-1">房间信息 <a class="header-anchor" href="#房间信息" aria-label="Permalink to &quot;房间信息&quot;">​</a></h2><h3 id="数据处理" tabindex="-1">数据处理 <a class="header-anchor" href="#数据处理" aria-label="Permalink to &quot;数据处理&quot;">​</a></h3><p>房间信息的展示完全受控于你传入的 <code>roomProperties</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:#6A737D;--shiki-dark:#6A737D;">// 房间属性类型</span></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RoomProperty</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
 <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  /** 房间唯一标识符 */</span></span>
 <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  id</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span></span>
@@ -921,7 +944,23 @@ import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g
 <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // ... 其他属性</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    /&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  )</span></span>
-<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 &quot;编辑地毯&quot;">​</a></h3><p>通过 <code>runtime.editingCarpetIds</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:#6F42C1;--shiki-dark:#B392F0;"> MapPage</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;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<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 &quot;在视口中心创建地毯&quot;">​</a></h3><p>你可以通过 <code>getCustomCarpetPointsByViewportCenter()</code> 生成一组四点坐标， 再由业务层自己补 <code>id</code>、<code>type</code> 和 <code>shape</code>。同一组 <code>points</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:#6F42C1;--shiki-dark:#B392F0;"> handleAddCarpet</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;">shape</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;rectangle&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;round&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> points</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mapApi.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getCustomCarpetPointsByViewportCenter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    height: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    offsetX: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  })</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  setCustomCarpets</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">prev</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">prev,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`carpet-\${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">prev</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      type: selectedMaterialType,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      shape,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      points,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ])</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p><code>shape: &#39;custom&#39;</code> 仍然需要业务层自行提供多边形顶点，这个 helper 不会 生成自定义轮廓。</p><h3 id="编辑地毯" tabindex="-1">编辑地毯 <a class="header-anchor" href="#编辑地毯" aria-label="Permalink to &quot;编辑地毯&quot;">​</a></h3><p>通过 <code>runtime.editingCarpetIds</code> 控制哪些地毯处于编辑状态。编辑模式下，地毯会显示删除、旋转和缩放控制按钮，用户可以通过手势进行拖拽移动。<code>controls.carpet.rotateMode</code> 用于切换点击旋转 90 度和按住拖动连续旋转；<code>controls.carpet.scaleMode</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:#6F42C1;--shiki-dark:#B392F0;"> MapPage</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;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
 <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;">customCarpets</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setCustomCarpets</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;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">CustomCarpetParam</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]&gt;([</span></span>
 <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // ...</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ])</span></span>
@@ -972,7 +1011,7 @@ import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;c1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, shape: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rectangle&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, points: [</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] },</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;c2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, shape: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;round&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, points: [</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] },</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]}</span></span>
-<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li><code>rectangle</code> 和 <code>round</code> 形状支持旋转和缩放；<code>custom</code>（自定义多边形）仅支持拖拽移动。</li><li>地毯尺寸由 <a href="/reference/config.html#controls-carpet-minsize"><code>controls.carpet.minSize</code></a>（默认 1 米）和可选的 <a href="/reference/config.html#controls-carpet-maxsize"><code>controls.carpet.maxSize</code></a>（默认不限制）控制。</li><li>编辑模式需要同时设置 <code>config.carpet.enableEdit: true</code> 和 <code>runtime.editingCarpetIds</code>。</li></ul></div><h3 id="相关配置" tabindex="-1">相关配置 <a class="header-anchor" href="#相关配置" aria-label="Permalink to &quot;相关配置&quot;">​</a></h3><table tabindex="0"><thead><tr><th>配置</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><a href="/reference/config.html#carpet-src"><code>carpet.src</code></a></td><td>内置资源</td><td>默认地毯贴图</td></tr><tr><td><a href="/reference/config.html#carpet-opacity"><code>carpet.opacity</code></a></td><td><code>0.5</code></td><td>贴图透明度</td></tr><tr><td><a href="/reference/config.html#carpet-scale"><code>carpet.scale</code></a></td><td><code>0.2</code></td><td>贴图缩放比例</td></tr><tr><td><a href="/reference/config.html#carpet-material"><code>carpet.material</code></a></td><td>-</td><td>按类型配置不同贴图素材</td></tr><tr><td><a href="/reference/config.html#carpet-enableedit"><code>carpet.enableEdit</code></a></td><td><code>false</code></td><td>是否启用编辑功能</td></tr><tr><td><a href="/reference/config.html#controls-carpet-minsize"><code>controls.carpet.minSize</code></a></td><td><code>1</code></td><td>最小尺寸（米）</td></tr><tr><td><a href="/reference/config.html#controls-carpet-maxsize"><code>controls.carpet.maxSize</code></a></td><td><code>undefined</code></td><td>最大尺寸（米，可选）</td></tr><tr><td><a href="/reference/config.html#controls-carpet-fillcolor"><code>controls.carpet.fillColor</code></a></td><td><code>rgba(93,104,254,0.1)</code></td><td>编辑区域填充色</td></tr><tr><td><a href="/reference/config.html#controls-carpet-strokecolor"><code>controls.carpet.strokeColor</code></a></td><td><code>#5d68fe</code></td><td>编辑区域边框色</td></tr></tbody></table><h2 id="自定义元素" tabindex="-1">自定义元素 <a class="header-anchor" href="#自定义元素" aria-label="Permalink to &quot;自定义元素&quot;">​</a></h2><p>你可以在地图上显示自定义的元素，它们完全受控于 <code>customElements</code> 中的数据。</p><p>目前支持自定义的元素有：</p><ul><li>图片</li><li>GIF</li><li>HTML</li></ul><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;"> &#39;react&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li><code>rectangle</code> 和 <code>round</code> 形状支持旋转和缩放；<code>custom</code>（自定义多边形）仅显示删除按钮，旋转、缩放、移动和辅助缩放按钮都会隐藏。</li><li>地毯尺寸由 <a href="/reference/config.html#controls-carpet-minsize"><code>controls.carpet.minSize</code></a>（默认 1 米）和可选的 <a href="/reference/config.html#controls-carpet-maxsize"><code>controls.carpet.maxSize</code></a>（默认不限制）控制。</li><li>编辑模式需要同时设置 <code>config.carpet.enableEdit: true</code> 和 <code>runtime.editingCarpetIds</code>。</li><li><a href="/reference/config.html#controls-carpet-rotatemode"><code>controls.carpet.rotateMode</code></a> 默认为 <code>step</code>；设置为 <code>free</code> 后，旋转按钮改为按住拖动连续旋转。</li><li><a href="/reference/config.html#controls-carpet-scalemode"><code>controls.carpet.scaleMode</code></a> 默认为 <code>ratioLocked</code>；设置为 <code>free</code> 后，右下角按钮改为自由缩放，并隐藏横向、纵向辅助缩放按钮。</li></ul></div><h3 id="相关配置" tabindex="-1">相关配置 <a class="header-anchor" href="#相关配置" aria-label="Permalink to &quot;相关配置&quot;">​</a></h3><table tabindex="0"><thead><tr><th>配置</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><a href="/reference/config.html#carpet-src"><code>carpet.src</code></a></td><td>内置资源</td><td>默认地毯贴图</td></tr><tr><td><a href="/reference/config.html#carpet-opacity"><code>carpet.opacity</code></a></td><td><code>0.5</code></td><td>贴图透明度</td></tr><tr><td><a href="/reference/config.html#carpet-scale"><code>carpet.scale</code></a></td><td><code>0.2</code></td><td>贴图缩放比例</td></tr><tr><td><a href="/reference/config.html#carpet-material"><code>carpet.material</code></a></td><td>-</td><td>按类型配置不同贴图素材</td></tr><tr><td><a href="/reference/config.html#carpet-enableedit"><code>carpet.enableEdit</code></a></td><td><code>false</code></td><td>是否启用编辑功能</td></tr><tr><td><a href="/reference/config.html#controls-carpet-minsize"><code>controls.carpet.minSize</code></a></td><td><code>1</code></td><td>最小尺寸（米）</td></tr><tr><td><a href="/reference/config.html#controls-carpet-maxsize"><code>controls.carpet.maxSize</code></a></td><td><code>undefined</code></td><td>最大尺寸（米，可选）</td></tr><tr><td><a href="/reference/config.html#controls-carpet-iconwrapperfillcolor"><code>controls.carpet.iconWrapperFillColor</code></a></td><td><code>&#39;#5d68fe&#39;</code></td><td>非删除按钮背景色</td></tr><tr><td><a href="/reference/config.html#controls-carpet-deleteiconwrapperfillcolor"><code>controls.carpet.deleteIconWrapperFillColor</code></a></td><td><code>&#39;#ff4444&#39;</code></td><td>删除按钮背景色</td></tr><tr><td><a href="/reference/config.html#controls-carpet-rotatemode"><code>controls.carpet.rotateMode</code></a></td><td><code>&#39;step&#39;</code></td><td>旋转按钮交互模式</td></tr><tr><td><a href="/reference/config.html#controls-carpet-scalemode"><code>controls.carpet.scaleMode</code></a></td><td><code>&#39;ratioLocked&#39;</code></td><td>右下角缩放按钮交互模式</td></tr><tr><td><a href="/reference/config.html#controls-carpet-fillcolor"><code>controls.carpet.fillColor</code></a></td><td><code>rgba(93,104,254,0.1)</code></td><td>编辑区域填充色</td></tr></tbody></table><h2 id="自定义元素" tabindex="-1">自定义元素 <a class="header-anchor" href="#自定义元素" aria-label="Permalink to &quot;自定义元素&quot;">​</a></h2><p>你可以在地图上显示自定义的元素，它们完全受控于 <code>customElements</code> 中的数据。</p><p>目前支持自定义的元素有：</p><ul><li>图片</li><li>GIF</li><li>HTML</li></ul><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;"> &#39;react&#39;</span></span>
 <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;"> &#39;@ray-js/robot-map&#39;</span></span>
 <span class="line"></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapPage</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;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
@@ -1123,4 +1162,4 @@ import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (mapApi) {</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    mapApi.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">forceEndGesture</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
-<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>地图 SDK 内部已针对双指缩放时的快速松手做了防抖缓冲处理，搭配上述方案可获得最佳手势体验。</p></div>`,235)])])}const y=i(l,[["render",p]]);export{g as __pageData,y as default};
+<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>地图 SDK 内部已针对双指缩放时的快速松手做了防抖缓冲处理，搭配上述方案可获得最佳手势体验。</p></div>`,242)])])}const y=i(l,[["render",p]]);export{g as __pageData,y as default};

package/dist-docs/assets/{guide_advanced-usage.md.B0nlUHzZ.lean.js → guide_advanced-usage.md.DNWCmYfB.lean.js}

@@ -1 +1 @@
-import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g=JSON.parse('{"title":"进阶使用","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-usage.md","filePath":"guide/advanced-usage.md","lastUpdated":1777535786000}'),l={name:"guide/advanced-usage.md"};function p(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[h("",235)])])}const y=i(l,[["render",p]]);export{g as __pageData,y as default};
+import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g=JSON.parse('{"title":"进阶使用","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced-usage.md","filePath":"guide/advanced-usage.md","lastUpdated":1780021074000}'),l={name:"guide/advanced-usage.md"};function p(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[h("",242)])])}const y=i(l,[["render",p]]);export{g as __pageData,y as default};

package/dist-docs/assets/{guide_getting-started.md.BxrBbc12.js → guide_getting-started.md.BuIxcYrc.js}

@@ -1,4 +1,4 @@
-import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g=JSON.parse('{"title":"快速开始","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md","filePath":"guide/getting-started.md","lastUpdated":1770804529000}'),p={name:"guide/getting-started.md"};function l(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[h(`<h1 id="快速开始" tabindex="-1">快速开始 <a class="header-anchor" href="#快速开始" aria-label="Permalink to &quot;快速开始&quot;">​</a></h1><p>Tuya Robot Map 提供了开箱即用的 React 组件，专为扫地机器人应用设计。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to &quot;安装&quot;">​</a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-sdZaA" id="tab-isg3IA9" checked><label data-title="yarn" for="tab-isg3IA9">yarn</label><input type="radio" name="group-sdZaA" id="tab-Hah_Fnj"><label data-title="npm" for="tab-Hah_Fnj">npm</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @ray-js/robot-map</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @ray-js/robot-map</span></span></code></pre></div></div></div><h2 id="数据传入" tabindex="-1">数据传入 <a class="header-anchor" href="#数据传入" aria-label="Permalink to &quot;数据传入&quot;">​</a></h2><p>仅需传入几个基本的数据props，即可完成地图的呈现。</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-bkhHo" id="tab-ReZharn" checked><label data-title="点阵协议地图数据" for="tab-ReZharn">点阵协议地图数据</label><input type="radio" name="group-bkhHo" id="tab--jS-9ol"><label data-title="结构化协议地图数据" for="tab--jS-9ol">结构化协议地图数据</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active"><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, { useMemo } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
+import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g=JSON.parse('{"title":"快速开始","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md","filePath":"guide/getting-started.md","lastUpdated":1770804529000}'),p={name:"guide/getting-started.md"};function l(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[h(`<h1 id="快速开始" tabindex="-1">快速开始 <a class="header-anchor" href="#快速开始" aria-label="Permalink to &quot;快速开始&quot;">​</a></h1><p>Tuya Robot Map 提供了开箱即用的 React 组件，专为扫地机器人应用设计。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to &quot;安装&quot;">​</a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-uY_Ym" id="tab-e8XzhBF" checked><label data-title="yarn" for="tab-e8XzhBF">yarn</label><input type="radio" name="group-uY_Ym" id="tab-DEjuHix"><label data-title="npm" for="tab-DEjuHix">npm</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @ray-js/robot-map</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @ray-js/robot-map</span></span></code></pre></div></div></div><h2 id="数据传入" tabindex="-1">数据传入 <a class="header-anchor" href="#数据传入" aria-label="Permalink to &quot;数据传入&quot;">​</a></h2><p>仅需传入几个基本的数据props，即可完成地图的呈现。</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-KCsid" id="tab-fMz0AH-" checked><label data-title="点阵协议地图数据" for="tab-fMz0AH-">点阵协议地图数据</label><input type="radio" name="group-KCsid" id="tab-1hPi5JD"><label data-title="结构化协议地图数据" for="tab-1hPi5JD">结构化协议地图数据</label></div><div class="blocks"><div class="language-tsx vp-adaptive-theme active"><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, { useMemo } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span></span>
 <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;"> &#39;@ray-js/robot-map&#39;</span></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { decodeRoomProperties } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@ray-js/robot-map&#39;</span></span>
 <span class="line"></span>