---
title: 二维地图
source: https://vjmap.com/guide/visual/map.html
---

---
group: 地图、三维与组态
description: 用 CAD 图纸或互联网地图做底图，在地图里加数据源和点、线、面、热力、三维体块等图层，按数据配样式，再配上地图控件和点击交互。
---

# 二维地图

「2D地图」是一个可以往里面搭东西的组件：先选底图，可以是唯杰地图服务里的 CAD 图纸，也可以是高德、天地图等互联网地图；再在地图里加数据源和图层，把点位、路线、区域、热力、三维体块画上去；最后在地图外摆上比例尺、鹰眼、测量、图层管理等控件，配好点击要素后的联动。本篇按这个顺序介绍。

下图是「示例 · 互联网地图」模板预览时的地图部分：深色影像底图上叠了按负荷升高的分区体块、流光道路和设施点标注。

![互联网地图上的分区体块、流光道路和设施点](./images/map-overview.webp)

## 两种底图

| | CAD 图纸 | 互联网地图 |
|---|---|---|
| 底图来源 | 唯杰地图服务里已上传的 DWG 图纸 | 高德、天地图、OSM 或自定义 XYZ 瓦片 |
| 坐标 | 图纸自己的坐标（CAD 坐标系） | 经纬度（地理坐标系） |
| 适合 | 厂区、园区、管网、楼层平面等工程图纸 | 城市、区域分布，网点、轨迹、行政区 |
| 起手模板 | 「示例 · CAD 图纸」 | 「示例 · 互联网地图」 |

CAD 图纸来自唯杰地图服务：图纸要先上传到地图服务，这里才能选到。图纸的上传、图层和坐标等概念见 [VJMAP 开发指南](/guide/)。两种底图也能互相叠加，比如在 CAD 图纸下面垫一层互联网路网，访客工作区里「地图-叠加」分类的 15 个示例都是这类做法。

## 放一个地图

1. 在左侧组件库的竖向分类里点「地图」，把「2D地图」卡片加到画布上（悬停点「+」、双击或拖进来都行）。
2. 在右侧属性面板设好「组件大小」和「组件位置」，让地图占满需要的区域。
3. 新加的地图默认是互联网地图（高德·矢量），中心在经纬度 0, 0。在「场景」里把「中心点」改成你的区域（如经度 119.9、纬度 30.6），「缩放级别」改到合适的大小。
4. 在「底图」里换底图类型，或者进入地图内部换成 CAD 图纸（见下一节）。

![添加 2D地图并设置中心点和底图](./images/map-add-map.webp)

1. **地图分类**：组件库竖向分类里的「地图」，里面只有「2D地图」一个组件。
2. **2D地图**：悬停点「+」或双击加到画布上。
3. **地图组件**：画布上的地图，拖动四周手柄改大小。
4. **坐标系**：「CAD坐标系」或「地理坐标系(互联网底图)」。
5. **中心点和缩放级别**：地图打开时看哪里、看多大范围。进入地图内部后拖动、滚轮缩放地图，这里的数值也会跟着变。
6. **底图类型**：「空白底图」「天地图·矢量」「天地图·影像」「天地图·影像+注记」「高德·矢量」「高德·影像」「高德·影像+注记」「OSM」「自定义 XYZ」。

地图的属性面板还有几组常用设置：

| 分组 | 内容 |
|---|---|
| 场景 | 坐标系、中心点、缩放级别、旋转角、俯仰角、背景色。俯仰角大于 0 时地图斜着看，三维体块、三维柱才看得出高度 |
| 控件 | 地图自带的小控件开关：比例尺、缩放按钮、指南针、全屏按钮、坐标位置、缩略图(鹰眼)、绘图工具(CAD标绘) |
| 视图 | 数据自适应（数据更新后自动缩放到全部要素）、适应数据范围；「＋ 捕获当前视角」把当前视角存成预设，事件里可以「飞到」它 |
| 特效 | 特效质量（影响特效图层的画质与性能） |
| 图像资源 | 添加图标图片，供图标点等图层引用 |

