---
title: 手动绘制
source: https://vjmap.com/guide/map-video/draw-to-animation.html
---

---
group: 数据与素材
video: mv-draw-to-animation
description: 新建「手动绘制」工程，截取在线地图、用元件画出路线和景点，再加到时间轴做成逐个出场的动画。
---

# 手动绘制

网上找不到合适的底图，或者想要一张风格统一的导览图时，可以在地图动画里直接用地图绘制自己画一张图，再把画好的每样东西做成动画。本篇以「故宫一日游」为例：截一块故宫一带的在线地图，画上游览路线、景点和地名，让它们一个个出场，故宫区域呼吸高亮，镜头再推进过去。

## 新建手动绘制工程

1. 在工程列表顶部点「新建工程」，打开「新建工程」对话框。
2. 「类型」选「二维」（平面地图）。
3. 「底图」选「手动绘制」（新建或载入地图绘制）。下方会多出「手动绘制」一组选项：可以「新建一张」，也可以切到「载入地图绘制里的」，使用在地图绘制里已经画好的图。
4. 新建时可以按要画的内容选一种起点：「户型 / 室内」「厂区 / 园区」「空白图纸」「架空地图」「在地图上描」「截取在线地图」。示例选「截取在线地图」，即框一块真实地图当底图。
5. 「名字」填「故宫一日游」，点「创建」。

![新建工程：二维、手动绘制、截取在线地图](./images/draw-to-animation-new-project.webp)

1. **新建工程**：工程列表顶部的按钮。
2. **类型：二维**：手动绘制的工程选二维（平面地图）。
3. **底图：手动绘制**：新建或载入地图绘制里的图。
4. **新建一张 / 载入地图绘制里的**：选择新画一张，还是用已经画好的图。
5. **截取在线地图**：框一块真实地图当底图。
6. **名字**：工程和绘图的名称，示例为「故宫一日游」。
7. **创建**：建好后直接进入编辑器。

对话框底部的说明写明了这种工程的工作方式：建好后进入编辑器，左边原地打开地图绘制来画，每次存盘都会自动同步进片子；画好的图同时也留在地图绘制的「地图动画」分类里。

编辑器打开后，左边就是地图绘制，顶部显示「地图绘制 · 故宫一日游」和「改完存盘，片子自动同步」，右侧有「完整界面」和「完成」两个按钮。因为选了截取在线地图，「截取在线地图」窗口也会自动弹出。

## 截取一块地图

截图窗口左边是地图预览，右边从上到下是「图源」「范围」「清晰度」「样式」几组设置。

1. 在「范围」的「比例」里选 16:9，和视频画面保持一致。
2. 在预览里滚动鼠标滚轮，放大到故宫一带。
3. 点预览左上角的「拖框」，从左上角拖到右下角，框出截取范围。
4. 「清晰度」选 2K。
5. 「样式」选「暗夜」。深色底图更能衬托路线和图标。
6. 点「截取」，底部会显示进度，几秒钟后地图就拼好了。

![截取在线地图的设置](./images/draw-to-animation-capture.webp)

1. **拖框**：在预览里拖出截取范围；旁边还有「当前视野」「看选框」。
2. **截取范围**：拖出的框就是最终截下来的区域。
3. **比例**：可选「自由」「16:9」「9:16」「4:3」「1:1」「A4 横」「A4 竖」。
4. **清晰度**：可选 2K、4K、8K 和 A4 / A3 / A2 的 300dpi；下方会显示级别、像素尺寸和瓦片数量。
5. **样式**：「原色」「淡雅」「灰度」「纸本」「暗夜」「蓝图」「墨线」「鲜明」。样式只调显示，之后在「图层 → 底图」里还能改。
6. **截取**：开始拼图，截取过程中可以点旁边的「停止」。

::: tip 小技巧
预览上方的提示说明了坐标处理：高德是 GCJ02 坐标，放进绘图时会自动换算成 WGS84，不需要自己转换。
:::

## 用元件画

截好的地图铺在最底层。先用滚轮放大一点，画起来更准。右边是元件库，在搜索框里输入元件名称，点一下元件就开始画。

