@ray-js/robot-map-sdk 0.0.8 → 0.0.9-beta.2
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/index.d.ts +104 -0
- package/dist/index.rjs.js +1 -1
- package/dist-app/assets/{index-DBiLhFZl.js → index-X4t1FRUS.js} +1 -1
- package/dist-app/index.html +1 -1
- package/dist-docs/404.html +2 -2
- package/dist-docs/assets/{app.BCQyE94h.js → app.C62U0Xvl.js} +1 -1
- package/dist-docs/assets/chunks/@localSearchIndexroot.BVWfvn8X.js +1 -0
- package/dist-docs/assets/chunks/{VPLocalSearchBox.BrTaQHuH.js → VPLocalSearchBox.DIpZZ_5w.js} +1 -1
- package/dist-docs/assets/chunks/{theme.XkHDjgfO.js → theme.B5y6jAlZ.js} +2 -2
- package/dist-docs/assets/{guide_advanced-usage.md.B4LS-34s.js → guide_advanced-usage.md.BQuNyTwG.js} +2 -2
- package/dist-docs/assets/{guide_advanced-usage.md.B4LS-34s.lean.js → guide_advanced-usage.md.BQuNyTwG.lean.js} +1 -1
- package/dist-docs/assets/{guide_getting-started.md.DzUQvV8g.js → guide_getting-started.md.DXfO6oB7.js} +3 -3
- package/dist-docs/assets/guide_getting-started.md.DXfO6oB7.lean.js +1 -0
- package/dist-docs/assets/{reference_config.md.DLC4kvTR.js → reference_config.md.Be0VANUI.js} +87 -3
- package/dist-docs/assets/reference_config.md.Be0VANUI.lean.js +1 -0
- package/dist-docs/assets/{reference_methods.md.BNxMKwmx.js → reference_methods.md.CEJFnJJg.js} +2 -2
- package/dist-docs/assets/{reference_methods.md.BNxMKwmx.lean.js → reference_methods.md.CEJFnJJg.lean.js} +1 -1
- package/dist-docs/guide/advanced-usage.html +6 -6
- package/dist-docs/guide/concepts.html +3 -3
- package/dist-docs/guide/getting-started.html +7 -7
- 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/reference/callbacks.html +3 -3
- package/dist-docs/reference/config.html +91 -7
- package/dist-docs/reference/data.html +3 -3
- package/dist-docs/reference/methods.html +6 -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/package.json +1 -1
- package/dist-docs/assets/chunks/@localSearchIndexroot.KFmfCW62.js +0 -1
- package/dist-docs/assets/guide_getting-started.md.DzUQvV8g.lean.js +0 -1
- package/dist-docs/assets/reference_config.md.DLC4kvTR.lean.js +0 -1
package/dist-docs/assets/{reference_config.md.DLC4kvTR.js → reference_config.md.Be0VANUI.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as
|
|
1
|
+
import{_ as i,c as e,o as a,ag as s}from"./chunks/framework.DRADY2L-.js";const g=JSON.parse('{"title":"配置","description":"","frontmatter":{},"headers":[],"relativePath":"reference/config.md","filePath":"reference/config.md","lastUpdated":1770804529000}'),t={name:"reference/config.md"};function n(l,o,r,c,d,h){return a(),e("div",null,[...o[0]||(o[0]=[s(`<h1 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to "配置""></a></h1><p>了解 RobotMap 的配置选项，用于定制地图的视觉样式、素材资源、交互行为等。</p><div class="tip custom-block"><p class="custom-block-title">响应式配置</p><p>配置是<strong>响应式</strong>的，当你修改传入的 <code>config</code> prop 时，地图会自动更新视觉效果，无需重新初始化。这使得主题切换、颜色调整等功能的实现变得简单直接。</p></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li>本文档部分配置项的单位与<strong>米</strong>相关，该配置的值会根据地图数据里的分辨率转换为像素单位。</li></ul></div><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to "使用示例""></a></h2><h3 id="基础配置" tabindex="-1">基础配置 <a class="header-anchor" href="#基础配置" aria-label="Permalink to "基础配置""></a></h3><p>配置通过 <code>config</code> 传递，所有配置项都是可选的，你可以只覆盖需要修改的部分。</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'react'</span></span>
|
|
2
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>
|
|
4
4
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
@@ -38,7 +38,91 @@ import{_ as e,c as t,o as r,ag as i}from"./chunks/framework.DRADY2L-.js";const g
|
|
|
38
38
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> speed: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
39
39
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
40
40
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
|
|
41
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/></span></span></code></pre></div><
|
|
41
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/></span></span></code></pre></div><h3 id="响应式配置-主题切换示例" tabindex="-1">响应式配置 - 主题切换示例 <a class="header-anchor" href="#响应式配置-主题切换示例" aria-label="Permalink to "响应式配置 - 主题切换示例""></a></h3><p>配置是响应式的，修改 <code>config</code> prop 会自动更新地图视觉效果。以下是一个主题切换的示例：</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { useState, useMemo } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'react'</span></span>
|
|
42
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { RobotMap } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@ray-js/robot-map'</span></span>
|
|
43
|
+
<span class="line"></span>
|
|
44
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
45
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setTheme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'dark'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'light'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
46
|
+
<span class="line"></span>
|
|
47
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMemo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
48
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span></span>
|
|
49
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
50
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> global: { backgroundColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#f6f6f6'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
51
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> map: { obstacleColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#999999'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, freeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#ebebeb'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
52
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> room: {</span></span>
|
|
53
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> colors: {</span></span>
|
|
54
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> active: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#a8c8f5'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#9de5c7'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#d4b9f7'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#ffd399'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
55
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#2563b8'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#26966b'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#7c3fb8'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#d97706'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
56
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
57
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
58
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: { commonPath: { color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#ffffff'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } },</span></span>
|
|
59
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
60
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
61
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> global: { backgroundColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#1a1a1a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
62
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> map: { obstacleColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#404040'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, freeColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#2a2a2a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
63
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> room: {</span></span>
|
|
64
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> colors: {</span></span>
|
|
65
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> active: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#3b5998'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#2d6a4f'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#6a1b9a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#d97706'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
66
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#6b9bf7'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#4ade80'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#b794f6'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#fbbf24'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
67
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
68
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
69
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: { commonPath: { color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#64748b'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } },</span></span>
|
|
70
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
71
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [theme])</span></span>
|
|
72
|
+
<span class="line"></span>
|
|
73
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
|
|
74
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <></span></span>
|
|
75
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTheme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">t</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (t </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'dark'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">))}></span></span>
|
|
76
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 切换主题</span></span>
|
|
77
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
78
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{config} /></span></span>
|
|
79
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </></span></span>
|
|
80
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
|
81
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>当你点击按钮切换主题时，<code>config</code> 对象会根据 <code>theme</code> 状态重新计算，地图会自动响应配置变化并更新视觉效果。</p></div><h3 id="响应式配置-主题切换" tabindex="-1">响应式配置（主题切换） <a class="header-anchor" href="#响应式配置-主题切换" aria-label="Permalink to "响应式配置（主题切换）""></a></h3><p>配置是响应式的，当你修改 <code>config</code> prop 时，地图会自动更新。以下是一个主题切换的示例：</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { useState, useMemo } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'react'</span></span>
|
|
82
|
+
<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>
|
|
83
|
+
<span class="line"></span>
|
|
84
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
85
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">setTheme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'dark'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'light'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
86
|
+
<span class="line"></span>
|
|
87
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useMemo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
88
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ({</span></span>
|
|
89
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> global: {</span></span>
|
|
90
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> backgroundColor: theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#f6f6f6'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#1a1a1a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
91
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
92
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> map: {</span></span>
|
|
93
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> obstacleColor: theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#999999'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#404040'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
94
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> freeColor: theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#ebebeb'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#2a2a2a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
95
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
96
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> room: {</span></span>
|
|
97
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> colors: {</span></span>
|
|
98
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> active:</span></span>
|
|
99
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span></span>
|
|
100
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#a8c8f5'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#9de5c7'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#d4b9f7'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#ffd399'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
|
|
101
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#3b5998'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#2d6a4f'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#6a1b9a'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#d97706'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
102
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name:</span></span>
|
|
103
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span></span>
|
|
104
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#2563b8'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#26966b'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#7c3fb8'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#d97706'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
|
|
105
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#6b9bf7'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#4ade80'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#b794f6'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'#fbbf24'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
|
106
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
107
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
108
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: {</span></span>
|
|
109
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> commonPath: {</span></span>
|
|
110
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> color: theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#ffffff'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '#64748b'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
111
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
112
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
113
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
|
|
114
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [theme],</span></span>
|
|
115
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
|
116
|
+
<span class="line"></span>
|
|
117
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
|
|
118
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <></span></span>
|
|
119
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTheme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">t</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (t </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'dark'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">))}></span></span>
|
|
120
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 切换到{theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'light'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '暗黑'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '浅色'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}主题</span></span>
|
|
121
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
122
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{config} /></span></span>
|
|
123
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </></span></span>
|
|
124
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
|
125
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">性能提示</p><p>使用 <code>useMemo</code> 包裹配置对象可以避免不必要的重新渲染。只有当依赖项（如 <code>theme</code>）变化时，配置才会重新计算，地图才会更新。</p></div><h2 id="global" tabindex="-1">global <a class="header-anchor" href="#global" aria-label="Permalink to "global""></a></h2><p>全局容器配置，控制地图容器的位置、尺寸和背景。</p><h3 id="global-containertop" tabindex="-1">global.containerTop <a class="header-anchor" href="#global-containertop" aria-label="Permalink to "global.containerTop""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'0px'</code></li></ul><p>容器距离顶部的位置。支持 <code>px</code>、<code>%</code>、<code>vw</code>、<code>vh</code>、<code>rpx</code> 单位。</p><h3 id="global-containerleft" tabindex="-1">global.containerLeft <a class="header-anchor" href="#global-containerleft" aria-label="Permalink to "global.containerLeft""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'0px'</code></li></ul><p>容器距离左侧的位置。支持 <code>px</code>、<code>%</code>、<code>vw</code>、<code>vh</code>、<code>rpx</code> 单位。</p><h3 id="global-containerwidth" tabindex="-1">global.containerWidth <a class="header-anchor" href="#global-containerwidth" aria-label="Permalink to "global.containerWidth""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'100%'</code></li></ul><p>容器宽度。支持 <code>px</code>、<code>%</code>、<code>vw</code>、<code>vh</code>、<code>rpx</code> 单位。</p><h3 id="global-containerheight" tabindex="-1">global.containerHeight <a class="header-anchor" href="#global-containerheight" aria-label="Permalink to "global.containerHeight""></a></h3><ul><li><strong>类型</strong>: <code>string</code></li><li><strong>默认值</strong>: <code>'100%'</code></li></ul><p>容器高度。支持 <code>px</code>、<code>%</code>、<code>vw</code>、<code>vh</code>、<code>rpx</code> 单位。</p><h3 id="global-backgroundcolor" tabindex="-1">global.backgroundColor <a class="header-anchor" href="#global-backgroundcolor" aria-label="Permalink to "global.backgroundColor""></a></h3><ul><li><strong>类型</strong>: <code>ColorSource</code></li><li><strong>默认值</strong>: <code>'#f6f6f6'</code></li></ul><p>地图容器纯色背景颜色。该颜色也将作为 <code>snapshot</code> 和 <code>snapshotByData</code> 方法的默认背景颜色。</p><div class="tip custom-block"><p class="custom-block-title">背景优先级</p><p>SDK 支持三种背景类型，按以下优先级应用：</p><ol><li><strong>图片背景</strong>（<code>backgroundImage</code>）- 优先级最高</li><li><strong>渐变背景</strong>（<code>backgroundGradient</code>）- 优先级中等</li><li><strong>纯色背景</strong>（<code>backgroundColor</code>）- 优先级最低</li></ol><p>当同时配置多种背景时，优先级高的会覆盖优先级低的。例如，如果同时设置了 <code>backgroundImage</code> 和 <code>backgroundColor</code>，最终只会显示图片背景。</p></div><h3 id="global-backgroundgradient" tabindex="-1">global.backgroundGradient <a class="header-anchor" href="#global-backgroundgradient" aria-label="Permalink to "global.backgroundGradient""></a></h3><ul><li><strong>类型</strong>: <a href="/reference/types.html#backgroundgradient"><code>BackgroundGradient</code></a></li><li><strong>默认值</strong>: <code>undefined</code></li></ul><p>渐变背景配置，支持线性渐变和径向渐变。</p><h4 id="线性渐变示例" tabindex="-1">线性渐变示例 <a class="header-anchor" href="#线性渐变示例" aria-label="Permalink to "线性渐变示例""></a></h4><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
42
126
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> global</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
|
43
127
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> backgroundGradient</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
|
44
128
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'linear'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
@@ -104,4 +188,4 @@ import{_ as e,c as t,o as r,ag as i}from"./chunks/framework.DRADY2L-.js";const g
|
|
|
104
188
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> anchor: { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1.0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 所有检测物体都使用底部中心作为锚点</span></span>
|
|
105
189
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
106
190
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
107
|
-
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h2 id="snapshot" tabindex="-1">snapshot <a class="header-anchor" href="#snapshot" aria-label="Permalink to "snapshot""></a></h2><p>截图配置。</p><h3 id="snapshot-format" tabindex="-1">snapshot.format <a class="header-anchor" href="#snapshot-format" aria-label="Permalink to "snapshot.format""></a></h3><ul><li><strong>类型</strong>: <code>'png' | 'jpg' | 'webp'</code></li><li><strong>默认值</strong>: <code>'png'</code></li></ul><p>截图输出格式。</p><h3 id="snapshot-quality" tabindex="-1">snapshot.quality <a class="header-anchor" href="#snapshot-quality" aria-label="Permalink to "snapshot.quality""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li></ul><p>截图质量 (0-1)。</p><h3 id="snapshot-antialias" tabindex="-1">snapshot.antialias <a class="header-anchor" href="#snapshot-antialias" aria-label="Permalink to "snapshot.antialias""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>截图是否开启抗锯齿。</p><h3 id="snapshot-resolution" tabindex="-1">snapshot.resolution <a class="header-anchor" href="#snapshot-resolution" aria-label="Permalink to "snapshot.resolution""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>4</code></li></ul><p>截图分辨率倍数。</p>`,
|
|
191
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h2 id="snapshot" tabindex="-1">snapshot <a class="header-anchor" href="#snapshot" aria-label="Permalink to "snapshot""></a></h2><p>截图配置。</p><h3 id="snapshot-format" tabindex="-1">snapshot.format <a class="header-anchor" href="#snapshot-format" aria-label="Permalink to "snapshot.format""></a></h3><ul><li><strong>类型</strong>: <code>'png' | 'jpg' | 'webp'</code></li><li><strong>默认值</strong>: <code>'png'</code></li></ul><p>截图输出格式。</p><h3 id="snapshot-quality" tabindex="-1">snapshot.quality <a class="header-anchor" href="#snapshot-quality" aria-label="Permalink to "snapshot.quality""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>1</code></li></ul><p>截图质量 (0-1)。</p><h3 id="snapshot-antialias" tabindex="-1">snapshot.antialias <a class="header-anchor" href="#snapshot-antialias" aria-label="Permalink to "snapshot.antialias""></a></h3><ul><li><strong>类型</strong>: <code>boolean</code></li><li><strong>默认值</strong>: <code>true</code></li></ul><p>截图是否开启抗锯齿。</p><h3 id="snapshot-resolution" tabindex="-1">snapshot.resolution <a class="header-anchor" href="#snapshot-resolution" aria-label="Permalink to "snapshot.resolution""></a></h3><ul><li><strong>类型</strong>: <code>number</code></li><li><strong>默认值</strong>: <code>4</code></li></ul><p>截图分辨率倍数。</p>`,1103)])])}const k=i(t,[["render",n]]);export{g as __pageData,k as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as i,c as e,o as a,ag as s}from"./chunks/framework.DRADY2L-.js";const g=JSON.parse('{"title":"配置","description":"","frontmatter":{},"headers":[],"relativePath":"reference/config.md","filePath":"reference/config.md","lastUpdated":1770804529000}'),t={name:"reference/config.md"};function n(l,o,r,c,d,h){return a(),e("div",null,[...o[0]||(o[0]=[s("",1103)])])}const k=i(t,[["render",n]]);export{g as __pageData,k as default};
|
package/dist-docs/assets/{reference_methods.md.BNxMKwmx.js → reference_methods.md.CEJFnJJg.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.DRADY2L-.js";const g=JSON.parse('{"title":"地图方法","description":"","frontmatter":{},"headers":[],"relativePath":"reference/methods.md","filePath":"reference/methods.md","lastUpdated":
|
|
1
|
+
import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.DRADY2L-.js";const g=JSON.parse('{"title":"地图方法","description":"","frontmatter":{},"headers":[],"relativePath":"reference/methods.md","filePath":"reference/methods.md","lastUpdated":1770804529000}'),p={name:"reference/methods.md"};function h(e,s,l,k,r,d){return n(),a("div",null,[...s[0]||(s[0]=[t(`<h1 id="地图方法" tabindex="-1">地图方法 <a class="header-anchor" href="#地图方法" aria-label="Permalink to "地图方法""></a></h1><p>了解 RobotMap 提供的 API 方法。</p><h2 id="使用示例" tabindex="-1">使用示例 <a class="header-anchor" href="#使用示例" aria-label="Permalink to "使用示例""></a></h2><p>通过 <code>onMapReady</code> 回调获得 <code>MapApi</code> 实例，该实例包含所有可调用的地图方法。这些方法让你可以主动控制地图行为、查询数据和执行各种操作。</p><div class="language-tsx vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MapApi } </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>
|
|
2
2
|
<span class="line"></span>
|
|
3
3
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
4
4
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> mapApi</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useRef</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">MapApi</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
@@ -139,7 +139,7 @@ import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.DRADY2L-.js";const g
|
|
|
139
139
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
|
140
140
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="resetpanzoom" tabindex="-1">resetPanZoom() <a class="header-anchor" href="#resetpanzoom" aria-label="Permalink to "resetPanZoom()""></a></h2><p>重置地图的平移和缩放状态到初始位置。</p><p><strong>类型</strong>:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> resetPanZoom</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;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p><strong>返回值</strong>: <code>Promise<void></code></p><h2 id="snapshot" tabindex="-1">snapshot() <a class="header-anchor" href="#snapshot" aria-label="Permalink to "snapshot()""></a></h2><p>当前地图截图。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>截图过程中会自动添加一个临时的背景层（与容器边界等大），确保禁区、地毯等半透明元素在非实底背景下能够正确显示颜色。</p></div><p><strong>类型</strong>:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ColorSource } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'pixi.js'</span></span>
|
|
141
141
|
<span class="line"></span>
|
|
142
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> snapshot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">options</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;">backgroundColor</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ColorSource</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;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p><strong>参数</strong>:</p><ul><li><code>options</code> - 截图配置选项</li><li><code>options.backgroundColor</code>: <code>ColorSource</code> - 指定截图时的背景颜色。若不指定，将默认使用 <code>config.global.backgroundColor</code>。支持颜色字符串（如 <code>'#ffffff'</code>、<code>'rgba(0,0,0,1)'</code>）、十六进制数值（如 <code>0xffffff</code>）或 RGB 数组。</li></ul><p><strong>返回值</strong>: <a href="/reference/types.html#string"><code>Promise<string></code></a> - Base64 格式的图片数据 (Data URL)。</p><h2 id="snapshotbydata" tabindex="-1">snapshotByData() <a class="header-anchor" href="#snapshotbydata" aria-label="Permalink to "snapshotByData()""></a></h2><p>根据指定的地图数据进行截图。主要用于多地图管理界面的缩略图预览。</p><p>此方法会创建一个临时的离屏渲染实例，不会影响当前正在运行的地图显示状态。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p
|
|
142
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> snapshot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">options</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;">backgroundColor</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ColorSource</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;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p><strong>参数</strong>:</p><ul><li><code>options</code> - 截图配置选项</li><li><code>options.backgroundColor</code>: <code>ColorSource</code> - 指定截图时的背景颜色。若不指定，将默认使用 <code>config.global.backgroundColor</code>。支持颜色字符串（如 <code>'#ffffff'</code>、<code>'rgba(0,0,0,1)'</code>）、十六进制数值（如 <code>0xffffff</code>）或 RGB 数组。</li></ul><p><strong>返回值</strong>: <a href="/reference/types.html#string"><code>Promise<string></code></a> - Base64 格式的图片数据 (Data URL)。</p><h2 id="snapshotbydata" tabindex="-1">snapshotByData() <a class="header-anchor" href="#snapshotbydata" aria-label="Permalink to "snapshotByData()""></a></h2><p>根据指定的地图数据进行截图。主要用于多地图管理界面的缩略图预览。</p><p>此方法会创建一个临时的离屏渲染实例，不会影响当前正在运行的地图显示状态。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>配置（如颜色方案、图标样式等）会沿用当前地图实例的配置。</p></div><p><strong>类型</strong>:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ColorSource } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'pixi.js'</span></span>
|
|
143
143
|
<span class="line"></span>
|
|
144
144
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> snapshotByData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
145
145
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.DRADY2L-.js";const g=JSON.parse('{"title":"地图方法","description":"","frontmatter":{},"headers":[],"relativePath":"reference/methods.md","filePath":"reference/methods.md","lastUpdated":
|
|
1
|
+
import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.DRADY2L-.js";const g=JSON.parse('{"title":"地图方法","description":"","frontmatter":{},"headers":[],"relativePath":"reference/methods.md","filePath":"reference/methods.md","lastUpdated":1770804529000}'),p={name:"reference/methods.md"};function h(e,s,l,k,r,d){return n(),a("div",null,[...s[0]||(s[0]=[t("",163)])])}const E=i(p,[["render",h]]);export{g as __pageData,E as default};
|
|
@@ -9,11 +9,11 @@
|
|
|
9
9
|
<link rel="preload stylesheet" href="/assets/style.CN_tJoU2.css" as="style">
|
|
10
10
|
<link rel="preload stylesheet" href="/vp-icons.css" as="style">
|
|
11
11
|
|
|
12
|
-
<script type="module" src="/assets/app.
|
|
12
|
+
<script type="module" src="/assets/app.C62U0Xvl.js"></script>
|
|
13
13
|
<link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
|
14
|
-
<link rel="modulepreload" href="/assets/chunks/theme.
|
|
14
|
+
<link rel="modulepreload" href="/assets/chunks/theme.B5y6jAlZ.js">
|
|
15
15
|
<link rel="modulepreload" href="/assets/chunks/framework.DRADY2L-.js">
|
|
16
|
-
<link rel="modulepreload" href="/assets/guide_advanced-usage.md.
|
|
16
|
+
<link rel="modulepreload" href="/assets/guide_advanced-usage.md.BQuNyTwG.lean.js">
|
|
17
17
|
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
|
18
18
|
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
|
19
19
|
</head>
|
|
@@ -835,7 +835,7 @@
|
|
|
835
835
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
836
836
|
<span class="line"></span>
|
|
837
837
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RobotMap</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onMapReady</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{handleMapReady} /></span></span>
|
|
838
|
-
<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
|
|
838
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>使用其他地图数据进行截图时，<code>config</code> 会沿用当前地图实例的配置，但你可以通过第二个参数自由决定它的 <code>runtime</code> 状态，以及通过第三个参数指定 <code>backgroundColor</code>。</p></div><h2 id="地图旋转" tabindex="-1">地图旋转 <a class="header-anchor" href="#地图旋转" aria-label="Permalink to "地图旋转""></a></h2><p>控制地图旋转非常简单，只需要设置 <code>runtime.mapRotation</code> 即可。在地图旋转后，组件会自动对地图做一次自适应居中。</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;"> 'react'</span></span>
|
|
839
839
|
<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>
|
|
840
840
|
<span class="line"></span>
|
|
841
841
|
<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>
|
|
@@ -901,8 +901,8 @@
|
|
|
901
901
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (mapApi) {</span></span>
|
|
902
902
|
<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>
|
|
903
903
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
904
|
-
<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></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><!----><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>最后更新于: <time datetime="2026-02-
|
|
905
|
-
<script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_advanced-usage.md\":\"
|
|
904
|
+
<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></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><!----><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>最后更新于: <time datetime="2026-02-11T10:08:49.000Z" data-v-e98dd255></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/guide/getting-started.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>快速开始</span><!--]--></a></div><div class="pager" data-v-e257564d><!----></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
|
905
|
+
<script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_advanced-usage.md\":\"BQuNyTwG\",\"guide_concepts.md\":\"DBFk-g-l\",\"guide_getting-started.md\":\"DXfO6oB7\",\"guide_mcp.md\":\"1UIpY4E0\",\"index.md\":\"Sm6vD2Gl\",\"reference_callbacks.md\":\"CZ8IiuH-\",\"reference_config.md\":\"Be0VANUI\",\"reference_data.md\":\"DciSLVC8\",\"reference_methods.md\":\"CEJFnJJg\",\"reference_runtime.md\":\"BnT09w_m\",\"reference_types.md\":\"CL_VFfB8\",\"reference_utils.md\":\"CSshxnp0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Tuya Robot Map\",\"description\":\"涂鸦扫地机地图组件\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"Tuya Robot Map\",\"outline\":{\"level\":[2,6],\"label\":\"页面导航\"},\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/guide/concepts\",\"activeMatch\":\"^/guide/\"},{\"text\":\"参考\",\"link\":\"/reference/data\",\"activeMatch\":\"^/reference/\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"指南\",\"items\":[{\"text\":\"基本概念\",\"link\":\"/guide/concepts\"},{\"text\":\"快速开始\",\"link\":\"/guide/getting-started\"},{\"text\":\"进阶使用\",\"link\":\"/guide/advanced-usage\"}]}],\"/reference/\":[{\"text\":\"组件Props\",\"items\":[{\"text\":\"数据\",\"link\":\"/reference/data\"},{\"text\":\"配置\",\"link\":\"/reference/config\"},{\"text\":\"运行时\",\"link\":\"/reference/runtime\"},{\"text\":\"地图事件回调\",\"link\":\"/reference/callbacks\"}]},{\"text\":\"方法\",\"items\":[{\"text\":\"地图方法\",\"link\":\"/reference/methods\"},{\"text\":\"工具方法\",\"link\":\"/reference/utils\"}]},{\"text\":\"类型定义\",\"items\":[{\"text\":\"类型定义\",\"link\":\"/reference/types\"}]}]},\"search\":{\"provider\":\"local\"},\"lastUpdated\":{\"text\":\"最后更新于\",\"formatOptions\":{\"dateStyle\":\"short\",\"timeStyle\":\"short\"}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
|
906
906
|
|
|
907
907
|
</body>
|
|
908
908
|
</html>
|
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
<link rel="preload stylesheet" href="/assets/style.CN_tJoU2.css" as="style">
|
|
10
10
|
<link rel="preload stylesheet" href="/vp-icons.css" as="style">
|
|
11
11
|
|
|
12
|
-
<script type="module" src="/assets/app.
|
|
12
|
+
<script type="module" src="/assets/app.C62U0Xvl.js"></script>
|
|
13
13
|
<link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
|
14
|
-
<link rel="modulepreload" href="/assets/chunks/theme.
|
|
14
|
+
<link rel="modulepreload" href="/assets/chunks/theme.B5y6jAlZ.js">
|
|
15
15
|
<link rel="modulepreload" href="/assets/chunks/framework.DRADY2L-.js">
|
|
16
16
|
<link rel="modulepreload" href="/assets/guide_concepts.md.DBFk-g-l.lean.js">
|
|
17
17
|
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
<div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>Tuya Robot Map</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/guide/concepts.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/reference/data.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>参考</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>指南</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/concepts.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>基本概念</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/getting-started.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>快速开始</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/guide/advanced-usage.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>进阶使用</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>页面导航</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _guide_concepts" data-v-39a288b8><div><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>后续文档中，我们会使用 <code>RobotMap</code> 组件作为示例，你可以根据实际需求选择使用 <code>RobotMap</code> 或 <code>RjsRobotMap</code> 组件。</p><h3 id="robotmap-组件" tabindex="-1">RobotMap 组件 <a class="header-anchor" href="#robotmap-组件" aria-label="Permalink to "RobotMap 组件""></a></h3><p>React 地图组件，提供完整的地图渲染和交互功能：</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 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>RobotMap</code> 组件是基于 <a href="https://developer.tuya.com/cn/miniapp/develop/ray/component/open/web-view" target="_blank" rel="noreferrer">WebView</a> 开发的，开发前请详细阅读<a href="https://developer.tuya.com/cn/miniapp/develop/miniapp/component/native-component/native-component" target="_blank" rel="noreferrer">原生组件说明</a>。</p></li><li><p><code>RobotMap</code> 默认铺满全屏，适用于<strong>首页实时地图</strong>等场景，一个页面只能有一个 <code>RobotMap</code> 组件。</p></li><li><p>需要在小程序<code>global.config.ts</code>中配置<code>webviewRoot</code>让小程序能够正确加载<code>RobotMap</code>的资源。</p></li></ul><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</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>
|
|
22
22
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> "webviewRoot"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"node_modules/@ray-js/robot-map-sdk/dist-app"</span></span>
|
|
23
23
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div><h3 id="rjsrobotmap-组件" tabindex="-1">RjsRobotMap 组件 <a class="header-anchor" href="#rjsrobotmap-组件" aria-label="Permalink to "RjsRobotMap 组件""></a></h3><p>基于Rjs开发的地图组件，它拥有和 <code>RobotMap</code> 组件相同的Props。</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;">RjsRobotMap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p><code>RjsRobotMap</code> 基于 <a href="https://developer.tuya.com/cn/miniapp/develop/ray/framework/render" target="_blank" rel="noreferrer">Rjs</a> 开发，它没有原生组件的限制，一个页面可以有多个 <code>RjsRobotMap</code> 组件。适用于<strong>多地图</strong>、<strong>弹窗里的地图</strong> 等场景。</p></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>引入 <code>RjsRobotMap</code> 对页面加载速度有一定影响。如无必要场景，我们建议始终使用 <code>RobotMap</code> 组件。</p></div><h2 id="坐标系统" tabindex="-1">坐标系统 <a class="header-anchor" href="#坐标系统" aria-label="Permalink to "坐标系统""></a></h2><h3 id="地图原点坐标" tabindex="-1">地图原点坐标 <a class="header-anchor" href="#地图原点坐标" aria-label="Permalink to "地图原点坐标""></a></h3><p>地图原点是扫地机器人运行过程中确定的参考点，地图上的元素都是基于这个原点计算的相对位置。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>地图原点本身是相对于地图左上角来定位的。例如在一张100 x 100(宽 x 高)的 地图中，如果原点坐标是(20, 80)，表示原点位于相对于地图左上角(20, 80)的位置。</p></div><h3 id="地图坐标系" tabindex="-1">地图坐标系 <a class="header-anchor" href="#地图坐标系" aria-label="Permalink to "地图坐标系""></a></h3><p>地图坐标系是本 SDK 实际使用的坐标系，用于在地图上渲染和显示各种元素。地图坐标系以地图原点为中心(0, 0)：</p><ul><li>X轴：向右为正方向</li><li>Y轴：向下为正方向</li></ul><h4 id="与机器坐标系的不同" tabindex="-1">与机器坐标系的不同 <a class="header-anchor" href="#与机器坐标系的不同" aria-label="Permalink to "与机器坐标系的不同""></a></h4><p>需要注意的是，本 SDK 使用的地图坐标系与扫地机器人设备本身使用的机器坐标系在 Y 轴方向上相反：</p><ul><li><p><strong>机器坐标系</strong>（设备使用的坐标系）：</p><ul><li>X轴：向右为正方向</li><li>Y轴：向上为正方向</li></ul></li><li><p><strong>地图坐标系</strong>（本 SDK 使用的坐标系）：</p><ul><li>X轴：向右为正方向（与机器坐标系一致）</li><li>Y轴：向下为正方向（与机器坐标系相反）</li></ul></li></ul><p>SDK 采用标准的屏幕坐标系（Screen Coordinate System）进行渲染，因此 Y 轴方向与机器坐标系相反。在 SDK 中，如果原点在(0, 0)，坐标为(1, 1)的点会渲染在原点的右下方。</p><p>例如，以下元素的坐标均使用地图坐标系：</p><ul><li>充电桩</li><li>清扫路径 (含机器人位置)</li><li>虚拟墙</li><li>禁区</li><li>清扫区域</li><li>分割线</li><li>其他自定义元素</li><li>...</li></ul><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>本文档中，如果未特别说明，涉及到的坐标均指地图坐标系（X向右，Y向下）。</p></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><!----><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>最后更新于: <time datetime="2025-12-30T11:04:05.000Z" data-v-e98dd255></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/guide/getting-started.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>快速开始</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
|
24
|
-
<script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_advanced-usage.md\":\"
|
|
24
|
+
<script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_advanced-usage.md\":\"BQuNyTwG\",\"guide_concepts.md\":\"DBFk-g-l\",\"guide_getting-started.md\":\"DXfO6oB7\",\"guide_mcp.md\":\"1UIpY4E0\",\"index.md\":\"Sm6vD2Gl\",\"reference_callbacks.md\":\"CZ8IiuH-\",\"reference_config.md\":\"Be0VANUI\",\"reference_data.md\":\"DciSLVC8\",\"reference_methods.md\":\"CEJFnJJg\",\"reference_runtime.md\":\"BnT09w_m\",\"reference_types.md\":\"CL_VFfB8\",\"reference_utils.md\":\"CSshxnp0\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Tuya Robot Map\",\"description\":\"涂鸦扫地机地图组件\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"Tuya Robot Map\",\"outline\":{\"level\":[2,6],\"label\":\"页面导航\"},\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/guide/concepts\",\"activeMatch\":\"^/guide/\"},{\"text\":\"参考\",\"link\":\"/reference/data\",\"activeMatch\":\"^/reference/\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"指南\",\"items\":[{\"text\":\"基本概念\",\"link\":\"/guide/concepts\"},{\"text\":\"快速开始\",\"link\":\"/guide/getting-started\"},{\"text\":\"进阶使用\",\"link\":\"/guide/advanced-usage\"}]}],\"/reference/\":[{\"text\":\"组件Props\",\"items\":[{\"text\":\"数据\",\"link\":\"/reference/data\"},{\"text\":\"配置\",\"link\":\"/reference/config\"},{\"text\":\"运行时\",\"link\":\"/reference/runtime\"},{\"text\":\"地图事件回调\",\"link\":\"/reference/callbacks\"}]},{\"text\":\"方法\",\"items\":[{\"text\":\"地图方法\",\"link\":\"/reference/methods\"},{\"text\":\"工具方法\",\"link\":\"/reference/utils\"}]},{\"text\":\"类型定义\",\"items\":[{\"text\":\"类型定义\",\"link\":\"/reference/types\"}]}]},\"search\":{\"provider\":\"local\"},\"lastUpdated\":{\"text\":\"最后更新于\",\"formatOptions\":{\"dateStyle\":\"short\",\"timeStyle\":\"short\"}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
|
25
25
|
|
|
26
26
|
</body>
|
|
27
27
|
</html>
|