@ray-js/robot-map-sdk 0.0.15-beta.4 → 0.0.15-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.
- package/dist/constant/methods.js +1 -1
- package/dist/index.d.ts +30 -2
- package/dist/index.rjs.js +1 -1
- package/dist-app/assets/{index-DszGCxko.js → index-D9VwUOlq.js} +1 -1
- package/dist-app/index.html +1 -1
- package/dist-docs/404.html +2 -2
- package/dist-docs/assets/{app.DcqsBRzv.js → app.dhfn8YVD.js} +1 -1
- package/dist-docs/assets/chunks/@localSearchIndexroot.AU8AFPb8.js +1 -0
- package/dist-docs/assets/chunks/{BitmapFont.CSoKWe92.js → BitmapFont._75YFVng.js} +1 -1
- package/dist-docs/assets/chunks/{BufferResource.CaDsK41I.js → BufferResource.BXq5Gjpk.js} +1 -1
- package/dist-docs/assets/chunks/{CanvasRenderer.fp1XQ1di.js → CanvasRenderer.5dXabo6X.js} +1 -1
- package/dist-docs/assets/chunks/{RenderTargetSystem.DiylmdjA.js → RenderTargetSystem.BoG_2vTc.js} +1 -1
- package/dist-docs/assets/chunks/{VPLocalSearchBox.DYkZoQ3Y.js → VPLocalSearchBox.Dfa0MAuy.js} +1 -1
- package/dist-docs/assets/chunks/{WebGLRenderer.DondOLq0.js → WebGLRenderer.O2k8hm1U.js} +1 -1
- package/dist-docs/assets/chunks/{WebGPURenderer.BNoPTVSA.js → WebGPURenderer.uCTDNuVR.js} +1 -1
- package/dist-docs/assets/chunks/{browserAll.NheyXl28.js → browserAll.ze3NUo_4.js} +1 -1
- package/dist-docs/assets/chunks/{index.DPhNtla2.js → index.lc4NZPGp.js} +20 -20
- package/dist-docs/assets/chunks/{theme.evXL--Im.js → theme.CEEzv3xD.js} +3 -3
- package/dist-docs/assets/chunks/{webworkerAll.CK7Hbnkq.js → webworkerAll.HqNVw7yG.js} +1 -1
- package/dist-docs/assets/{guide_advanced-usage.md.BboplJc2.js → guide_advanced-usage.md.JAqVYRlM.js} +20 -4
- package/dist-docs/assets/{guide_advanced-usage.md.BboplJc2.lean.js → guide_advanced-usage.md.JAqVYRlM.lean.js} +1 -1
- package/dist-docs/assets/{guide_getting-started.md.lb0_EtuM.js → guide_getting-started.md.CJ93RQLU.js} +2 -2
- package/dist-docs/assets/guide_getting-started.md.CJ93RQLU.lean.js +1 -0
- package/dist-docs/assets/{reference_config.md.adqOhH1J.js → reference_config.md.DfWCSVSm.js} +3 -3
- package/dist-docs/assets/reference_config.md.DfWCSVSm.lean.js +1 -0
- package/dist-docs/assets/{reference_methods.md.BvtVJ2dG.js → reference_methods.md.BPWJ_jw6.js} +8 -3
- package/dist-docs/assets/reference_methods.md.BPWJ_jw6.lean.js +1 -0
- package/dist-docs/guide/advanced-usage.html +23 -7
- package/dist-docs/guide/concepts.html +3 -3
- package/dist-docs/guide/getting-started.html +5 -5
- package/dist-docs/guide/mcp.html +3 -3
- package/dist-docs/hashmap.json +1 -1
- package/dist-docs/index.html +3 -3
- package/dist-docs/plans/2026-03-04-detected-objects-visibility-design.html +3 -3
- package/dist-docs/plans/2026-03-04-show-detected-objects-implementation-plan.html +3 -3
- package/dist-docs/plans/2026-03-10-simulator-debug-design.html +3 -3
- package/dist-docs/plans/2026-03-10-simulator-events-console-design.html +3 -3
- package/dist-docs/plans/2026-03-10-simulator-events-console-implementation-plan.html +3 -3
- package/dist-docs/plans/2026-03-10-simulator-runtime-controls-design.html +3 -3
- package/dist-docs/plans/2026-03-10-simulator-runtime-controls-implementation-plan.html +3 -3
- package/dist-docs/plans/2026-03-10-testing-rollout-next-steps-plan.html +3 -3
- package/dist-docs/plans/2026-03-11-simulator-logger-dump-implementation-plan.html +3 -3
- package/dist-docs/reference/callbacks.html +3 -3
- package/dist-docs/reference/config.html +6 -6
- package/dist-docs/reference/data.html +3 -3
- package/dist-docs/reference/methods.html +11 -6
- package/dist-docs/reference/runtime.html +3 -3
- package/dist-docs/reference/types.html +3 -3
- package/dist-docs/reference/utils.html +3 -3
- package/dist-docs/simulator/index.html +3 -3
- package/package.json +1 -1
- package/dist-docs/assets/chunks/@localSearchIndexroot.CA4E9Vgv.js +0 -1
- package/dist-docs/assets/guide_getting-started.md.lb0_EtuM.lean.js +0 -1
- package/dist-docs/assets/reference_config.md.adqOhH1J.lean.js +0 -1
- package/dist-docs/assets/reference_methods.md.BvtVJ2dG.lean.js +0 -1
|
@@ -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.
|
|
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.lc4NZPGp.js";import"./framework.CBLqO2Q1.js";import"./mapValues.D2X8cRgC.js";import"./theme.CEEzv3xD.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.BboplJc2.js → guide_advanced-usage.md.JAqVYRlM.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":
|
|
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":1778673065000}'),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 "进阶使用""></a></h1><p>Tuya Robot Map 的进阶使用，包含了我们认为的最佳实践。</p><h2 id="自适应缩放" tabindex="-1">自适应缩放 <a class="header-anchor" href="#自适应缩放" aria-label="Permalink to "自适应缩放""></a></h2><p>自适应缩放是地图 SDK 的核心功能之一，它会自动调整地图的缩放比例和位置，确保地图能够以合适的大小居中显示在视口中。</p><h3 id="什么是-scale" tabindex="-1">什么是 scale？ <a class="header-anchor" href="#什么是-scale" aria-label="Permalink to "什么是 scale？""></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 "自适应缩放的触发时机""></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 "自适应缩放的计算逻辑""></a></h3><p>当触发自适应缩放时，SDK 会按照以下步骤计算最终的缩放比例：</p><h4 id="_1-计算初始缩放比例" tabindex="-1">1. 计算初始缩放比例 <a class="header-anchor" href="#_1-计算初始缩放比例" aria-label="Permalink to "1. 计算初始缩放比例""></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 "2. 应用缩放比例限制""></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 "常见问题与解决方案""></a></h3><h4 id="问题-1-超大地图显示不全" tabindex="-1">问题 1：超大地图显示不全 <a class="header-anchor" href="#问题-1-超大地图显示不全" aria-label="Permalink to "问题 1：超大地图显示不全""></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;"><</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>
|
|
@@ -933,7 +933,23 @@ import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g
|
|
|
933
933
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ... 其他属性</span></span>
|
|
934
934
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
935
935
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
|
936
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="
|
|
936
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="在视口中心创建地毯" tabindex="-1">在视口中心创建地毯 <a class="header-anchor" href="#在视口中心创建地毯" aria-label="Permalink to "在视口中心创建地毯""></a></h3><p>你可以通过 <code>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;"> 'rectangle'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'round'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
937
|
+
<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>
|
|
938
|
+
<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>
|
|
939
|
+
<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>
|
|
940
|
+
<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>
|
|
941
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
|
|
942
|
+
<span class="line"></span>
|
|
943
|
+
<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;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
|
|
944
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">prev,</span></span>
|
|
945
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
946
|
+
<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>
|
|
947
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: selectedMaterialType,</span></span>
|
|
948
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> shape,</span></span>
|
|
949
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> points,</span></span>
|
|
950
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
951
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ])</span></span>
|
|
952
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p><code>shape: 'custom'</code> 仍然需要业务层自行提供多边形顶点，这个 helper 不会 生成自定义轮廓。</p><h3 id="编辑地毯" tabindex="-1">编辑地毯 <a class="header-anchor" href="#编辑地毯" aria-label="Permalink to "编辑地毯""></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;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
937
953
|
<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;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">CustomCarpetParam</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[]>([</span></span>
|
|
938
954
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // ...</span></span>
|
|
939
955
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ])</span></span>
|
|
@@ -984,7 +1000,7 @@ import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g
|
|
|
984
1000
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'c1'</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;">'rectangle'</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>
|
|
985
1001
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'c2'</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;">'round'</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>
|
|
986
1002
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]}</span></span>
|
|
987
|
-
<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><code>rectangle</code> 和 <code>round</code> 形状支持旋转和缩放；<code>custom</code
|
|
1003
|
+
<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><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 "相关配置""></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>'#5d68fe'</code></td><td>非删除按钮背景色</td></tr><tr><td><a href="/reference/config.html#controls-carpet-deleteiconwrapperfillcolor"><code>controls.carpet.deleteIconWrapperFillColor</code></a></td><td><code>'#ff4444'</code></td><td>删除按钮背景色</td></tr><tr><td><a href="/reference/config.html#controls-carpet-rotatemode"><code>controls.carpet.rotateMode</code></a></td><td><code>'step'</code></td><td>旋转按钮交互模式</td></tr><tr><td><a href="/reference/config.html#controls-carpet-scalemode"><code>controls.carpet.scaleMode</code></a></td><td><code>'ratioLocked'</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 "自定义元素""></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;"> 'react'</span></span>
|
|
988
1004
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { RobotMap } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@ray-js/robot-map'</span></span>
|
|
989
1005
|
<span class="line"></span>
|
|
990
1006
|
<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;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
@@ -1135,4 +1151,4 @@ import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g
|
|
|
1135
1151
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (mapApi) {</span></span>
|
|
1136
1152
|
<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>
|
|
1137
1153
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
1138
|
-
<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>`,
|
|
1154
|
+
<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};
|
|
@@ -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":
|
|
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":1778673065000}'),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};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as i,c as a,o as n,aq as
|
|
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 "快速开始""></a></h1><p>Tuya Robot Map 提供了开箱即用的 React 组件，专为扫地机器人应用设计。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-siVu8" id="tab-kJZoxut" checked><label data-title="yarn" for="tab-kJZoxut">yarn</label><input type="radio" name="group-siVu8" id="tab-IECJ4z1"><label data-title="npm" for="tab-IECJ4z1">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 "数据传入""></a></h2><p>仅需传入几个基本的数据props，即可完成地图的呈现。</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-hLOiu" id="tab-LJJoprz" checked><label data-title="点阵协议地图数据" for="tab-LJJoprz">点阵协议地图数据</label><input type="radio" name="group-hLOiu" id="tab-xUnBbg7"><label data-title="结构化协议地图数据" for="tab-xUnBbg7">结构化协议地图数据</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;"> 'react'</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;"> '@ray-js/robot-map'</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;"> '@ray-js/robot-map'</span></span>
|
|
4
4
|
<span class="line"></span>
|
|
@@ -208,4 +208,4 @@ import{_ as i,c as a,o as n,aq as h}from"./chunks/framework.CBLqO2Q1.js";const g
|
|
|
208
208
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</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;">{handleGetCleanZones}>获取清扫区域</</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
209
209
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">View</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
210
210
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
|
211
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>注意所有地图方法都是异步的Promise，需要使用 <code>await</code> 或 <code>then</code> 来获取结果。</p></div>`,27)])])}const y=i(
|
|
211
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>注意所有地图方法都是异步的Promise，需要使用 <code>await</code> 或 <code>then</code> 来获取结果。</p></div>`,27)])])}const y=i(h,[["render",l]]);export{g as __pageData,y as default};
|
|
@@ -0,0 +1 @@
|
|
|
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("",27)])])}const y=i(h,[["render",l]]);export{g as __pageData,y as default};
|