CN106898248A - 一种基于FusionMap组件的自定义地图呈现方法 - Google Patents

Abstract

本发明公开了一种基于FusionMap组件的自定义地图呈现方法，所述方法通过加载静态图片，提取其中包含的路径信息，生成SVG格式的矢量地图信息，再使用转换程序，将此SVG信息解析并转换为FusionMap可识别的JS类型文件，扩展FusionMap地图资源，完成自定义地图呈现。本发明通过可以将任意级别的地图，基于FusionMap组件在监测系统中展现出来，地图的渲染方式与组件原生地图相同，除展示组件已有的行政区域地图外，还可以展示自定义的区域地图信息。本发明可应用在区域监测系统，满足自定义区域地图呈现场景。

Description

一种基于FusionMap组件的自定义地图呈现方法

技术领域

本发明涉及计算机技术领域，具体涉及一种基于FusionMap组件的自定义地图呈现方法，一种使用静态图片制作自定义地图并通过FusionMap组件呈现的方法。

背景技术

在各类网络监控系统中，为了能够直观地监测运营情况，通常会将基本监测元素统计汇总到各个区域，利用第三方地图组件如FusionMap将数据呈现出来。FusionMap组件提供世界各地的基本地图级别信息，可直接使用。对于实际监测应用场景，不仅使用地图基本地理区域划分，还会使用更小级别小区域的地图，或将地图人为划分为若干个统计区域，这类区域划分方式在FusionMap图形组件中是没有直接提供的。对于这些场景，在不更换第三方地图组件的前提下，需要能够展现任意自定义区域的地图信息。

发明内容

本发明要解决的技术问题是：本发明针对以上问题，提供一种基于FusionMap组件的自定义地图呈现方法。

本发明所采用的技术方案为：

一种基于FusionMap组件的自定义地图呈现方法，所述方法通过加载静态图片，提取其中包含的路径信息，生成SVG格式的矢量地图信息，再使用转换程序，将此SVG信息解析并转换为FusionMap可识别的JS类型文件，扩展FusionMap地图资源，完成自定义地图呈现。

所述方法实现步骤如下：

1）获取一张包含地图区域轮廓的静态图片；

2）运行Inkscape程序，将图片导入；使用提取位图轮廓功能，设置轮廓提取参数，进行轮廓提取，选择区分度较好的图层，得到提取结果；

3）配置填色和笔廓绘制，完成图层的背景和轮廓绘制；

4）将调整完成的图层保存为SVG格式文件；

5）通过程序生成FusionMap可加载的JS类型文件；

6）使用FusionMap组件加载JS文件，根据需要调整自定义地图呈现效果。

所述JS类型文件生成过程如下：

SVG解析模块定义好SVG文件的解析规则，解析出其中的path标签的d属性值，记录各个区域的图形信息；转换模块定义好地图JS文件结构，首层包含以下5个元素：name、baseWidth、baseHeight、baseScaleFactor 、entities，其中baseWidth和baseHeight决定图形展示的画布大小，baseScaleFactor决定图形的缩放比例；entities中定义每个区域的信息，entities包含5个元素：outlines、label、shortLabel、labelPosition、labelAlignment，其中outlines对应SVG中的path信息，需要进行格式转换；其余元素定义好标签显示内容；转换完成后生成fusioncharts.region.js文件。

所述方法采用工具Inkscape和FusionMap Html5组件实现。FusionMap组件使用Html5技术渲染地图。

所述方法根据需要提供相应地图的静态图片，使用Inkscape工具将图片文件提取为SVG文件；

JAVA虚拟机运行SVG到FusionMap文件转换适配程序，配置转换需要的参数，得到fusioncharts.region.js矢量地图文件；

在Web应用系统中，使用FusionMap组件调用上一步的地图文件，呈现自定义地图。

本发明的有益效果为：

本发明通过可以将任意级别的地图，基于FusionMap组件在监测系统中展现出来，地图的渲染方式与组件原生地图相同，除展示组件已有的行政区域地图外，还可以展示自定义的区域地图信息。本发明可应用在区域监测系统，满足自定义区域地图呈现场景。

具体实施方式

下面结合具体实施方式对本发明进一步说明：

实施例1：

一种基于FusionMap组件的自定义地图呈现方法，所述方法通过加载静态图片，提取其中包含的路径信息，生成SVG格式的矢量地图信息，再使用转换程序，将此SVG信息解析并转换为FusionMap可识别的JS类型文件，扩展FusionMap地图资源，完成自定义地图呈现。

实施例2：

在实施例1的基础上，本实施例所述方法实现步骤如下：

1）获取一张包含地图区域轮廓的静态图片；

2）运行Inkscape程序，将图片导入；使用提取位图轮廓功能，设置轮廓提取参数，进行轮廓提取，选择区分度较好的图层，得到提取结果；