::: tip 从模板开始更快
新建大屏时选「示例 · CAD 图纸」或「示例 · 互联网地图」：前者是厂区 CAD 一张图，图纸上已经叠好查询出来的折线、圆点和标记；后者是园区态势一张图，带分区体块、流光道路和设施标注。两侧栏和底栏已经摆好，地图自动铺满中间，改改数据就能用。
:::

## 选底图：CAD 图纸

双击地图进入内部编辑（见下一节），选中最上面的地图本体，在属性面板「CAD 服务」里点「选择地图…」，打开「选择地图」对话框。

![「选择地图」里的 CAD 图](./images/map-cad-pick.webp)

1. **页签**：「CAD 图」列出地图服务里的图纸；「互联网底图」切到在线底图。
2. **搜索**：按图 ID 搜索；刚上传的图纸点「刷新」。
3. **图纸卡片**：缩略图、图 ID、上传日期，角标是版本数。点一下选中。
4. **图 ID、版本和打开方式**：选中的图纸可以再选版本和打开方式，「栅格」加载最快。
5. **确定**：把地图换成这张图纸。

「CAD 服务」里另有「服务地址」和「Token」，默认指向唯杰地图服务；私有化部署时填自己的地图服务地址。「底图模式」选「空白地图」时不加载图纸，只按范围建一张空白的 CAD 坐标图，适合纯标绘。

## 选底图：互联网地图

在「选择地图」里切到「互联网底图」页签，选一种在线底图：

![「选择地图」里的互联网底图](./images/map-web-pick.webp)

1. **高德**：「高德 · 矢量」是街道路网，「高德 · 影像」是卫星影像，直接可用。
2. **天地图**：矢量和影像两种，需要天地图 Token。
3. **自定义 XYZ**：填自己的瓦片地址，如内网瓦片服务。
4. **空白底图**：只有背景色，适合只看数据的场景。
5. **提示**：切换底图会把地图切到「地理坐标系」。

::: warning 注意
CAD 坐标和经纬度不能混用。从 CAD 图纸切到互联网底图（或反过来）后，原来按图纸坐标画的数据会对不上位置，要换成对应坐标系的数据。
:::

## 进入地图内部

地图里的数据源和图层要进到地图内部才能编辑：双击画布上的地图，左侧换成地图自己的图层和物料，顶栏中间出现「退出组件编辑」。

![进入地图内部编辑（「示例 · CAD 图纸」模板）](./images/map-cad-inner.webp)

1. **退出组件编辑**：编辑完点它，或按 `Esc`、双击空白处，回到页面编辑。
2. **组件图层**：最上面是地图本体（以底图命名，如「CAD sys_zp」），下面分「数据源」「标绘层」「服务层」三组，后面的数字是个数。点一项，右侧显示它的属性。
3. **地图组件**：地图专用的物料库，竖向分类有「常用」「全部」「数据源」「服务」「标绘」「特效」，悬停点「+」加到当前地图里。
4. **地图**：在这里拖动、缩放查看效果，悬停要素会显示它的属性。
5. **CAD 服务**：选中地图本体时显示，换图纸、改服务地址和打开方式都在这里。

地图组件分四类：

| 分类 | 个数 | 内容 |
|---|---|---|
| 数据源 | 5 | GeoJSON 数据源、CAD 查询数据源、动态数据源、图形绘制源、CAD 绘制源。数据源本身不显示，供图层引用 |
| 标绘 | 27 | 标记、圆点、图标点、聚合点、信息窗、DIV 覆盖物、折线、曲线、箭头线、飞线、多边形、热力、区域、GeoJSON 图层、地理圆/扇形、文本标注、立体面、三维柱、符号聚合、标记聚合、流动线、路径动画、呼吸面、跳动符号、拉伸动画、符号沿路径、立体线 |
| 特效 | 21 | 特效标记、火焰、脉冲环、光晕、雷达扫描、烟雾、闪电、流星、漩涡、能量盾、烟花、准星，流光、流星线、闪电线、箭头流、蚂蚁线，着色器（点、线、全屏）、特效图标 |
| 服务 | 11 | 瓦片叠加、WMS 服务、WMTS 服务、静态图、视频、SVG 覆盖物、矢量瓦片、背景、天空、山体阴影、画布 |

