1、概述

本文档主要介绍 Smartbi 中 HTML5 地图的制作方法，以及如何将制作的地图应用到 Smartbi 中。通过本文档，用户可以按照自己的需求制作和使用 HTML5 地图。

注：地图文件只能在chrome浏览器上进行编辑创建。

2、地图实现原理

地图分析是 Smartbi 的特色功能，能够将指标在地图之上进行展现、渲染，更形象生动地展现各指标在区域中的分布情况。Smartbi 原有的地图功能是基于Flash实现的，但是由于iPhone、iPad等移动平台不支持Flash，所以必须开发符合HTML5规范的地图，通过浏览器展现。

下面简单介绍一下展现原理：

Smartbi的HTML5地图功能不同于GIS的地图，它是以SVG文件的方式实现地图展现和KPI渲染。
每个地图SVG文件上分多个区块，每一个区块都有一个编码；程序正是通过这个编码与数据进行对应，从而展现各区域分布情况。如图所示的A1、A2、A3等，通过编号与表数据对应，即可以在地图上展现人口分布信息。
　　　　
地图允许从地图下钻到下一层地图，比如从中国地图可以钻到各个省份的地图。这个是由多张地图SVG文件实现的，首先有1张全国地图文件，然后有30多个省及直辖市地图文件。从全国地图下钻到省份地图，即是通过省的编码来获取该省的地图文件进行展现。

用户可以根据实际需求绘制新的SVG地图、并进行重新配置，无须修改产品的源代码。

文档目录：

相关文档：

3、术语

术语	说明
区域	文档中所说的区域是指点的个数大于或等于3的，由直线段构成的闭合多边形，并且具有标注点、区域名、区域id属性。
子区域	是指某区域由多个闭合的区域组成（他们共用名称、id等），如中国，可能还想把其所属岛屿绘制在地图上，这时编辑器就通过添加子区域的功能，实现某行政区域包含多个闭合的区域。
标注点	是区域内适合注记的位置，通常是标在区域的中心位置，如果区域太小的话可以考虑标在区域之外，然后通过线连接区域和标注点。
自动捕捉	是指在绘制区域的过程中，鼠标能自动识别当前图层中已有区域的节点，并高亮显示捕捉到的节点。
自动接边	在绘制区域的过程中，如果正在绘制的区域和已有区域有公共边，则绘制过程中，按顺序点击公共边的第一个点，然后点击公共边上的最后一个点，系统能自动将公共边加入到新绘制的区域，其通常和自动捕捉一起使用。
交点	两个或两个以上区域的公共点，直观表现是具有三个或三个以上方向延伸的点。
拆分图层	将当前图层的所有区域，拆分到不同图层，以实现每个图层只有一个区域，拆分后的图层名以区域的名称命名，如果没有，系统自动赋予。
合并图层	将编辑器内当前所有图层合并到一个图层。

4、前提条件

这里仅介绍可以在产品中地图分析模块使用的地图制作过程；
制作的地图如果需要能在地图分析中正确使用，地图上每个区域需要：
1. 地图上每个区域都是一个闭合的多边形；
2. 区域编码：通过该编码和实际的应用数据关联，如果不指定编码，则在地图分析上只能看到地图，而无法知道该区域的数据分布情况；
3. 区域名称：通常每个区域都会有个名称，如果有，可在地图上显示该区域名称；
4. 标注点（中心点）：最多只能有一个，多个的话，系统应用也只是应用其中的一个，如果有，系统会将区域名称或需要标注的图标等标注在该位置；
5. 标注点和区域的连线：可选，最多只能有一条，用于标注点在区域之外的情况。
区域编码的指定是依据项目中已有区域数据的编码而定；
地图绘制完成时，要使用拆分图层功能将图层内每个区域拆分成一个单独的图层。
最终保存的结果是每个区域在地图编辑器中对应一个图层。

注意

区域id和区域名称在同一主题图层内（如中国省份行政图）最好唯一，否则自动拆分图层时，可能会出现问题，具体请看拆分图层规则。

图层ID需要与区域ID一致，在地图分析进行匹配时，会匹配图层ID。

5、开发环境

该编辑器使用HTML 5 SVG + JavaScript 技术，在支持这些技术的浏览器都可运行，推荐使用 Firefox 3.6, Chrome 6+浏览器。

6、制作新地图

地图编辑器入口：http://ip:port /smartbi/vision/designer/svg-editor.html

注：地图文件只能在chrome浏览器上进行编辑创建。(图片名称须是英文名称，如gdsvg.jpg)
以制作广东省各市地图为例，其中使用到一张含有广东省的地级市边界的图片 gdsvg.jpg 作为底图，依据该地图制作出广东省的地级市行政边界图。制作流程是：

