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

文档序号:12736291阅读:790来源:国知局

本发明涉及计算机技术领域,具体涉及一种基于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 Suite XT 3.11.2版本。

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

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

当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1