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

---
group: 入门
video: md-start
description: 用一张园区平面图走完地图绘制全流程：新建绘图、画底图、用元件装饰、CAD 式编辑、出图和做成动画。
---

# 新手入门

本篇用一张园区平面图，带你走完地图绘制的完整流程：新建绘图、画底图、用元件装饰、CAD 式编辑、整理属性和图层，最后出图并做成动画。学完后，你可以独立画出一张带道路、绿地、停车场和楼栋的平面图，并把它交给地图动画做成视频。

地图绘制是一个独立的应用，用来画网上找不到的地图和 CAD 范围图。它有五个特点：能画任何地图，CAD 级编辑，元件和风格丰富，能出图导出，还能直接做成地图动画。

## 成品预览

本篇要画的是一张园区平面图：道路、绿地、停车场、楼栋一应俱全。图上的每样东西都是矢量对象，画完可以继续修改，也能导出，还能拿去做动画。

![本篇要画的园区平面图](./images/md-quickstart-preview.webp)

1. **绿地**：用填充元件「树林」画的一块面。
2. **厂房**：「1 号厂房」和「2 号厂房」，第二栋是复制出来的。
3. **道路**：线型元件「厂区主路」画的折线，道路左端是「大门」。
4. **行道树**：路两边的乔木，用阵列一次排好。
5. **停车场**：车位线和 P 标志都是样式自带的。
6. **水池**：填充元件「湖泊」画的多边形。
7. **图例**：列出图上用到的元件，如树林、停车场、厂房、湖泊、厂区主路、乔木、大门。
8. **标题**：绘图名「厂区 / 园区」和日期。
9. **指北针**。
10. **比例尺**。

图上还有办公楼、篮球场等对象。标题、指北针、比例尺、图例和外面的图框是在「版面」里加的，见下文「版面与导出」。

## 新建绘图

1. 打开 https://vjmap.com/agent/ext/map-draw/#/ ，用唯杰地图账号登录（与唯杰地图智能体平台、官网账号通用）。
2. 在首页右上角点「新建绘图」，打开「新建绘图」对话框。
3. 选一个模板。共有九种，分成两组：「CAD 图纸空间」里是空白 CAD 画布、基于 CAD 图纸、户型 / 室内、厂区 / 园区、架空世界；「真实地图」里是截取在线地图、景区 / 校园导览、国土空间规划、历史地图。本篇选「厂区 / 园区」。
4. 在右侧确认画布深浅、单位和画布大小，名称和分类也可以在这里填。
5. 点「创建并打开」，进入编辑器。

![新建绘图对话框](./images/md-quickstart-new.webp)

1. **CAD 图纸空间**：按米 / 毫米画，平面坐标。
2. **真实地图**：经纬度，能垫在线地图。
3. **厂区 / 园区**：卡片上写着「米 · 道路、建筑、停车位」，本篇选它。
4. **画布**：深色或浅色，以后在编辑器顶栏随时换。
5. **单位**：本篇为「米」。
6. **画布大小**：宽 × 高，示例为 1000 × 700 m。画布只是初始范围和导出范围，画到外面也可以。
7. **创建并打开**：建好后直接进入编辑器。对话框左下角会汇总当前的选择，如「厂区 / 园区 · 米 · 1000 × 700 m · 深色画布」。

::: tip 两种空间要分清
CAD 图纸空间按米或毫米画，适合户型、厂区这类按尺寸画的图；真实地图用经纬度，能垫在在线地图上画。
:::

## 认识编辑器

编辑器分为下面几个区域：

![编辑器的各个区域](./images/md-quickstart-editor.webp)

1. **顶栏**：左侧是绘图名、空间和单位（如「CAD · 米」）以及保存状态，中间是撤销、缩放、二三维切换、版面和风格包，右侧是 AI、「做成动画」、「导出」和「保存」。
2. **工具箱**：按绘制、标绘、标注、描图、编辑分组；鼠标停在按钮上会显示它的作用。
3. **图元列表**：所有对象和图层都在这里，顶部可以按名称、文字、元件搜索。
4. **画布**：中间的绘图区域，滚动鼠标滚轮缩放，放大到要画的地方；左下角是缩略图，右下角有缩放等按钮。
5. **右侧面板**：元件、属性、图层、AI 和版面五个页签，选中什么，就在这里改什么。
6. **常用快捷键**：`L` 折线、`P` 多边形、`W` 双线、`I` 图标、`T` 文字、`Esc` 结束。

底部左侧是状态栏，显示光标坐标、对象数和当前图层，还有「捕捉」和「门窗吸墙」两个开关。

顶栏中间的按钮如下：

![顶栏中间的按钮](./images/md-quickstart-topbar.webp)