6.1 一般流程

新建图层>上传底图 > 添加底图 > 绘制区域 >[添加子区域] 区域属性 >自动拆分图层 >导出地图
一般会把全部区域绘制完成，然后再编辑区域属性，当然也可以画完一个编辑一个，当所有区域和区域属性编辑完成后再执行拆分图层，确认无误，导出地图，期间可能中断绘制或备份，使用导出地图功能导出即可，下次想继续的时候使用主菜单的导入svg地图。然后就可以接着绘制工作。

注意

绘制过程中要最好隔断时间就使用导出地图功能导出一份做备份，防止意外情况导致丢失。

6.2 整体布局

6.2.1 初始状态

6.2.2 区域选中状态

鼠标单击初始状态的区域或单击编辑状态的区域，区域进入选中状态。此时能移动、删除、旋转区域，编辑区域边框和填充颜色等。

6.2.3 多选状态

鼠标按住工作区域空白部分，不释放，拖动鼠标，直到把想选中的区域选中，释放鼠标，此时如果有多个区域选中，编辑器就进入多选状态。此时可批量删除和移动区域。

6.2.4 区域编辑状态

鼠标双击初始状态的区域，或者单击选中状态的区域，区域进入编辑状态。在编辑状态，用户可以修改区域名称、区域id，给区域添加标注点和标注点和区域的连线。

6.3 新建图层

打开图层管理区域，使用图层管理上的工具条新建/删除图层。

新建一个图层，命名为底图，id为dttest，以该图层为当前活动图层。
新建一个图层，命名为编辑层，id为bjc
删除编辑器缺省的图层Layer 1

6.4 上传底图

注：上传的图片名称必须是英文名，不能含有中文字。

1、单击编辑器上侧工具栏的主菜单>上传图片[0]

2、弹出选择图片对话框，选择要作为底图的图片，单击打开，如果上传成功会提示上传成功。

3、记住以上上传的图片名，如gdsvg.jpg

6.5 添加底图

1、单击图层管理区域的底图图层，将其设为当前活动图层。

2、单击左侧工具栏的图片工具，如下图：

3、单击地图工作区域，鼠标释放后，弹出图片路径窗口，将其中的logo.png替换为刚上床的图片名称gdsvg.jpg，点击确定

4、此时底图已添加进来，如果原图片大小超过地图工作区域大小（缺省640*480），需要按比例缩放到地图工作区域大小，方法如下：

单击选中该图片，在工作区域上侧工具栏，如下图:

图上显示图片的原始大小为1000*737

一般设x：0，y：0；工作区域大小缺省为640*480(宽*高)，图片原始大小为1000*737，为了调整到工作区域大小（图片需要按比例缩放，否则会变形，公式为：图片原始宽度/原始高度=调整后宽度/调整后高度），图片高度我们可以设为 630,宽度设为：630×737/1000=463.3

6.6 绘制区域

区域的绘制以单击编辑器左侧工具栏绘区域图形工具[6]开始，以双击最后一个区域坐标点结束绘制。在此之前需要先了解自动捕捉和自动接边。

6.6.1 将工作区域放大到适合绘制的大小

拉框放大：以放大湛江区域为例，单击左侧工具栏缩放工具，鼠标按住要放大区域的左上角不释放，移动鼠标到要放大区域的右下角，释放鼠标，即完成拉框放大。

使用工作区域下方的更改缩放等级：直接填写要缩放的比例

6.6.2 启动区域绘制

1、单击图层管理区域的编辑层，将其作为当前活动图层

2、单击编辑器左侧工具栏绘区域图形工具[6]或者在键盘上按6

3、绘制区域：以绘制茂名边界为例，沿着底图上茂名边界单击，当需要结束绘制茂名区域时，双击结束。如果想继续绘制其他区域，循环此步骤。

绘制过程图

结束绘制图

6.6.3 移动地图

区域绘制期间如果要绘制的底图区域不在当前视图范围内的话，使用以下方法移动地图

6.7 区域属性的编辑

当同主题的区域（广东省地级市界）全部绘制完成以后，可以编辑每个区域的属性，当然也可以画完一个编辑一个。此步骤主要是给区域添加名称、添加区域id和添加区域标注点。绘制完区域以后：

1，用户可以立马编辑该区域的属性；

2，也可以在所有区域绘制完后统一编辑；