::: tip 每种图层都有现成示例
访客工作区的「地图-数据源与图层」分类有 70 个示例，基本一种图层一个，名字形如「地图图层示例·热力(map-heatmap)」。打开就能看到这种图层怎么配。访客工作区是大家共用的，想在示例上改着试，先在卡片菜单里「创建副本」。
:::

## 数据源

图层的数据可以直接绑项目数据（见下一节），也可以先放进地图自己的数据源，再让一个或多个图层引用。几种数据源：

| 数据源 | 数据从哪来 |
|---|---|
| CAD 查询数据源 | 按条件从 CAD 图纸里查出图形，如某几个图层的线、某个范围内的实体 |
| GeoJSON 数据源 | 粘贴或编辑一段 GeoJSON，也可以随机生成测试数据 |
| 动态数据源 | 从接口取数，可定时刷新，也可以引用项目里的连接 |
| 图形绘制源 | 在地图上手工画点、线、面 |
| CAD 绘制源 | 在图纸上做 CAD 式标绘 |

### CAD 查询数据源

在「示例 · CAD 图纸」模板里，「CAD 线要素源」就是一个 CAD 查询数据源。选中它，在属性面板「CAD 图形查询」里点「查询配置」，打开「数据查询（CAD 图形）」：

![CAD 图形查询：写条件、执行查询、应用](./images/map-cad-query.webp)

1. **图纸预览**：当前图纸。用「地图框选」时在这里拖出查询范围。
2. **SQL 条件**：按实体属性写条件，如 `name='1' or name='2' or name='3'` 查图层名为 1、2、3 的实体。「增加条件」可以点选着加。
3. **AI 生成 SQL**：用一句话描述要查什么，让 AI 写条件。
4. **范围**：可选。留空不限范围；点「地图框选」在左边图上框一块，「清除」去掉范围。
5. **范围方式、坐标和条数**：与范围「相交」的实体都算，还是只算完全落在范围内的；「几何」返回完整图形（此时忽略下面的返回字段），「位置」只返回位置；「条数」是最多返回多少个。
6. **执行查询**：先试查一次，右边显示查到的条数（图中 200 条），下方是查询结果。
7. **应用**：保存查询配置，引用这个数据源的图层随即更新。

### GeoJSON 数据源

「示例 · 互联网地图」模板的「园区分区」「园区道路」「设施点」「分区标注」都是 GeoJSON 数据源。选中后点「数据界面」，在对话框里编辑：

![GeoJSON 数据源的编辑对话框](./images/map-geojson-src.webp)

1. **随机数据、格式化、清空**：「随机数据」生成测试用的点、线、面。
2. **统计**：一共几个要素，其中点、线、面各几个；「查看数据范围」看数据落在哪。
3. **GeoJSON 文本**：直接编辑。每个要素的 `properties` 就是它的属性，如 `name`（名称）、`value`（数值），图层可以按这些属性取名称、配颜色、定高度。
4. **确认**：保存修改。

::: tip 发布为项目数据源
数据源的属性面板里有「发布为项目数据源」开关。打开后，这份地图数据会出现在项目的数据列表里，表格、列表等普通组件也能绑定它，例如「左侧列表列出设施，点一行地图飞过去」。
:::

## 给图层接数据

下面用一张城市网点表演示：在互联网地图上，每个城市一个圆点，点的大小和颜色按销售额变化。

1. 先在顶部菜单「数据 → 编辑数据...」里新建一个 JSON 连接「城市网点」，每行有「城市」「经度」「纬度」「销售额」四个字段。新建连接的方法见[数据接入与绑定](./data.html)。
2. 双击地图进入内部。新加的地图里已经有一个带演示数据的「圆点」图层；没有的话，在「标绘」里加一个「圆点示例」。
3. 选中这个圆点图层，在属性面板切到「数据」页签。
4. 「数据来源」选「项目数据源」，在下方字段清单里勾选「经度」「纬度」「城市」「销售额」。
5. 勾选的字段自动填进上方「字段映射」：经度/横坐标、纬度/纵坐标、名称、数值。没对上的，在下拉框里改。

![圆点图层的字段映射](./images/map-layer-bind.webp)

