二维地图

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

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

两种底图

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

放一个地图

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

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

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

选底图：CAD 图纸

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

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

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

选底图：互联网地图

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

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

进入地图内部

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

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

地图组件分四类：

数据源

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

CAD 查询数据源

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

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 数据源。选中后点「数据界面」，在对话框里编辑：

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

给图层接数据

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

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

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

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

按数据设置样式

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

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

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

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

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

悬停提示与要素弹窗

在图层的「数据」页签：

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

地图控件

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

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

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

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

全部 12 个地图控件组件：

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

地图的点击与联动

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

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

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

常见问题

CAD 图纸显示不出来？

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

天地图是空白的？

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

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

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

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

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

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

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

相关文档

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