---
title: 数据可视化
source: https://vjmap.com/guide/map-video/data-viz.html
---

---
group: 功能精讲
video: mv-data-viz
description: 把 CSV、GeoJSON 或 SHP 表格变成地图上的气泡和热力图，并让镜头拍到数据层。
---

# 数据可视化

汇报片里经常需要把一张业务表格放到地图上。本篇以一张城市人口表为例，介绍如何用「数据表」把表格变成地图上的气泡和热力图，让气泡随时间一个个出现，并确保成片的镜头能拍到这些数据。

## 准备一张表

数据表支持 CSV、GeoJSON 和 SHP 三种格式，使用前先在「素材」里导入。

![在素材面板导入数据表](./images/data-viz-import.webp)

1. **素材**：左上角第一个标签页，打开素材面板。
2. **导入**：点这个按钮选择本地的 CSV、GeoJSON 或 SHP 文件。
3. **导入的表格**：导入后出现在素材列表里，卡片上显示文件名、格式和大小（示例为「城市人口.csv」，CSV · 793 B）。

本篇的示例是一张城市人口表，共 30 行、4 列：城市、经度、纬度和常住人口（万）。

导入后，到「地图」里打开「数据表」，选择这张表：

![地图 › 数据表，在源表里选择导入的表](./images/data-viz-source-table.webp)

1. **地图**：切换到地图标签页。
2. **数据表**：左侧列表中的「数据表」。页面顶部的「数据层」后面显示当前已有几层，下方说明了它能做什么：把 CSV / GeoJSON / SHP 变成随时间出现的点、气泡、OD 飞线、热力图、三维柱、分级填色或轨迹回放。
3. **源表**：在「添加数据层」下展开「源表」下拉框，列出所有已上传的 CSV / GeoJSON / SHP，选择「城市人口.csv」。

选好源表后，下方会显示表格的行数、列数和编码（示例为「30 行 · 4 列 · utf-8」），并列出每一列的名称。每列是文字还是数字会自动识别出来，列名后面标「文」的是文字列，标「数」的是数字列。「名称」自动填为「城市人口」，生成后数据层列表和时间轴上的条都显示这个名称。

::: tip 小技巧
更多数据格式的导入方法，见 [导入 GIS 数据](./import-gis.html)。
:::

## 选类型、预览、生成

源表下方是这一层的主要设置。示例中「类型」选「气泡」后，经纬度、数值和标签对应哪一列都已经自动对好：

![类型、坐标和字段对应](./images/data-viz-type-fields.webp)

1. **列识别结果**：城市（文）、经度（数）、纬度（数）、常住人口（万）（数）。
2. **类型**：可选「时序点」「气泡」「点」「OD 飞线」「热力」「三维柱」「分级填色」「轨迹回放」，本例选「气泡」。
3. **坐标与坐标系**：「坐标」有「经纬度列」「合并列」「地名 → 地理编码」三种取法，本例的经纬度分成两列，用「经纬度列」；「坐标系」可选 WGS84 或 GCJ02。
4. **经度 / 纬度**：分别对应表里的「经度」列和「纬度」列。
5. **数值 / 标签**：「数值」对应「常住人口（万）」，气泡大小由它决定；「标签」对应「城市」。「时间」和「类别」本例没有用到，保持「无」。
6. **时间模式**：「时间」分组下的「模式」，有「累计」「时间窗」「逐条」「静态」，本例为「逐条」。
7. **预览**：在弹窗里核对落点和属性表。
8. **生成并添加**：把这一层真正加到地图和时间轴上。面板提示「先预览核对落点，再点底部『生成并添加』。生成之前不会出现在地图上」。

点「预览」后会弹出预览窗口，标题下方显示表格概况（CSV · 30 行 · 4 列 · 点 30）：

![预览弹窗：核对落点和属性表](./images/data-viz-preview.webp)

1. **预览设置**：可以切换「数据坐标」（互联网数据 / CAD 数据）、「底图」（天地图 / 高德，矢量 / 影像）、「坐标系」（WGS84 / GCJ02）和「坐标列」（经度 / 纬度两列，以及分别对应的列）。
2. **落点**：地图上显示每一行对应的点，左下角是点的数量（点 30）。检查点是否落在正确的城市上。
3. **属性表**：逐行列出城市、经度、纬度和常住人口，可在上方搜索属性值。按弹窗底部的提示，单击某一行可在地图上定位该要素，单击地图上的要素会回到对应的那一行。

确认无误后，回到面板点「生成并添加」，时间轴上就多了一条数据层：

![生成后的数据层与时间轴上的数据层轨](./images/data-viz-layer-added.webp)

1. **数据层列表**：「数据层」变为 1，新的一层显示类型（气泡）、名称、行数和出现方式（30 行 · 逐条出现），以及时间范围（0.0s – 片尾）。
2. **数据层轨**：时间轴上新增「数据层」轨，上面是这一层的条。

同时，右侧属性面板切换到这一层的设置：

![数据层的设置](./images/data-viz-layer-settings.webp)