3）配置填色和笔廓绘制，完成图层的背景和轮廓绘制；

4）将调整完成的图层保存为SVG格式文件；

5）通过程序生成FusionMap可加载的JS类型文件；

6）使用FusionMap组件加载JS文件，根据需要调整自定义地图呈现效果。

通过上述方式，可以将任意级别的地图，基于FusionMap组件在监测系统中展现出来，地图的渲染方式与组件原生地图相同。

实施例3：

在实施例2的基础上，本实施例所述JS类型文件生成过程如下：

SVG解析模块定义好SVG文件的解析规则，解析出其中的path标签的d属性值，记录各个区域的图形信息；转换模块定义好地图JS文件结构，首层包含以下5个元素：name、baseWidth、baseHeight、baseScaleFactor 、entities，其中baseWidth和baseHeight决定图形展示的画布大小，baseScaleFactor决定图形的缩放比例；entities中定义每个区域的信息，entities包含5个元素：outlines、label、shortLabel、labelPosition、labelAlignment，其中outlines对应SVG中的path信息，需要进行格式转换；其余元素定义好标签显示内容；转换完成后生成fusioncharts.region.js文件。

实施例4：

在实施例1、2或3的基础上，本实施例所述方法采用工具：Inkscape、FusionMap Html5组件实现。

实施例5：

在实施例4的基础上，本实施例所述方法根据需要提供相应地图的静态图片，使用Inkscape工具将图片文件提取为SVG文件；

JAVA虚拟机运行SVG到FusionMap文件转换适配程序，配置转换需要的参数，得到fusioncharts.region.js矢量地图文件；

在Web应用系统中，使用FusionMap组件调用上一步的地图文件，呈现自定义地图。

实施例6：

在实施例5的基础上，本实施例使用Inkscape 0.48.4版本，使用FusionCharts SuiteXT 3.11.2版本。

通过使用Inkscape的图片资源进行SVG提取，再使用转换程序进行自定义地图的生成，得到fusioncharts.region.js文件，在Web监测系统中使用FusionMap组件渲染。

实施方式仅用于说明本发明，而并非对本发明的限制，有关技术领域的普通技术人员，在不脱离本发明的精神和范围的情况下，还可以做出各种变化和变型，因此所有等同的技术方案也属于本发明的范畴，本发明的专利保护范围应由权利要求限定。

Claims (5)

1.一种基于FusionMap组件的自定义地图呈现方法，其特征在于，所述方法通过加载静态图片，提取其中包含的路径信息，生成SVG格式的矢量地图信息，再使用转换程序，将此SVG信息解析并转换为FusionMap可识别的JS类型文件，扩展FusionMap地图资源，完成自定义地图呈现。

2.根据权利要求1所述的一种基于FusionMap组件的自定义地图呈现方法，其特征在于，所述方法实现步骤如下：

1）获取一张包含地图区域轮廓的静态图片；

2）运行Inkscape程序，将图片导入；使用提取位图轮廓功能，设置轮廓提取参数，进行轮廓提取，选择区分度较好的图层，得到提取结果；

3）配置填色和笔廓绘制，完成图层的背景和轮廓绘制；

4）将调整完成的图层保存为SVG格式文件；

5）通过程序生成FusionMap可加载的JS类型文件；

6）使用FusionMap组件加载JS文件，根据需要调整自定义地图呈现效果。

3.根据权利要求2所述的一种基于FusionMap组件的自定义地图呈现方法，其特征在于，所述JS类型文件生成过程如下：

SVG解析模块定义好SVG文件的解析规则，解析出其中的path标签的d属性值，记录各个区域的图形信息；转换模块定义好地图JS文件结构，首层包含以下5个元素：name、baseWidth、baseHeight、baseScaleFactor 、entities，其中baseWidth和baseHeight决定图形展示的画布大小，baseScaleFactor决定图形的缩放比例；entities中定义每个区域的信息，entities包含5个元素：outlines、label、shortLabel、labelPosition、labelAlignment，其中outlines对应SVG中的path信息，需要进行格式转换；其余元素定义好标签显示内容；转换完成后生成fusioncharts.region.js文件。

4.根据权利要求1、2或3所述的一种基于FusionMap组件的自定义地图呈现方法，其特征在于，所述方法采用工具Inkscape和FusionMap Html5组件实现，FusionMap组件使用Html5技术渲染地图。

5.根据权利要求4所述的一种基于FusionMap组件的自定义地图呈现方法，其特征在于，所述方法根据需要提供相应地图的静态图片，使用Inkscape工具将图片文件提取为SVG文件；

JAVA虚拟机运行SVG到FusionMap文件转换适配程序，配置转换需要的参数，得到fusioncharts.region.js矢量地图文件；

在Web应用系统中，使用FusionMap组件调用上一步的地图文件，呈现自定义地图。