@ray-js/robot-map-sdk 0.0.17-beta.4 → 0.0.17-beta.6

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.
Files changed (48) hide show
  1. package/dist/index.rjs.js +1 -1
  2. package/dist-app/assets/index-DPMQ-Izq.js +1 -0
  3. package/dist-app/index.html +1 -1
  4. package/dist-docs/404.html +2 -2
  5. package/dist-docs/assets/{app.C5xCc25N.js → app.Cwwjhfv-.js} +1 -1
  6. package/dist-docs/assets/chunks/@localSearchIndexroot.DX09zKNQ.js +1 -0
  7. package/dist-docs/assets/chunks/{BitmapFont.CfNZJWQu.js → BitmapFont.B-IfRDQk.js} +1 -1
  8. package/dist-docs/assets/chunks/{BufferResource.U7KmcJEb.js → BufferResource.CSAKqlzf.js} +1 -1
  9. package/dist-docs/assets/chunks/{CanvasRenderer.V8PvjkXK.js → CanvasRenderer.MDV1Xxi4.js} +1 -1
  10. package/dist-docs/assets/chunks/{RenderTargetSystem.CIN4IDnj.js → RenderTargetSystem.g57-QZWo.js} +1 -1
  11. package/dist-docs/assets/chunks/{VPLocalSearchBox.BXtgZMz6.js → VPLocalSearchBox.Ddw3Wr6t.js} +1 -1
  12. package/dist-docs/assets/chunks/{WebGLRenderer.9sqpUvol.js → WebGLRenderer.BkDOpZPC.js} +1 -1
  13. package/dist-docs/assets/chunks/{WebGPURenderer.B8iy8W66.js → WebGPURenderer.BwHfcpIa.js} +1 -1
  14. package/dist-docs/assets/chunks/{browserAll.Curl4kc3.js → browserAll.Bwww-soc.js} +1 -1
  15. package/dist-docs/assets/chunks/{index.BPYuggut.js → index.ChgcAKwM.js} +20 -20
  16. package/dist-docs/assets/chunks/{theme.DdcAePki.js → theme.BLq0Vss6.js} +3 -3
  17. package/dist-docs/assets/chunks/{webworkerAll.9SOLh1Dq.js → webworkerAll.D7ZfSazD.js} +1 -1
  18. package/dist-docs/assets/{guide_advanced-usage.md.BsGRhEuG.js → guide_advanced-usage.md.BrP4iZb-.js} +141 -79
  19. package/dist-docs/assets/{guide_advanced-usage.md.BsGRhEuG.lean.js → guide_advanced-usage.md.BrP4iZb-.lean.js} +1 -1
  20. package/dist-docs/assets/{guide_getting-started.md.Ca_k5NRJ.js → guide_getting-started.md.DOtxbNfK.js} +1 -1
  21. package/dist-docs/guide/advanced-usage.html +144 -82
  22. package/dist-docs/guide/concepts.html +3 -3
  23. package/dist-docs/guide/getting-started.html +5 -5
  24. package/dist-docs/guide/mcp.html +3 -3
  25. package/dist-docs/guide/spot-room-binding.html +3 -3
  26. package/dist-docs/hashmap.json +1 -1
  27. package/dist-docs/index.html +3 -3
  28. package/dist-docs/plans/2026-03-04-detected-objects-visibility-design.html +3 -3
  29. package/dist-docs/plans/2026-03-04-show-detected-objects-implementation-plan.html +3 -3
  30. package/dist-docs/plans/2026-03-10-simulator-debug-design.html +3 -3
  31. package/dist-docs/plans/2026-03-10-simulator-events-console-design.html +3 -3
  32. package/dist-docs/plans/2026-03-10-simulator-events-console-implementation-plan.html +3 -3
  33. package/dist-docs/plans/2026-03-10-simulator-runtime-controls-design.html +3 -3
  34. package/dist-docs/plans/2026-03-10-simulator-runtime-controls-implementation-plan.html +3 -3
  35. package/dist-docs/plans/2026-03-10-testing-rollout-next-steps-plan.html +3 -3
  36. package/dist-docs/plans/2026-03-11-simulator-logger-dump-implementation-plan.html +3 -3
  37. package/dist-docs/reference/callbacks.html +3 -3
  38. package/dist-docs/reference/config.html +3 -3
  39. package/dist-docs/reference/data.html +3 -3
  40. package/dist-docs/reference/methods.html +3 -3
  41. package/dist-docs/reference/runtime.html +3 -3
  42. package/dist-docs/reference/types.html +3 -3
  43. package/dist-docs/reference/utils.html +3 -3
  44. package/dist-docs/simulator/index.html +3 -3
  45. package/package.json +1 -1
  46. package/dist-app/assets/index-Bju2ykDd.js +0 -1
  47. package/dist-docs/assets/chunks/@localSearchIndexroot.JKj3B6eW.js +0 -1
  48. /package/dist-docs/assets/{guide_getting-started.md.Ca_k5NRJ.lean.js → guide_getting-started.md.DOtxbNfK.lean.js} +0 -0