1. **类型与来源**：类型（气泡）、名称，以及「源表 城市人口.csv 30 行」。
2. **操作按钮**：「跳到开始」「在预览里看」「镜头对准」「重新生成」「删除」。
3. **时间**：「出现方式」可选「累计」「时间窗」「逐条」「静态」；示例中「开始出现」为 00:00.00、「全部出现」为 00:08.00，勾选了「消失：一直显示到片尾」和「出现后：保留」，「入场」为「弹出」、0.5 秒。
4. **说明**：时间轴「数据层」轨上这一层是一条：拖动整条可以平移，拖左沿换开始，拖右沿定消失（拖到片尾即一直显示）；条头的浅色斜带就是逐条出现的过程。

如果当前镜头没有拍到这一层，右下角还会弹出提示，说明数据层已添加，但镜头没拍到它，预览已移到数据那里；要让成片里也看到，需要让镜头对准数据。下一节会讲到。

::: tip 小技巧
生成前先预览，可以及早发现落点偏移、列对错之类的问题，比生成后再回头改省事。
:::

## 让镜头拍到数据

::: warning 注意
数据层只有在镜头对着它时，成片里才看得到。例如跟随镜头只拍到北京一角，那么其他城市的气泡在成片里就不会出现。
:::

播放器顶部可以在「跟随镜头」和「自由视角」之间切换。「跟随镜头」下看到的就是成片画面，相机按时间轴上的镜头走：

![跟随镜头下只拍到北京一角](./images/data-viz-follow-camera.webp)

1. **跟随镜头**：切到这里查看成片画面。
2. **成片画面**：示例中的镜头只对着北京一带，画面里只看得到北京的一个气泡。
3. **镜头对准数据**：生成数据层时弹出的提示条上也有这个按钮。

让成片拍到这一层的方法：

1. 在数据层列表里，点这一层右侧的菱形按钮（面板说明中写作「◇ 让成片的镜头对准它」）。
2. 片头会多出一个镜头关键帧，镜头对准整个数据范围。
3. 切回「跟随镜头」播放，气泡一个个弹出来，人口越多，气泡越大。

![点菱形按钮，在片头生成对准数据的镜头关键帧](./images/data-viz-camera-keyframe.webp)

1. **菱形按钮**：数据层卡片右侧的第二个按钮。
2. **片头的镜头关键帧**：相机轨的开头多了一个关键帧。

与此同时，右侧属性面板切到「关键帧」，显示 0 秒处这一帧的经度、纬度、缩放、俯仰和朝向，可以「更新视角」或「删除」；右下角提示已在 0 秒处记下镜头，范围取自数据层「城市人口」。

![跟随镜头下，气泡随时间一个个弹出](./images/data-viz-bubbles.webp)

1. **跟随镜头**：确认播放器处于跟随镜头模式。
2. **逐个弹出的气泡**：播放开始后，气泡按逐条出现的方式一个个弹出。
3. **当前时刻**：示例截图是刚开始播放不久（时间显示 00:00.24）的画面，此时只出现了前几个城市。

「跟随镜头」下看到的就是成片画面，用它来检查数据是否都在画面里。镜头和关键帧的更多用法见 [镜头](./camera.html)。

## 换一种画法

同一张表可以再生成一层，用另一种方式呈现：

![同一张表再加一层，类型选热力](./images/data-viz-heat-settings.webp)

1. **源表**：再次在「添加数据层」里选源表，仍选这张「城市人口.csv」。
2. **类型**：选「热力」，底部的状态随之变为「30 行 · 热力」。
3. **生成并添加**：预览确认后点它生成热力层。

生成后，人口多的城市底下会多出一团热力，人口越多，颜色越深。气泡层和热力层同时存在，叠在一起展示：

![气泡层与热力层叠加](./images/data-viz-heat-result.webp)

1. **热力层**：数据层列表变为 2 层，新的一层标为「热力」，显示「30 行 · 静态」。
2. **叠加效果**：气泡下方多了热力，两层同时显示。
3. **两条数据层**：时间轴的「数据层」轨上有两根条，分别对应气泡层和热力层。
4. **出现方式**：热力层的出现方式为「静态」，从 0 秒开始一直显示到片尾。

## 操作回顾

| 步骤 | 操作 |
|---|---|
| 导入表格 | 在「素材」里点「导入」，导入 CSV、GeoJSON 或 SHP |
| 选源表 | 「地图」›「数据表」，「源表」选这张表，列的类型自动识别 |
| 选类型 | 「气泡」或「热力」，经纬度、数值、标签自动对好 |
| 预览核对 | 点「预览」，核对落点和属性表 |
| 生成数据层 | 点「生成并添加」，时间轴上多一条数据层 |
| 镜头对准数据 | 点数据层的菱形按钮，在开头加对准数据范围的镜头关键帧 |

## 下一步

把数据放进三维地球或三维场景里，接下来可以看 [三维地球与三维场景](./globe-3d.html)。镜头关键帧的精细调整，见 [关键帧（一）：镜头](./keyframes-camera.html)。