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

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

【技术实现步骤摘要】
一种基于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和FusionMapHtml5组件实现。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、FusionMapHtml5组件实现。实施例5：在实施例4的基础上，本实施例所述方法根据需要提供相应地图的静态图片，使用Inkscape工具将图片文件提取为SVG文件；JAVA虚拟机运行SVG到FusionMap文件转换适配程序，配置转换需要的参数，得到fusioncharts.region.js矢量地图文件；在Web应用系统中，使用FusionMap组件调用上一步的地图文件，呈现自定义地图。实施例6：在实施例5的基础上，本实施例使用Inkscape0.48.4版本，使用FusionChartsSuiteXT3.11.2版本。通过使用Inkscape的图片资源进行SVG提取，再使用转换程序进行自定义地图的生成，得到fusioncharts.region.js文件，在Web监测系统中使用FusionMap组件渲染。实施方式仅用于说明本专利技术，而并非对本专利技术的限制，有关
的普通技术人员，在不脱离本专利技术的精神和范围的情况下，还可以做出各种变化和变型，因此所有等同的技术方案也属于本专利技术的范畴，本专利技术的专利保护范围应由权利要求限定。本文档来自技高网...

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

【技术特征摘要】
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、base...

【专利技术属性】
技术研发人员：徐驰，张爱成，孙善宝，
申请(专利权)人：济南浪潮高新科技投资发展有限公司，
类型：发明
国别省市：山东,37