3，也可在拆分图层后编辑。三者在编辑方法上不会有任何区别，这里推荐使用第二种。
要能编辑属性，首先需要区域进入编辑状态，然后就可以修改区域名称、修改区域id、添加标注点、添加子区域、添加标注点和区域的连线等操作。

6.7.1 进入编辑状态

双击初始状态的区域或单击选中状态的区域，区域就可进入编辑状态，详细的可参考区域状态的切换。如下图：

双击初始状态图

单击选中状态图

茂名市进入编辑状态界面

6.7.2 添加子区域

如果茂名市还有其他的独立区域如岛屿，单击工作区域上侧的添加子区域 图标，然后在工作区域需要添加子区域的位置单击绘制区域，并以双击结束绘制，其绘制过程和绘制区域是一样的，只是触发进入绘制状态的入口不一样。

双击结束绘制子区域图：

6.7.3 添加标注点

标注点是区域内适合注记的位置，如该区域的名称想标注在哪，就在哪添加标注点，可能是区域中心位置，每个区域只需要一个标注点。

1、添加标注点：单击工作区域上侧工具栏的添加标注点图标，然后在区域内单击一下即可。

2、移动、删除标注点：将区域退出编辑状态，然后单击要标注点，标注点进入选中状态，鼠标拖住不放，就可实现移动，按delete键则可删除。

选中状态的标注点

6.7.4 添加标注点和区域的连线

如果区域足够大可以容纳标注的话，通常是不需要连线的，只有在全局视图内，区域可能很小，其容纳不下他的注记，这时可能就需要把注记标注在区域之外，也就是把标注点添加在区域之外，这时就需要添加连线了。每个区域只需要一条连线，每个连线的一端是区域，另一端是标注点。标注点可以在添加完连线再添加，也可以之前添加。

1、添加连线：单击工作区域上侧工具栏的添加标注点和区域的连线 ，然后鼠标按住区域内某点不放，拖动鼠标到标注点的位置，释放鼠标。

2、移动、删除连线：将区域退出编辑状态，然后单击连线，连线进入选中状态，鼠标拖住不放，就可实现移动，按delete键则可删除。

选中状态的连线

6.7.5 区域名称和区域id

在工作区域上侧工具栏的区域名称和区域id输入框中输入，然后按enter键实现修改。

6.8 拆分图层

拆分图层前，先导出一份数据作为备份。请见导出svg地图。是将当前活动的图层（这里是编辑层），自动按区域拆分成不同图层，图层名以区域名命名，图层id以区域id命名。有两种方法：

1、使用工作区域上侧工具栏的拆分图层按钮

2、使用图层管理面板上的工具条的拆分图层工具

拆分完图层要检查图层名和id 是否正确，确认无误后，将底图设为不可见，导出地图。

拆分后效果图

6.9 导出svg地图

将底图设为不见。
单击主菜单>导出 SVG或者使用如下方法导出svg地图。

1、单击工作区域上侧工具栏的编辑源码按钮

弹出如下窗口：

该窗口内显示的即是svg源码，可以Ctrl+A全选，然后复制粘帖到记事本。

2、单击导出按钮，弹出：

选中仅导出可见图层，输入文件名，单击确定即可。如果想备份，取消选中仅导出可见图层，单击确定。文件存储目录在浏览器设置的缺省下载目录，如果是火狐浏览器，可以通过工具 > 下载查看，如果是chrome 浏览器，可以通过工具 > 下载内容查看。

7、自动捕捉和自动接边

7.1 自动捕捉

自动捕捉是指在绘制区域的过程中，鼠标能自动识别当前图层中已有区域的节点，并高亮显示捕捉到的节点，主要用于新绘制区域和已有区域接边。

7.1.1 捕捉状态

捕捉有两种状态：在节点上，在节点间的连线上，分别表现为和，如下图。

鼠标在已有区域的节点上

鼠标在已有区域的连线上

7.1.2 开启自动捕捉

在绘制区域或者添加子区域的状态下，捕捉自动开启。

1、单击工作区域左侧工具栏绘区域图形工具[6],然后鼠标移到当前图层的区域边线上即可实现自动捕捉。

2、在区域编辑状态，单击添加子区域，,然后鼠标移到当前图层的区域边线上即可实现自动捕捉。

7.2 自动接边

在绘制区域的过程中，如果正在绘制的区域和已有区域有公共边，则绘制过程中，按顺序点击公共边的第一个点，然后点击公共边上的最后一个点，系统能自动将公共边加入到新绘制的区域。下面以几个典型的接边情况分别进行说明。

7.2.1 接边规则

1、面积小原则

