---
title: 新手入门
source: https://vjmap.com/guide/agent/quickstart.html
---

---
group: 入门
video: tut-agent
description: 用一张杭州西湖一日游路线图，走完说需求、看过程、预览成品、接着修改、下载和打开成品的全流程。
---

# 新手入门

本篇用一张「杭州西湖一日游路线图」，带你走完唯杰地图智能体平台的基本流程：认识首页，用一句话做一张地图，边看边改，最后下载并打开成品。照着做一遍，几分钟就能得到一个可以直接打开的网页地图。学会以后，换成你自己的地点、数据或图纸，用同样的方法就能做出别的地图。

## 认识首页

在浏览器打开 https://vjmap.com/agent/ ，用唯杰地图账号登录（账号与官网、地图动画等应用通用）。登录后进入首页：

![首页的各个区域](./images/agent-quickstart-home.webp)

1. **左侧导航**：依次是「首页」「会话」「技能」「案例」「应用」。做过的对话都保存在「会话」里；左下角还有「反馈」「设置」和退出登录按钮。
2. **MCP**：「MCP 连接 AI 编辑器」，可以把平台接进你自己的 AI 编辑器，详见[接进 AI 编辑器](./mcp.html)。
3. **输入框**：用一句话说需求。输入框里的灰色提示就是例子，比如把北京到西安的自驾路线做成地图动画，选一张 DWG 后让它提取图中所有表格。
4. **文件 · 图片 · 图纸 · 技能**：给需求带上附件或指定技能，见下表。
5. **开始对话**：把需求发出去，进入对话页。
6. **案例**：现成的模板。点模板会把提示词填进输入框，改一改就能开始；带「示范」的模板可以先看一遍完整的对话，详见[案例与社区作品](./cases.html)。
7. **应用**：页面往下滚动，可以看到平台自带的专业应用，点开就能用，详见[技能与应用](./skills-apps.html)。

输入框下方四个按钮的用途：

| 按钮 | 作用 |
|---|---|
| 「文件」 | 上传文件，如 DWG / DXF 图纸、GeoJSON、表格 |
| 「图片」 | 添加图片，也可以直接粘贴截图，模型能看图 |
| 「图纸」 | 从唯杰地图服务的图纸目录里选择已有的 CAD 图纸，或上传新的 DWG / DXF |
| 「技能」 | 挑选推荐给智能体的技能；不选时由智能体自己判断 |

::: tip 小技巧
文件也可以直接拖进输入框。在首页的输入框里，按 `Ctrl+Enter`（Mac 上是 `⌘+Enter`）也能发送。
:::

## 一句话做一张地图

### 说出需求

1. 在首页的输入框里输入：「做一张杭州西湖一日游路线图：断桥残雪、白堤、孤山、苏堤春晓、雷峰塔，按游览顺序连线，点站点弹出简介」。
2. 这个需求不需要附件，直接点「开始对话」。

![在输入框里写好需求](./images/agent-quickstart-prompt.webp)

1. **需求**：一句话写清楚做什么图、有哪些地点、怎么连线、点了以后显示什么。
2. **文件**：本例不用。
3. **图片**：本例不用。
4. **图纸**：本例不用；看 CAD 图纸时，从这里选图，详见[看懂 CAD 图纸](./cad.html)。
5. **技能**：本例不用，智能体会自己挑选合适的技能。
6. **开始对话**：发出需求。

::: tip 小技巧
需求写得越具体，结果越接近你想要的。地点、顺序、颜色、点击后显示什么，能说清楚的尽量一次说清楚。
:::

### 看智能体怎么做

点「开始对话」后，页面切换到对话页，这次对话会自动出现在左侧的会话列表里。智能体先查地名坐标，再写页面，然后自己检查，每一步都依次列在对话里：

![智能体的执行过程](./images/agent-quickstart-process.webp)

1. **你的需求**：显示在最上方，带发送时间。
2. **思考**：虚线框里是智能体的思考过程，「思考中…」后面是它当时在想的内容，点右侧箭头可以展开。
3. **加载技能**：带「技能」标签的一步，表示智能体加载了某个专业技能。本例加载了 vjmap-common 和 tianditu-geocoder，后者用来查地名坐标。
4. **执行步骤**：运行命令、读写文件等。右侧是这一步的耗时，绿色对勾表示已完成。
5. **还没完成的步骤**：右侧显示时钟图标，表示这一步还在等待执行。

生成过程中，输入框右侧的「发送」会变成「停止」，需要时可以随时中止，详见[对话与预览](./chat.html)。

### 预览成品

做好以后，智能体在回答里列出产物和说明，右侧的「预览」直接打开做好的网页：五个景点按游览顺序连成了路线。