1. **圆点**：每个城市一个点，位置来自「经度」「纬度」。
2. **来源方式**：「字段绑定」直接绑项目数据里的字段；「数据源」引用地图内部的某个数据源，再指定用哪个属性做名称、数值。
3. **字段映射**：经度/横坐标、纬度/纵坐标、名称、数值各绑一个字段。CAD 图纸上横坐标、纵坐标填图纸坐标。线类图层还有分组、排序等映射，用来把多行连成一条线。
4. **数据来源**：「项目数据源」「组件自有数据」「演示数据」三选一，勾选字段即可映射。

数据页签上面几组也常用：「属性过滤」只画满足条件的要素，「悬停提示」和「要素弹窗」见后文，「组件筛选」「数据过滤」与普通组件相同。

## 按数据设置样式

切回「样式」页签。图层的固定样式（如圆点的颜色、半径、描边）在「圆点样式」里改；要让样式随数据变化，展开「数据驱动样式（表达式）」：

1. 「颜色·取值」选「按属性」，「颜色·字段」填 `value`（字段映射里的「数值」），「颜色·映射」每行写一档：`50 => #2fb6c8`、`200 => #ffca68`、`400 => #ff5f7d`。
2. 「半径·取值」选「按属性」，字段同样填 `value`，映射写 `50 => 8`、`500 => 28`。
3. 中间的数值按比例过渡：销售额最高的上海又大又红，绍兴、常州这些小的是浅绿色的小点。

![数据驱动样式：颜色和半径随销售额变化](./images/map-style-driven.webp)

1. **颜色**：取值有「常量」「按属性」「按缩放」三种。「按缩放」让样式随地图缩放级别变化，如放大后点变大。
2. **半径**：同样按属性映射，映射的左边是数值，右边是半径（像素）。
3. **圆点样式**：不随数据变的固定样式，以及「聚合显示」「悬停颜色」「选中颜色」「选中半径」。
4. **效果**：上海的销售额 486，圆点最大、最红。

其他图层也是同样的思路。比如「示例 · 互联网地图」的「分区体块」是立体面图层：「高度来源」选「按数值属性」，体块高度 = 数值 × 「高度系数」；顶面颜色按 `value` 映射成从深蓝到红的色带。要看出体块的高度，记得把地图「场景」里的俯仰角调大（模板用的是 48°）。

每个图层「基础」里还有「限制缩放区间」：只在一定缩放级别内显示，比如放大到街道级再显示设施名称，避免全图时文字挤成一团。

## 悬停提示与要素弹窗

在图层的「数据」页签：

![悬停提示的设置和效果](./images/map-tooltip.webp)

1. **悬停提示**：打开「启用悬停提示」，「显示字段」填要显示的属性，多个用逗号隔开（如 `name,value`，即名称和数值）；「标题字段」填作提示标题的属性。
2. **效果**：鼠标移到上海的圆点上，显示城市名和销售额。
3. **要素弹窗**：「点击弹出画面」选一个画面，点击要素时在要素旁弹出这个画面，画面里的组件可以显示这个要素的数据。画面的做法见[页面与画面](./pages-windows.html)。

## 地图控件

地图上的小控件有两种做法：

- **地图自带控件**：在地图属性面板的「控件」里打开开关，控件画在地图的角上，样式简单。
- **地图控件组件**：组件库竖向分类里的「地图控件组件」，一共 12 个，是独立的组件，可以摆在页面任何位置、单独设外观。属性里的「关联地图」不选时，自动关联本页的第一个地图。

下图是访客工作区「地图-控件」分类里的「CAD 图层总控」示例（预览时取消勾选了「道路」图层）：

![地图控件组件：CAD 图层、缩放、鹰眼、测量、坐标、导出、视角](./images/map-controls.webp)

1. **CAD图层**：列出图纸的全部图层，勾选显隐，支持「全选」「全关」「反选」和搜索；右上角是显示的图层数。图中关掉了「道路」，图纸上的道路线随即消失。
2. **缩放控件**：放大、缩小，中间显示当前级别，最下面是复位。
3. **鹰眼**：缩略全图，框出当前视野，点击可以跳过去。
4. **测量工具**：量「距离」或「面积」。点「开始量算」，在地图上点击采点，双击结束；CAD 图纸上按图纸单位计算。
5. **坐标位置**：显示鼠标所在位置的坐标。
6. **导出(图片/PDF)**：把当前地图导出成图片或 PDF。
7. **视角+全屏**：左右旋转、回到正北、复位视角、全屏。

