1.1 问题描述

从文档 自定义图片作为地图边界 中可知，我们可以通过上传图片制作地图，那么如何使用图片制作钻取地图呢？

例如：点击商场分布中的 2号楼 ，可钻取查看其内部平面分布图。如下图所示：

1.2 实现思路

在「地图配置>自定义图片」中，将图片按照层级关系分别导入，低层级的图片名称与高层级图片中对应区域的区域名保持一致即可。如下图所示

2.1 地图配置自定义图片

点击下载本例要使用的两张图片：图片素材.rar

1）打开设计器后，点击菜单栏「服务器>地图配置」，浏览器登录数据决策系统。

2）选择「自定义图片」，首先导入的是高层级的「商场分布图」，此时要先选中「自定义图片」目录，再点击目录右上角的添加按钮，设置要添加的图片名称。如下图所示：

3）导入商场分布图后，使用画多边形工具，圈出几个楼群分布，并设置每个区域的区域名。全部设置完成后点击右上角「保存」即可。如下图所示：

4）再在目录中选中刚刚保存的「商场分布图」，再次点击目录右上方的添加按钮，为其添加下一层级「2号楼综合区」。

注：层级下的目录名称必须与上一层级中某个区域的区域名一致，才能实现钻取。

重复之前自定义图片的步骤，对「2号楼综合区」进行区域划分和命名，完成后点击右上角「保存」即可。最终效果如下图所示：

5）完成自定义图片制作后，点击右上角「同步地理文件」，地图即可生效。

2.2 钻取地图模板制作

2.2.1 准备数据

点击设计器左上角「文件>新建决策报表」，新建 内置数据集 Embedded1 ，本例仅简单示范钻取效果，故数据非常简单。如下图所示：

2.2.2 设计图表

1）将钻取地图拖入 body 界面，双击图表，将钻取地图的地图边界设置为自定义的「商场分布图」。如下图所示：

2）绑定地图数据：本例选择的是底层数据汇总，绑定时即绑定第二层的区域名和值即可。

2.3 效果预览

2.3.1 PC 端

保存报表，点击「PC端预览」，效果如 1.1 节效果图所示。

2.3.2 移动端

App 端和 HTML5 端均支持，效果如下图所示：

注：由于模板需本地自定义地图配置，故本例不提供模板。