新区域和已有区域通过两个点确认计算出公共边，闭合区域通过两点其实能获取到两条公共边，系统缺省是取两条公共边中与新区域已有坐标构成面积小的公共边作为新区域的一部分，如下图：

当双击A3结束绘制新区域的时候，取的是A3-A4-A1组成的公共边，因为取他构成的面积小。

2、何时会自动接边？

在接边之前，与已有区域的公共点在新绘制区域是连续的两个点时，系统会自动接边，譬如：

要想自动接上A1-A4-A3这条边，有以下方法：

用户可以单击A1 > B2 > B3 > B4，双击A3（双击代表结束绘制），因为此时A1和A3在接边之前在area2中是连续的两个点（闭合区域是首尾相连的）
也可以单击B2 > A1 > A3 > B4,双击B3结束绘制

而如果在单击A1和A3之间有单击然和一个不在这条公共边上的点，则不能接边。

说明

以上方法只是说明何时会自动接边，实际上用户可以随意绘制，只要记住接边是在连续的两个点并面积最小原则即可。

7.2.2 只和一个区域有公共边的情况

只需要单击公共边的第一个点和最后一个点，即可完成这种情况的接边。以绘制云浮边界为例，他和茂名市有条公共边，如下图：

1、鼠标移到公共点1

2、单击公共点1，鼠标移到公共点2

单击前效果图

3、单击公共点2，完成接边

单击后效果图

7.2.3 同时和多个相邻区域接边

在此之前，先介绍交点的概念，也即有三条以上线汇聚的点。直观表现是两个或两个以上区域的公共点。如下图：

当同时和两个或两个以上相邻区域有公共边时，除了要单击公共边的第一个点和最后一个点，公共边上的交点也都是要按顺序点击的才能实现自动接边。所以要实现和多个相邻区域接边，依次要单击：
公共边的第一个点 > 交点1 > 交点2 > … > 公共边的最后一个点。

如下图：阳江市同时和上侧和左侧的区域有公共边，这时我们不能通过单击公共点1和单击公共点2实现自动接边，而是要单击公共点1，在单击交点，最后单击公共点2实现自动接边。

1、单击公共点1，鼠标移到交点

2、单击交点，鼠标移到公共点2

3、单击公共点2，完成接边

7.2.4 将一个大区域拆分成多个小区域

如，已有广东省的边界图，然后想绘制广东省地级市的行政图，这时，就可以把广东省的边界图导入编辑器，并应用和广东省界公共的部分。
需要注意的是，这样绘制的小区域也是闭合区域，只是和大区域公共的部分使用自动接边完成，不需要重复绘制而已，而不是简单的把大区域用几条线分开。

1、绘制郁南县：单击公共点1 > 单击公共点6，然后依据底图绘制，双击结束。

2、绘制罗定市：单击公共点1 > 交点 > 公共点2，然后依据底图绘制，双击结束绘制。

单击公共点1，鼠标移到交点

单击交点，鼠标移到公共点2

单击公共点2，完成接边，其他根据底图绘制。

依据此原理，绘制其他县，最后的结果如下：

7.2.5 特殊情况

现有如下区域

想提取出子区域1，如果单击公共点1和公共点2，此时获取的并不会是子区域1（因为它面积比较大），这时我们就可以单击公共点1，再单击除公共点2外的下一个公共点（选取原则是它和公共点1尽可能的相近），最后单击公共点2即可。

8、拆分图层规则

拆分图层是按当前图层内的区域拆分，每个区域会对应一个图层，图层名以区域名称命名，图层id以区域id命名，区域名如果为空，系统自动赋予一个图层名，如果存在两个或两个以上同名称的区域，如存在三个名称为广州的区域，则拆分后的图层名为：广州、广州1、广州2。

8.1 特殊情况

当当前活动的图层名和当前图层内的区域名称同名时，拆分时与当前图层名同名的区域还会遗留在当前图层，当只有一个区域和图层名同名时，不会有任何问题，但如果有两个或两个以上区域与图层名同名的话，拆分后就会出现一个图层对应多个区域的问题。
例如：当前活动图层名为茂名，该图层内有两个名称为茂名的区域，拆分后，茂名图层上就会有两个名称为茂名的区域。

9、其他功能主题

9.1 区域状态的切换

在编辑器中，区域总共有三种状态：初始状态、选中状态、编辑状态。具体的切换如下图和表格：

目的状态	操作
切换到选中状态	单击初始状态
切换到选中状态	单击编辑状态
切换到编辑状态	双击初始状态
切换到编辑状态	单击选中状态
切换到初始状态	单击空白区域或其他区域