1. **撤销 / 重做**。
2. **缩放**：缩小、放大，中间显示当前缩放比例。
3. **2D / 3D**：在二维和三维之间切换。
4. **画布深浅**：鼠标停在上面会提示「画布：深色（点一下换浅色，整套配色跟着换）」。画图时换成浅色会更清楚。
5. **版面**。
6. **风格包**：一套成体系的元件风格，本篇用的是「厂区·园区」。

## 画底图

地图绘制的习惯是先选样式、再画形状：先在右侧「元件」页点一个元件，再用工具箱里的工具画，画出来的形状就套用了这个元件的样式。

![在元件页选中「厂区主路」](./images/md-quickstart-road.webp)

1. **线型**：线状元件都在这一类，下面还按道路、铁路 · 地铁、水系、边界、控制线、路线等细分。
2. **正在用**：显示当前选中的元件和用法提示，如「画线即套用 · 回车画下一条 · Esc 结束」。
3. **厂区主路**：「道路」分类里的元件，卡片左下角的「园区」是它的风格标签。

按下面的顺序画出底图：

1. **道路**：在线型里点「厂区主路」，用折线工具（`L`）在图上点几下，按 `Esc` 结束，一条道路就出来了。画线时画布下方的命令条会提示「折线 · 指定起点」，也可以直接键入 x,y、@dx,dy 或 @距离。
2. **绿地**：切到「填充」，搜「树林」并选中，用多边形工具（`P`）点出范围，按 `Esc` 结束，它会自动闭合成一块面。
3. **停车场**：选「停车场」样式，用矩形工具点两下即可。车位线和停车标志都是样式自带的。
4. **厂房**：选「厂房」样式，用矩形工具点两下，轮廓就画好了。
5. **文字**：选「楼号牌」样式，用文字工具（`T`）在厂房上点一下，输入「1 号厂房」，按 `Enter` 确定。

![画好的底图](./images/md-quickstart-base.webp)

1. **道路**：「厂区主路」，折线画。
2. **绿地**：「树林」，多边形画，自动闭合成面。
3. **停车场**：「停车场」，矩形画。
4. **厂房**：「厂房」，矩形画。
5. **文字**：「楼号牌」样式的「1 号厂房」。

画好的对象会依次出现在左侧图元列表里：厂区主路、树林、停车场、厂房、1 号厂房。

## 元件库与换样式

元件库按线型、填充、图标和文字分类，每一类都有几百个元件，在搜索框里输入名字就能找到。

![在元件库里搜索并选中「湖泊」](./images/md-quickstart-library.webp)

1. **分类**：线型、填充、图标、文字和最近。没有搜索时，按钮上显示每类元件的数量（线型 180、填充 201、图标 309、文字 54）；输入关键词后，显示各类匹配到的数量。
2. **搜索框**：示例输入「湖泊」。
3. **风格筛选**：全部风格、简约、网图、古风、魔幻等，可以只看某一种风格。
4. **正在用**：选中「湖泊」后显示「画多边形 / 矩形 / 圆即套用」。
5. **湖泊**：「面 · 水系」里的元件，同组还有古风的「湖泽」和网图的「水域」。

常用的操作：

- 搜「湖泊」并选中，用多边形工具点出范围，就有了一个水池。
- 图标一点就放：搜「乔木」并选中，「正在用」里提示「单击放置 · 空格换变体 · 右键旋转 · Esc 结束」，在路边点一下，一棵树就放好了。
- 每个元件卡片左下角都有风格标签，如园区、简约、网图、古风、魔幻，不同风格可以混用。
- 选中对象后单击元件卡片就能换样式，比如选中主路，搜「支路」，单击「厂区支路」，主路就换成了支路；在卡片上点右键则只换样式、不改形状。选中对象时，画布上方的浮动工具条也会提示「单击元件库里的元件换样式 · 方向键微调」。

不满意随时按 `Ctrl+Z` 撤销。

## CAD 式编辑

工具箱的「编辑」组提供 CAD 式的编辑工具，复制和阵列是最常用的两个。

**复制**：选中厂房，点复制工具，先点基点，再点目标位置，一栋厂房就变成了两栋。命令条里同样可以键入 x,y、@dx,dy 或 @距离来精确定位。

![用复制工具复制出第二栋厂房](./images/md-quickstart-copy.webp)

1. **复制**：鼠标停在按钮上会提示「选对象 → 基点 → 目标点（可连续放）」。
2. **阵列**：提示「矩形或路径阵列（行道树、车位、桌椅）」。
3. **原来的厂房**：选中它，点复制工具，先点基点。
4. **复制出的第二栋**：在目标位置点一下就放好了。

**阵列**：最适合排行道树。

1. 选中路边的乔木，点阵列工具。
2. 按 `Enter` 选择矩形阵列。
3. 依次输入行数 2、列数 12、行距 20、列距 12，每次按 `Enter` 确认。