![做好后：左边是回答，右边是预览](./images/agent-quickstart-result.webp)

1. **会话**：这次对话出现在左侧会话列表里，随时可以回来接着做。
2. **回答：产物与说明**：列出生成了哪些文件（index.html 网页、站点和路线数据、页面截图），页面里有什么内容，以及数据来源与限制。
3. **成果文件**：预览上方显示正在预览的文件，「成果」表示这是本次的最终成果。
4. **预览**：直接显示做好的网页，可以拖动、缩放和点击，和在浏览器里打开的效果一样。
5. **新窗口打开**：在浏览器的新标签页里单独打开这个页面。

在预览里点一个景点，会弹出它的简介：

![点站点弹出简介](./images/agent-quickstart-popup.webp)

1. **点站点**：地图上带编号的圆点就是景点，编号即游览顺序。
2. **弹出简介**：本例显示顺序、景点名、建议时间、建议停留、简介和游览提示。
3. **矢量 · 影像 · 全图 · 主题**：页面右上角的按钮，用来切换矢量或影像底图、回到全图、切换深浅主题。

::: warning 注意
每次生成的页面不会完全一样，按钮、配色和弹窗内容请以你自己的结果为准。本例中地图上的连线是站点之间的直线示意，不是实际步行路线，回答的「数据来源与限制」里已经写明。智能体可能出错，关键数据和坐标请自行核对。
:::

## 边看边改

### 接着说

对结果不满意，不用重新开始，在下方输入框里接着说就行。例如：

1. 输入「路线改成红色虚线，再加上三潭印月这一站」。
2. 按 `Enter` 或点「发送」。（需要换行时按 `Shift+Enter`。）

![在输入框里接着提修改要求](./images/agent-quickstart-ask.webp)

1. **接着说**：直接说要改哪里，不用重复之前的需求。
2. **发送**：发出修改要求。

智能体会在原来的基础上修改，改完后右侧的预览会自动刷新。本例中它改了站点数据、路线数据和页面配置，重新检查并截图，然后在回答里说明改了什么：路线改为红色虚线；新增第 5 站三潭印月，雷峰塔顺延为第 6 站；站点简介、建议时间和统计同步更新。

![修改后的预览](./images/agent-quickstart-updated.webp)

1. **红色虚线**：路线从橙色虚线改成了红色虚线。
2. **说明更新**：页面说明改成「共 6 个站点」，并注明苏堤春晓到三潭印月一段为湖上船行。
3. **统计更新**：站点数 6 个，示意里程 3.9 km，建议时长 7.5 小时。

::: tip 小技巧
一次提一两处修改，更容易确认效果。如果某次提问说得不对，想撤回重来，可以把鼠标移到自己的那条提问上，点「编辑」，详见[对话与预览](./chat.html)。
:::

### 看手机上的效果

做好的页面在手机上是什么样？在预览上方切到手机尺寸看一看：

![切到手机尺寸预览](./images/agent-quickstart-mobile.webp)

1. **桌面 · 平板 · 手机**：三个按钮按不同屏幕宽度显示预览，点最右边的「手机」。
2. **手机宽度下的效果**：预览变窄，标题和右上角的按钮也跟着变窄排列。觉得小屏上哪里不好看，可以接着说，让智能体调整。

## 下载和打开成品

生成的网页和数据都保存在这次会话里：

1. 点右侧的「文件」页签，查看全部文件。
2. 点「下载全部」，把所有文件打包下载到本地。
3. 想单独打开页面，回到「预览」页签，点上方的「新窗口打开」。

![「文件」页签](./images/agent-quickstart-files.webp)

1. **文件**：页签上的数字是文件个数，本例共 9 个。
2. **下载全部**：一次性打包下载会话里的所有文件。
3. **入口**：标有「入口」的 index.html 就是预览里打开的页面。其余是数据（data 文件夹里的页面配置、路线和站点）、运行文件（js 文件夹）和截图（out 文件夹里的 preview.png）。

本例中智能体在回答里说明了 index.html 可以直接双击打开，所以下载后在本地也能使用。

::: tip 小技巧
想把作品给别人看，可以点预览上方的「发布」，把它发布到社区，详见[发布作品到社区](./publish.html)。
:::

## 下一步

想了解对话工作台的更多细节，比如右侧各个页签、停止生成和重新编辑提问，请看[对话与预览](./chat.html)；想让智能体看 CAD 图纸，请看[看懂 CAD 图纸](./cad.html)；不知道怎么提需求，可以从[案例与社区作品](./cases.html)开始。全部篇目见[文档首页](./index.html)。