package/dist-docs/assets/chunks/{webworkerAll.9SOLh1Dq.js → webworkerAll.D7ZfSazD.js} RENAMED
@@ -1,4 +1,4 @@
1
- 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.BPYuggut.js";import"./framework.CBLqO2Q1.js";import"./mapValues.D2X8cRgC.js";import"./theme.DdcAePki.js";var X=`in vec2 vTextureCoord;
1
+ 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.ChgcAKwM.js";import"./framework.CBLqO2Q1.js";import"./mapValues.D2X8cRgC.js";import"./theme.BLq0Vss6.js";var X=`in vec2 vTextureCoord;
2
2
  out vec4 finalColor;
3
3
  uniform sampler2D uTexture;
4
4
  void main() {
package/dist-docs/assets/{guide_advanced-usage.md.BsGRhEuG.js → guide_advanced-usage.md.BrP4iZb-.js} RENAMED
@@ -1,4 +1,4 @@
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":1785747127000}'),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>
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":1786102219000}'),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>
2
2
  <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>
3
3
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> interaction: {</span></span>
4
4
  <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 允许地图缩小到原始尺寸的 50%</span></span>
@@ -284,82 +284,7 @@ import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g
284
284
  <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onClickVirtualWall</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{handleClickVirtualWall}</span></span>
285
285
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
286
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></code></pre></div><h3 id="门槛" tabindex="-1">门槛 <a class="header-anchor" href="#门槛" aria-label="Permalink to &quot;门槛&quot;">​</a></h3><p>门槛分为可通行（<code>passable</code>）与不可通行（<code>impassable</code>）两种类型，数据由四个角点（<code>points</code>，顺时针 左上→右上→右下→左下，与禁区同序）与类型（<code>type</code>）构成。编辑交互通过 <code>editingThresholdIds</code> 门控，列入的门槛显示删除 / 旋转 / 缩放 / 移动控件。</p><div class="warning custom-block"><p class="custom-block-title">数据格式变更</p><p>0.0.18 起门槛数据由「中心线两点 + <code>height</code>」改为四角坐标（与主流厂商协议对齐）。传入两个点的旧数据会被丢弃并打一条 warn 日志，不再渲染；<code>controls.threshold.defaultHeight</code> 同时被移除。</p></div><p>新建门槛不用自己算四个角：<a href="/reference/methods.html#getthresholdpointsbyviewportcenter"><code>getThresholdPointsByViewportCenter()</code></a> 在当前视口中心生成一条门槛的角点，缺省 1m × 0.15m（长 × 厚），可传 <code>width</code> / <code>height</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:#6A737D;--shiki-dark:#6A737D;">// 例：用户点「添加门槛」时在视口中心放一条默认尺寸的门槛</span></span>
288
- <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:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mapApi.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getThresholdPointsByViewportCenter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
289
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setThresholds</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;">thresholds, { id: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">nextId</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), points, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;passable&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }])</span></span></code></pre></div><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>
290
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { RobotMap, ThresholdParam } </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>
291
- <span class="line"></span>
292
- <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>
293
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 将设备上报的门槛数据绘制到地图上</span></span>
294
- <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;">thresholds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setThresholds</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;">ThresholdParam</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]&gt;([</span></span>
295
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
296
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;threshold1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
297
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 四角坐标：顶点 0→1 为长度方向，0→3 为厚度方向</span></span>
298
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> points: [</span></span>
299
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { 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:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
300
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
301
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
302
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { 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;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
303
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
304
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;impassable&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 可选，缺省 &#39;passable&#39;</span></span>
305
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
306
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ])</span></span>
307
- <span class="line"></span>
308
- <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;">editingThresholdIds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setEditingThresholdIds</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:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]&gt;([])</span></span>
309
- <span class="line"></span>
310
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 点击门槛删除按钮时触发（宿主收窄数据后重绘）</span></span>
311
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleRemoveThreshold</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;">id</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</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>
312
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setThresholds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(thresholds.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</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;"> item.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id))</span></span>
313
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
314
- <span class="line"></span>
315
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 手势操作门槛（旋转 / 缩放 / 移动）结束后触发</span></span>
316
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleUpdateThreshold</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;">threshold</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ThresholdParam</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>
317
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 强烈建议在 onUpdate 回调中更新业务侧的数据</span></span>
318
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setThresholds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
319
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> thresholds.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</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;"> (item.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> threshold.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> threshold </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item)),</span></span>
320
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
321
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
322
- <span class="line"></span>
323
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 点击门槛时触发</span></span>
324
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleClickThreshold</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;">threshold</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ThresholdParam</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>
325
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</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;">editingThresholdIds.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(threshold.id)) {</span></span>
326
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 非编辑态点击 → 进入编辑态</span></span>
327
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setEditingThresholdIds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([threshold.id])</span></span>
328
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span></span>
329
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
330
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 编辑态点击 → 翻转 type 后重绘，同一门槛原地换肤</span></span>
331
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> nextType</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> threshold.type </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;passable&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;impassable&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;passable&#39;</span></span>
332
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setThresholds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
333
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> thresholds.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span></span>
334
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> threshold.id </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:#24292E;--shiki-dark:#E1E4E8;">item, type: nextType } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item,</span></span>
335
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ),</span></span>
336
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
337
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
338
- <span class="line"></span>
339
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
340
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span></span>
341
- <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>
342
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> controls: {</span></span>
343
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> threshold: {</span></span>
344
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 长度与厚度的米区间（缩放到临界值即停）</span></span>
345
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> minLength: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
346
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> maxLength: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
347
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> minHeight: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
348
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> maxHeight: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
349
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ... 其他配置见 config 参考</span></span>
350
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
351
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
352
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
353
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> runtime</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{</span></span>
354
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> editingThresholdIds,</span></span>
355
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
356
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> thresholds</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{thresholds}</span></span>
357
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onRemoveThreshold</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{handleRemoveThreshold}</span></span>
358
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onUpdateThreshold</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{handleUpdateThreshold}</span></span>
359
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onClickThreshold</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{handleClickThreshold}</span></span>
360
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
361
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
362
- <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>只读展示设备识别的门槛时，不把它们的 id 放进 <code>editingThresholdIds</code> 即可。</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:#6A737D;--shiki-dark:#6A737D;">// 以禁扫区域为例</span></span>
287
+ <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>禁扫区域、禁拖区域和清扫划区都是由四个顶点坐标构成的矩形区域，各自具有独立的配置、参数和方法。</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:#6A737D;--shiki-dark:#6A737D;">// 以禁扫区域为例</span></span>
363
288
  <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>
364
289
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { RobotMap, ZoneParam } </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>
365
290
  <span class="line"></span>
@@ -548,7 +473,144 @@ import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g
548
473
  <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onClickSpot</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{handleClickSpot}</span></span>
549
474
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
550
475
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
551
- <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><ul><li><p>虽然在设计上是纯受控的，但地图控制元素在手势操作时会先在内部实时进行更新，并在手势结束后通过 <code>onUpdate</code> 回调抛出最新的数据。</p></li><li><p>为保证一致性，我们强烈建议始终在 <code>onUpdate</code> 回调更新业务侧的数据。这个更新不会产生额外的渲染，你无需担心。</p></li></ul></div><h2 id="新增地图控制元素" tabindex="-1">新增地图控制元素 <a class="header-anchor" href="#新增地图控制元素" aria-label="Permalink to &quot;新增地图控制元素&quot;">​</a></h2><p>借助受控的设计，新增一个地图控制元素非常简单，以虚拟墙为例：</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>新增其他地图控制元素的方式也是类似的，重点在于如何维护好数据和运行时状态。</p></div><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>
476
+ <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>passable</code>）与不可通行（<code>impassable</code>）两种类型，数据由四个角点（<code>points</code>，顺时针 左上→右上→右下→左下，与禁区同序）与类型（<code>type</code>）构成。编辑交互通过 <code>editingThresholdIds</code> 门控，列入的门槛显示删除 / 旋转 / 缩放 / 移动控件。</p><div class="warning custom-block"><p class="custom-block-title">数据格式变更</p><p>0.0.18 起门槛数据由「中心线两点 + <code>height</code>」改为四角坐标（与主流厂商协议对齐）。传入两个点的旧数据会被丢弃并打一条 warn 日志，不再渲染；<code>controls.threshold.defaultHeight</code> 同时被移除。</p></div><p>新建门槛不用自己算四个角：<a href="/reference/methods.html#getthresholdpointsbyviewportcenter"><code>getThresholdPointsByViewportCenter()</code></a> 在当前视口中心生成一条门槛的角点，缺省 1m × 0.15m（长 × 厚），可传 <code>width</code> / <code>height</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:#6A737D;--shiki-dark:#6A737D;">// 例：用户点「添加门槛」时在视口中心放一条默认尺寸的门槛</span></span>
477
+ <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:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mapApi.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getThresholdPointsByViewportCenter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
478
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setThresholds</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;">thresholds, { id: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">nextId</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), points, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;passable&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }])</span></span></code></pre></div><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>
479
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { RobotMap, ThresholdParam } </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>
480
+ <span class="line"></span>
481
+ <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>
482
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 将设备上报的门槛数据绘制到地图上</span></span>
483
+ <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;">thresholds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setThresholds</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;">ThresholdParam</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]&gt;([</span></span>
484
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
485
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;threshold1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
486
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 四角坐标：顶点 0→1 为长度方向，0→3 为厚度方向</span></span>
487
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> points: [</span></span>
488
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { 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:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
489
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
490
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
491
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { 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;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
492
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
493
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;impassable&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 可选，缺省 &#39;passable&#39;</span></span>
494
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
495
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ])</span></span>
496
+ <span class="line"></span>
497
+ <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;">editingThresholdIds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setEditingThresholdIds</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:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]&gt;([])</span></span>
498
+ <span class="line"></span>
499
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 点击门槛删除按钮时触发（宿主收窄数据后重绘）</span></span>
500
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleRemoveThreshold</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;">id</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</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>
501
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setThresholds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(thresholds.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</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;"> item.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id))</span></span>
502
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
503
+ <span class="line"></span>
504
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 手势操作门槛（旋转 / 缩放 / 移动）结束后触发</span></span>
505
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleUpdateThreshold</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;">threshold</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ThresholdParam</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>
506
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 强烈建议在 onUpdate 回调中更新业务侧的数据</span></span>
507
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setThresholds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
508
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> thresholds.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</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;"> (item.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> threshold.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> threshold </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item)),</span></span>
509
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
510
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
511
+ <span class="line"></span>
512
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 点击门槛时触发</span></span>
513
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleClickThreshold</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;">threshold</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ThresholdParam</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>
514
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</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;">editingThresholdIds.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(threshold.id)) {</span></span>
515
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 非编辑态点击 → 进入编辑态</span></span>
516
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setEditingThresholdIds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([threshold.id])</span></span>
517
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span></span>
518
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
519
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 编辑态点击 → 翻转 type 后重绘，同一门槛原地换肤</span></span>
520
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> nextType</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> threshold.type </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;passable&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;impassable&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;passable&#39;</span></span>
521
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setThresholds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
522
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> thresholds.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span></span>
523
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> threshold.id </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:#24292E;--shiki-dark:#E1E4E8;">item, type: nextType } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item,</span></span>
524
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ),</span></span>
525
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
526
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
527
+ <span class="line"></span>
528
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
529
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span></span>
530
+ <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>
531
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> controls: {</span></span>
532
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> threshold: {</span></span>
533
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 长度与厚度的米区间（缩放到临界值即停）</span></span>
534
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> minLength: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
535
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> maxLength: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
536
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> minHeight: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
537
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> maxHeight: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
538
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ... 其他配置见 config 参考</span></span>
539
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
540
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
541
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
542
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> runtime</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{</span></span>
543
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> editingThresholdIds,</span></span>
544
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
545
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> thresholds</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{thresholds}</span></span>
546
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onRemoveThreshold</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{handleRemoveThreshold}</span></span>
547
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onUpdateThreshold</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{handleUpdateThreshold}</span></span>
548
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onClickThreshold</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{handleClickThreshold}</span></span>
549
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
550
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
551
+ <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>只读展示设备识别的门槛时，不把它们的 id 放进 <code>editingThresholdIds</code> 即可。</p></div><h3 id="坡道" tabindex="-1">坡道 <a class="header-anchor" href="#坡道" aria-label="Permalink to &quot;坡道&quot;">​</a></h3><p>坡道表示机器人可以爬上的一段斜面，数据由四个角点（<code>points</code>，顺时针 左上→右上→右下→左下，与门槛 / 禁区同序）构成，纹样是一列朝上的浅角箭头，用来指示上坡方向。编辑交互通过 <code>editingRampIds</code> 门控，列入的坡道显示删除 / 旋转 / 缩放 / 移动控件。</p><div class="tip custom-block"><p class="custom-block-title">坡向由点序自带，没有 direction 字段</p><p>坡向垂直于 0→1（宽）边、从 3→2 边指向 0→1 边 —— 未旋转时即「朝上」。旋转坡道时点集整体旋转，箭头随之旋转，所以你只需要维护 <code>points</code>。</p></div><p>新建坡道不用自己算四个角：<a href="/reference/methods.html#getramppointsbyviewportcenter"><code>getRampPointsByViewportCenter()</code></a> 在当前视口中心生成一片坡道的角点，缺省 0.8m × 0.4m（宽 × 高，高方向即坡向），可传 <code>width</code> / <code>height</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:#6A737D;--shiki-dark:#6A737D;">// 例：用户点「添加坡道」时在视口中心放一片默认尺寸的坡道</span></span>
552
+ <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:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> mapApi.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getRampPointsByViewportCenter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
553
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setRamps</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;">ramps, { id: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">nextId</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(), points }])</span></span></code></pre></div><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>
554
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { RobotMap, RampParam } </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>
555
+ <span class="line"></span>
556
+ <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>
557
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 将设备上报的坡道数据绘制到地图上</span></span>
558
+ <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;">ramps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setRamps</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;">RampParam</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]&gt;([</span></span>
559
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
560
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ramp1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
561
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 四角坐标：顶点 0→1 为宽方向，0→3 为高方向（即坡向）</span></span>
562
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> points: [</span></span>
563
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { 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:#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>
564
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">16</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </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>
565
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">16</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>
566
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { 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>
567
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
568
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
569
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ])</span></span>
570
+ <span class="line"></span>
571
+ <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;">editingRampIds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setEditingRampIds</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:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]&gt;([])</span></span>
572
+ <span class="line"></span>
573
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 点击坡道删除按钮时触发（宿主收窄数据后重绘）</span></span>
574
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleRemoveRamp</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;">id</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</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>
575
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setRamps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(ramps.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</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;"> item.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id))</span></span>
576
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
577
+ <span class="line"></span>
578
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 手势操作坡道（旋转 / 缩放 / 移动）结束后触发</span></span>
579
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleUpdateRamp</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;">ramp</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RampParam</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>
580
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 强烈建议在 onUpdate 回调中更新业务侧的数据</span></span>
581
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setRamps</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(ramps.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</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;"> (item.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ramp.id </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ramp </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item)))</span></span>
582
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
583
+ <span class="line"></span>
584
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 点击坡道时触发</span></span>
585
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleClickRamp</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;">ramp</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RampParam</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>
586
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 切换到编辑状态</span></span>
587
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setEditingRampIds</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([ramp.id])</span></span>
588
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
589
+ <span class="line"></span>
590
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
591
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span></span>
592
+ <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>
593
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> controls: {</span></span>
594
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ramp: {</span></span>
595
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 宽与高的米区间（缩放到临界值即停）</span></span>
596
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> minWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
597
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> maxWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
598
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> minHeight: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
599
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> maxHeight: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
600
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ... 其他配置见 config 参考</span></span>
601
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
602
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
603
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
604
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> runtime</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{</span></span>
605
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> editingRampIds,</span></span>
606
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
607
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ramps</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{ramps}</span></span>
608
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onRemoveRamp</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{handleRemoveRamp}</span></span>
609
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onUpdateRamp</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{handleUpdateRamp}</span></span>
610
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onClickRamp</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{handleClickRamp}</span></span>
611
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
612
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
613
+ <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>只读展示设备识别的坡道时，不把它们的 id 放进 <code>editingRampIds</code> 即可。</p></div><div class="warning custom-block"><p class="custom-block-title">点集会被归一化</p><p>绘制时绕向纠正为顺时针、宽与高分别钳制到 <a href="/reference/config.html#controls-ramp"><code>controls.ramp</code></a> 的 <code>minWidth</code>/<code>maxWidth</code> 与 <code>minHeight</code>/<code>maxHeight</code>（米）区间，再拉直成标准矩形。与门槛不同，<strong>不做</strong>长边规范（那会翻转坡向）。因此 <code>getRamps()</code> 与 <code>onUpdateRamp</code> 回吐的点集是归一化后的结果，不一定与传入的原始点逐字相同。</p></div><div class="tip custom-block"><p class="custom-block-title">小坡道上箭头会偏平</p><p>箭头折角默认只有 9°（取自 UED 矢量稿）。0.5m 的坡道在默认缩放下只有 10px 宽，折角外凸不到 1px，方向几乎看不出来。如果场景里小坡道很常见，把 <a href="/reference/config.html#controls-ramp-arrowangle"><code>controls.ramp.arrowAngle</code></a> 调陡（例如 <code>20</code>）会明显好读；整体纹样疏密由 <a href="/reference/config.html#controls-ramp-arrowdensity"><code>arrowDensity</code></a> 控制。</p></div><div class="warning custom-block"><p class="custom-block-title">组件库透传待发布</p><p><code>ramps</code> prop 的 <code>@ray-js/robot-map</code> 组件库透传尚未发布；SDK 侧 <code>drawRamps</code> / <code>getRamps</code> 等接口已可用。</p></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li><p>虽然在设计上是纯受控的，但地图控制元素在手势操作时会先在内部实时进行更新，并在手势结束后通过 <code>onUpdate</code> 回调抛出最新的数据。</p></li><li><p>为保证一致性，我们强烈建议始终在 <code>onUpdate</code> 回调更新业务侧的数据。这个更新不会产生额外的渲染，你无需担心。</p></li></ul></div><h2 id="新增地图控制元素" tabindex="-1">新增地图控制元素 <a class="header-anchor" href="#新增地图控制元素" aria-label="Permalink to &quot;新增地图控制元素&quot;">​</a></h2><p>借助受控的设计，新增一个地图控制元素非常简单，以虚拟墙为例：</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>新增其他地图控制元素的方式也是类似的，重点在于如何维护好数据和运行时状态。</p></div><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>
552
614
  <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>
553
615
  <span class="line"></span>
554
616
  <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>
@@ -1268,4 +1330,4 @@ import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g
1268
1330
  <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (mapApi) {</span></span>
1269
1331
  <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>
1270
1332
  <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
1271
- <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>`,257)])])}const y=i(l,[["render",p]]);export{g as __pageData,y as default};
1333
+ <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>`,267)])])}const y=i(l,[["render",p]]);export{g as __pageData,y as default};
package/dist-docs/assets/{guide_advanced-usage.md.BsGRhEuG.lean.js → guide_advanced-usage.md.BrP4iZb-.lean.js} RENAMED
@@ -1 +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":1785747127000}'),l={name:"guide/advanced-usage.md"};function p(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[h("",257)])])}const y=i(l,[["render",p]]);export{g as __pageData,y as default};
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":1786102219000}'),l={name:"guide/advanced-usage.md"};function p(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[h("",267)])])}const y=i(l,[["render",p]]);export{g as __pageData,y as default};
package/dist-docs/assets/{guide_getting-started.md.Ca_k5NRJ.js → guide_getting-started.md.DOtxbNfK.js} RENAMED
@@ -1,4 +1,4 @@
1
- import{_ as i,c as a,o as n,aq as p}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}'),h={name:"guide/getting-started.md"};function l(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[p(`<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-NyGgc" id="tab-8yzfGL7" checked><label data-title="yarn" for="tab-8yzfGL7">yarn</label><input type="radio" name="group-NyGgc" id="tab-2iBBweZ"><label data-title="npm" for="tab-2iBBweZ">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-xV-ab" id="tab-0mya4qI" checked><label data-title="点阵协议地图数据" for="tab-0mya4qI">点阵协议地图数据</label><input type="radio" name="group-xV-ab" id="tab-Zg_sLdG"><label data-title="结构化协议地图数据" for="tab-Zg_sLdG">结构化协议地图数据</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>
1
+ import{_ as i,c as a,o as n,aq as p}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}'),h={name:"guide/getting-started.md"};function l(k,s,t,e,E,r){return n(),a("div",null,[...s[0]||(s[0]=[p(`<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-hzLNU" id="tab-RtzeOES" checked><label data-title="yarn" for="tab-RtzeOES">yarn</label><input type="radio" name="group-hzLNU" id="tab-jDtq0lP"><label data-title="npm" for="tab-jDtq0lP">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-_YU4v" id="tab-ApDpRYx" checked><label data-title="点阵协议地图数据" for="tab-ApDpRYx">点阵协议地图数据</label><input type="radio" name="group-_YU4v" id="tab-82lW-Er"><label data-title="结构化协议地图数据" for="tab-82lW-Er">结构化协议地图数据</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>
2
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;"> &#39;@ray-js/robot-map&#39;</span></span>
3
3
  <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>
4
4
  <span class="line"></span>