![在元件库里选元件，画路线和景点](./images/draw-to-animation-library.webp)

1. **元件**：右栏的「元件」页就是元件库，下面按「线型」「填充」「图标」「文字」「最近」分类。
2. **搜索框**：输入元件名称查找，例如「游览路线」「景点」。
3. **正在用**：显示当前正在画的元件和操作提示。
4. **景点**：搜「景点」后出现的图标元件。
5. **大小**：放置图标前在浮窗里把大小改成 3。
6. **游览路线**：从天安门往北，经午门、太和殿、神武门到景山，再拐向北海。

各元件的画法如下：

| 元件 | 画法 | 示例 |
|---|---|---|
| 游览路线 | 依次单击途经点，双击结束 | 从天安门往北，经午门、太和殿、神武门到景山，再拐向北海 |
| 景点 | 先把大小改成 3，再在各个位置上单击 | 天安门、太和殿、景山、北海 |
| 区域名 | 单击位置，输入文字，按 `Enter` | 故宫博物院、景山公园、北海公园、天安门 |
| 高亮区域 | 依次单击各个角点，双击结束 | 沿护城河点出故宫的四个角 |

画的时候留意画面下方和元件库里的提示：

- 画线时，「正在用 · 游览路线」里提示「画线即套用 · 回车画下一条 · Esc 结束」。
- 放图标时，浮窗里提示先在元件库选图标，再单击放置；空格换变体、右键旋转、`+` / `-` 缩放，`Esc` 结束。浮窗里还有「两点缩放」「两点旋转」以及「大小」「角度」设置。

![画好的路线、景点、地名和高亮区域](./images/draw-to-animation-drawn.webp)

1. **高亮区域**：沿护城河框住故宫的半透明区域。
2. **区域名**：写在图上的地名，如「故宫博物院」。
3. **图元**：左下角列出画好的每一样东西，如游览路线、景点、故宫博物院等。
4. **同步次数**：顶部显示「已同步 N 次」，画的内容会自动存盘并同步到片子里。
5. **完成**：画完后点它，回到编辑器。

## 加到时间轴

回到编辑器后，左侧的「绘图」页会列出这张图：最上面是「故宫一日游」，下面是图层「0」，再往下是刚才画的每一样东西。

点图层「0」这一行末尾的加号，整张图就加到了时间轴：时间轴上多出一条「绘图元素」轨，轨上是一段「图层 · 0」，右下角提示「已加入 1 个片段」。

![把绘图图层加到时间轴](./images/draw-to-animation-add-layer.webp)

1. **「绘图」页**：列出绘图里的图层和对象。
2. **对象列表**：游览路线、景点 1 到 4、故宫博物院、景山公园、北海公园、天安门、高亮区域。
3. **加号**：把这一行加到时间轴。
4. **新片段**：整张图成为时间轴上的一段。

加好后右栏显示这一段的设置。切到「动画」，「入场」里默认选中的就是「按对象出场」；把「时长」改成 4 秒，路线、景点、地名就会一个接一个出来。

![按对象出场与时长](./images/draw-to-animation-by-object.webp)

1. **按对象出场**：图里的对象逐个出场。同一组里还有「无」「淡入淡出」「闪烁」「描线」「生长」「扫入」「弹出」「点亮」「变色」等入场方式。
2. **时长**：示例改成 4 秒，路线、景点、地名在这段时间里一个接一个出来。下面还有「开始停留」「结束停留」「缓动」和「预览」。

还可以单独给某一样东西加效果，例如让故宫区域呼吸高亮。先把播放头放到 5 秒，再点「高亮区域」这一行的加号，它会作为单独的一段，从 5 秒开始长出来。

![单独把高亮区域加到 5 秒处](./images/draw-to-animation-breathe.webp)

1. **播放头**：放到 5 秒。
2. **高亮区域**：点这一行的加号单独加到时间轴。
3. **新片段**：「高亮区域」从 5 秒开始。

然后在右栏「动画」里切到「循环」，选「呼吸高亮」，故宫区域就会一明一暗地亮着。

![循环动画选呼吸高亮](./images/draw-to-animation-breathe-loop.webp)