全部 12 个地图控件组件：

| 控件 | 用途 |
|---|---|
| 坐标位置、比例尺 | 显示鼠标所在坐标、当前比例尺 |
| 数据图例 | 按图层的颜色映射显示图例 |
| 缩放控件、指南针、视角+全屏 | 缩放、旋转与回正、复位视角、全屏 |
| 鹰眼 | 缩略全图，点击跳转 |
| 导出(图片/PDF)、测量工具 | 导出当前地图，量距离和面积 |
| 底图切换、CAD图层、图层管理 | 切换底图，CAD 图层显隐，数据图层显隐 |

「底图切换」可以选「缩略卡」「分段」「列表」「下拉」四种布局；「可选底图」用逗号分隔的代号列出可切换的底图，如 `gaode-vec,gaode-img,osm`（高德矢量、高德影像、OSM），天地图是 `tianditu-vec`、`tianditu-img`、`tianditu-img-label`；「默认底图」填打开时用哪个。「图层管理」列出地图里的图层和数据源，运行时可以勾选显隐。

## 地图的点击与联动

点击地图上的要素、地图视角变化等都可以触发动作。选中地图组件（不用进入内部），在属性面板「事件」页签点「添加事件」：

![地图的「添加事件」：点击区域时逐个图层设置动作](./images/map-event-region.webp)

1. **触发**：除了通用的「点击」「鼠标移入时」「入场」等，地图还有「点击标记时」「点击区域时」「选中时」「取消选中时」「悬停要素时」「点击地图时」「双击地图时」「点击空白处时」「右键地图时」「右键菜单项」「视角变化时」「地图就绪时」「数据源加载完成时」「地图出错时」。
2. **逐项设置**：打开后，点中不同图层的要素可以执行不同的动作。
3. **图层页签**：每个图层一个页签（图中是模板里的 6 个图层），分别配置。
4. **动作**：可以控制别的组件（修改设置、切换状态、打开画面…），也可以控制地图本身：飞到视角、缩放到数据范围、缩放到全图、放大/缩小、设置缩放级别、复位方向、旋转与俯仰、显隐图层、显隐数据源、切换底图、切换CAD图、清除选中、刷新数据等；「高级/其他」里还有「地图·设置图层属性」「地图·设置数据源数据」。
5. **添加动作**：一个事件可以接多个动作，每个动作可以设延迟和时长。

常见做法：点击区域时打开这个分区的详情画面；点击列表的一行，让地图「飞到」对应位置；用按钮切换「显隐图层」。触发器与动作的完整说明见[事件交互与多状态](./events.html)。

## 常见问题

### CAD 图纸显示不出来？

先确认地图本体「CAD 服务」里的服务地址和 Token 正确，图 ID 在「选择地图」里能搜到。图纸很大时，「打开方式」用「栅格」加载更快。

### 天地图是空白的？

天地图需要 Token。没有 Token 时先用高德或 OSM。

### 点都画到海里或者图外去了？

坐标对不上：互联网地图要用经纬度，CAD 图纸要用图纸坐标；还要检查字段映射里经度、纬度（横、纵坐标）有没有绑反。

### 三维体块、三维柱看起来是平的？

把地图「场景」里的俯仰角调大，斜着看才有高度。

### 改了「按属性」的样式没有变化？

「字段」要填图层里的属性名。用字段绑定时，名称和数值分别叫 `name`、`value`；用数据源时，填数据源里要素的属性名。

## 相关文档

- [数据接入与绑定](./data.html)：新建连接、绑定字段，地图图层的项目数据从这里来。
- [事件交互与多状态](./events.html)：触发器和动作的完整列表。
- [三维场景](./scene3d.html)、[组态](./scada.html)：另外两种可以往里面搭东西的组件。
- [VJMAP 开发指南](/guide/)：唯杰地图服务、CAD 图纸上传与坐标。