![阵列时的命令条](./images/md-quickstart-array.webp)

1. **选中的乔木**：要阵列的对象，选中后显示为红点。
2. **命令条**：提示当前要输入的内容，如「阵列 · 输入行数 <2>」，在输入框里填数字后按 `Enter`。输入列距时，命令条上还可以选「两点」或「图上量取」。

路两边的行道树就一次排好了。编辑组里还有移动、镜像、偏移、修剪、倒角等操作，也可以在命令条里直接输入坐标。

## 属性与图层

选中一个对象，在「属性」里可以改名称、描述、分组和出场顺序。做成动画时，出场先后和解说字幕都依赖这些信息，建议画完就填好。

![选中道路后的属性页](./images/md-quickstart-props.webp)

1. **名称**：示例把「厂区主路」改名为「东西主路」。
2. **描述**：输入框里提示「进片子时可以当解说词」。
3. **分组**：提示「同组的一起出场」。
4. **顺序**：提示「出场先后」。
5. **图层**：对象所在的图层。

属性页顶部会显示对象的类型和样式，如「多段线 · 厂区主路」，以及长度等测量值。

在「图层」里可以隐藏、冻结或锁定图层，把底图和标注分开管理，修改时不会误伤其他内容。

![图层页](./images/md-quickstart-layers.webp)

1. **图层**：页签下方说明「新画的对象放进当前图层（●）。图层也决定进片子时的出场顺序。」
2. **新建图层**。
3. **隐藏 · 冻结 · 锁定**：图层这一行末尾的三个按钮。

左侧图元列表里每个图层的那一行也有这三个按钮。隐藏图层后，这个图层上的对象就从画布上暂时消失。

## 版面与导出

1. 点右侧面板的「版面」，选好纸张（A4 至 A0）。
2. 按需加上图框、标题、指北针、比例尺和图例。
3. 在页面里拖动、滚动滚轮调整取景，让图占满整张纸。
4. 点顶栏的「导出」，选择导出方式。历史版本都会保留。

![版面页](./images/md-quickstart-layout.webp)

1. **版面**：右侧面板的页签。
2. **页面预览**：开关打开时，画布里显示整张纸的版面效果，画布下方会标出纸张和比例，如「A3 横 · 1:1140」。
3. **纸张**：A4、A3、A2、A1、A0、16:9、9:16、4:3、1:1 和自定义；下面还能设方向（横向 / 竖向）、边距和纸色，并显示纸张尺寸，如 420 × 297 mm。
4. **取景**：显示当前比例，有「铺满全图」和「正北朝上」两个按钮，也可以在页面里拖动、滚轮缩放。
5. **添加**：图框、标题、指北针、比例尺、图例、署名、文字、图片。

![导出菜单](./images/md-quickstart-export.webp)

1. **导出**：顶栏右侧的按钮。
2. **按版面导出 PNG...**：可以设纸张、DPI 和透明。
3. **PNG 图片**：导出整张画布，或只导出当前视野。
4. **GeoJSON**：带名称、分组。
5. **绘图文件 JSON**。
6. **历史版本...**：查看保留下来的历史版本。

## 做成动画

1. 点顶栏的「做成动画」，打开「做成地图动画」对话框。
2. 选画幅和出场方式（如逐个出场、间隔 0.15 秒），可以加标题、生成解说字幕。
3. 点对话框里的「做成动画」，几秒钟后这张图就进了地图动画，新工程里镜头和版面都已配好。点播放，道路、绿地、停车场和厂房会一个接一个长出来。

![做成地图动画对话框](./images/md-quickstart-animate.webp)

1. **放到**：示例为「新建地图动画」。
2. **画幅**：16:9、9:16、1:1、4:3。
3. **出场**：按图层、逐个、按分组、一起；右侧设置每一步的秒数，示例为「逐个」、0.15 秒一步。
4. **加标题（绘图名）**。
5. **带上版面**：图框、标题、指北针、比例尺、图例盖在画面上，镜头按版面取景。
6. **按出场顺序生成解说字幕**：对象都没写描述时，可以在属性里写，或让 AI 起名写描述。
7. **这张图以后改了，打开片子时自动同步**。
8. **做成动画**：开始生成。

对话框顶部说明了它做的事：把这张图放进地图动画，底图配好、镜头对准、按图层 / 分组 / 顺序一步步出场；在新标签页打开，做好后直接进编辑器接着改。

之后在地图动画里加镜头、配乐和字幕，就能导出成片。

::: tip 改图自动同步
做成动画以后，这张图如果再修改，打开片子时会自动同步，不用重做。
:::

## 下一步

想了解每类工具和模板能做什么，接着看[功能一览](./features.html)；想在地图动画里继续加工这张图，可以看地图动画的[手动绘制](../map-video/draw-to-animation.html)和[新手入门](../map-video/quickstart.html)。