1. **循环**：「动画」里分「入场」「循环」「出场」三组，这里切到「循环」。
2. **呼吸高亮**：同组还有「无」「闪烁」「高亮」「变色」。下方可以调时长、开始停留、结束停留和缓动，示例的时长为 1.6 秒，缓动为「正弦」。

不想在片子里出现的对象，点它这一行末尾的眼睛图标，就会全片隐藏，整部片子里都不再显示；再点一次即可恢复。

![点行尾的眼睛全片隐藏](./images/draw-to-animation-hide.webp)

1. **眼睛图标**：示例隐藏的是地名「天安门」，这一行变灰。
2. **画面**：「天安门」三个字不再显示，其他对象不受影响。

## 镜头关键帧

默认情况下，相机轨上是一段「对准绘图」，镜头一直对着整张图，这是「保持」镜头。要让镜头推进、平移：

1. 把播放头放到 6 秒，在播放器里滚动滚轮，放大到故宫。
2. 按 `K` 记一帧，右下角提示：「保持」镜头改成了关键帧镜头（原机位是第一帧），已在 6 秒处记下镜头。此时有 0 秒和 6 秒两帧。
3. 把播放头放到 9 秒，在播放器里把画面拖到景山和北海一带，再按一次 `K`，记下第三帧，右下角提示「已在 9 秒处记下镜头」。
4. 从头播放，镜头会先推进到故宫，再平移到景山和北海。

![相机轨上的三个关键帧](./images/draw-to-animation-camera.webp)

1. **播放头**：放到 9 秒后按 `K`。
2. **相机片段**：「对准绘图」上出现 0 秒、6 秒、9 秒三个关键帧标记。

选中相机片段，右栏会列出镜头设置和每一个关键帧：

![右栏的镜头模式与关键帧列表](./images/draw-to-animation-camera-keyframes.webp)

1. **模式**：镜头模式已变为「关键帧」，范围是 0–9 秒。
2. **关键帧列表**：每一帧显示时刻和缩放，可以改缓动（如「缓入缓出」「线性」），也可以「更新视角」或「删除」；展开的帧还能直接填经度、纬度、缩放、俯仰、朝向。

## 修改绘图，自动同步

画好的图随时可以回去改。

在「绘图」页选中图层「0」，右栏显示「故宫一日游 · 图层 [0] · 10 个对象」，以及「加到时间轴」「全片隐藏」「定位」「飞到」「改绘图内容」几个按钮。点「改绘图内容」，地图绘制就会在原地打开。

![选中图层，点「改绘图内容」](./images/draw-to-animation-edit-open.webp)

1. **图层「0」**：在「绘图」页选中这一行。
2. **改绘图内容**：在原地打开地图绘制。

接着修改画面，例如在元件库搜「拍照点」，在故宫角楼的位置单击，加一个拍照点图标。改好后点「完成」，顶部会提示「正在同步回片子...」。

![在故宫角楼加一个拍照点](./images/draw-to-animation-edit-photo.webp)

1. **搜索**：在元件库搜「拍照点」。
2. **拍照点**：找到的图标元件。
3. **故宫角楼**：在这里单击放下拍照点。
4. **完成**：保存修改并回到编辑器。

片子会马上同步：列表里多了「拍照点」，图层显示 11 个对象；从头播放时新加的图标也会跟着出场，之前做好的按对象出场、呼吸高亮和镜头关键帧都还在。

![改图后同步进片子，原有动画保留](./images/draw-to-animation-edit-sync.webp)

1. **拍照点**：「绘图」页里多出的一行。
2. **画面**：新图标随整张图一起出场。
3. **时间轴**：原有的镜头关键帧和片段都没有变化。

::: tip 小技巧
先把整张图加到时间轴、调好整体节奏，再单独给重点对象加效果、打镜头。之后改图时不必担心前面的工作，动画会保留下来。
:::

## 下一步

地图绘制本身的完整用法见 [地图绘制新手入门](../map-draw/quickstart.html)。镜头关键帧的更多技巧可以看 [关键帧（一）：镜头](./keyframes-camera.html)。