SVG地图数据可视化的实现方法及装置与流程

本发明涉及图形可视化技术领域，尤其涉及一种svg地图数据可视化的实现方法及装置。

背景技术：

目前，现有技术中已经有不少地图可视化的工具，如利用大数据魔镜等，其处理的对象为：世界地图、全国省份地图、省份的地市地图。然而，利用上述的工具实现地图数据可视化世界地图、全国省份地图、省份的地市地图的单独显示，并且无法实现市级地图再往细级别的地图，或者个性化的地图。我们虽然没有办法利用上述提供的工具实现这种需求，但是我们考虑可以利用flash等工具制作，但是制作成本、学习成本、维护成本太高了，并且安全性也较差。

有鉴于此，有必要提出对目前的地图可视化技术进行进一步的改进。

技术实现要素：

为解决上述至少一技术问题，本发明的主要目的是提供一种svg地图数据可视化的实现方法。

为实现上述目的，本发明采用的一个技术方案为：提供一种svg地图数据可视化的实现方法，包括如下步骤：

根据输入的设定地图样稿在adobeillustrator应用中制作出svg格式的文件，得到svg地图；

识别svg地图中的区域边界，并对svg地图的区域边界进行区域坐标标识，形成标识的svg地图文件；

分配一数据接口，并利用javascript工具的javascript代码通过数据接口对标记的svg地图文件中的所有区域进行加载，形成数据可视化的svg地图。

在一具体的实施例中，所述对svg地图的区域边界进行区域坐标标识，形成标记的svg地图文件的步骤中，具体包括：

对svg地图的区域边界进行区域坐标标识；以及

根据标识的区域所有坐标计算出区域中心坐标，形成标识的svg地图文件。

在一具体的实施例中，所述利用javascript工具的javascript代码对标记的svg地图文件中的所有区域进行加载，形成数据可视化的svg地图的步骤，具体包括：

根据svg地图中的所有区域在javascript工具中预先设置javascript代码，所述javascript代码包括区域的不同亮度或色度数据；

将不同亮度或色度数据加载至svg地图文件上；以及

判断加载至svg地图文件的数据是否超过预设阈值，

当加载至svg地图文件的数据超过预设阈值时，对svg地图文件的区域进行预警处理。

在一具体的实施例中，所述javascript工具为echars。

在一具体的实施例中，所述利用javascript工具的javascript代码对标记的svg地图文件中的所有区域进行加载，形成数据可视化的svg地图的步骤之后，还包括：

对加载后的数据接口进行标注。

为实现上述目的，本发明采用的另一个技术方案为：提供一种svg地图数据可视化的实现装置，包括：

预处理模块，用于根据输入的设定地图样稿在adobeillustrator应用中制作出svg格式的文件，得到svg地图；

标识模块，用于识别svg地图中的区域边界，并对svg地图的区域边界进行区域坐标标识，形成标识的svg地图文件；

加载模块，用于分配一数据接口，并利用javascript工具的javascript代码通过数据接口对标记的svg地图文件中的所有区域进行加载，形成数据可视化的svg地图。

在一具体的实施例中，所述标识模块，具体用于：

对svg地图的区域边界进行区域坐标标识；以及

根据标识的区域所有坐标计算出区域中心坐标，形成标识的svg地图文件。

在一具体的实施例中，所述加载模块，具体用于：

根据svg地图中的所有区域在javascript工具中预先设置javascript代码，所述javascript代码包括区域的不同亮度或色度数据；

将不同亮度或色度数据加载至svg地图文件上；以及

判断加载至svg地图文件的数据是否超过预设阈值，

当加载至svg地图文件的数据超过预设阈值时，对svg地图文件的区域进行预警处理。

在一具体的实施例中，所述javascript工具为echars。

在一具体的实施例中，所述svg地图数据可视化的实现装置，还包括标注模块，用于：

对加载后的数据接口进行标注。

本发明的技术方案通过根据输入的设定地图样稿在adobeillustrator应用中制作出svg格式的文件，得到svg地图；识别svg地图中的区域边界，并对svg地图的区域边界进行区域坐标标识，形成标识的svg地图文件；分配一数据接口，并利用javascript工具的javascript代码通过数据接口对标记的svg地图文件中的所有区域进行加载，形成数据可视化的svg地图，相比于直接制作flash实现个性化地图的方案，能够大大缩短制图周期，以及降低维护成本，更方便地图数据可视化的实现。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图示出的结构获得其他的附图。

图1为本发明一实施例svg地图数据可视化的实现方法的方法流程图；

图2为本发明另一实施例svg地图数据可视化的实现方法的方法流程图；

图3为本发明一实施例svg地图数据可视化的实现装置的模块方框图；

图4为本发明另一实施例svg地图数据可视化的实现装置的模块方框图；

图5为利用本发明实现的svg地图数据可视化的示例。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

需要说明，本发明中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本发明要求的保护范围之内。

为了更好地理解本发明的技术方案，下面对数据可视化、矢量图、可视化矢量地图进行解释，具体如下：

数据可视化：将大型数据集中的数据以图形图像形式表示，并利用数据分析和开发工具发现其中未知信息的处理过程。实现可视化的图形有很多种，柱状图、折线图、饼图、地图、散点图、k线图、词云图、仪表图等等，每一种图形表达的维度、着重点都会不一样，利用不同的图形，将能更好的展示各种数据，达到决策支持的效果。

svg地图，即矢量地图，svg是一个xml文件，用于xml编程的两种模型dom和sax也适用于它。因为svg是被设计用于互联网，所以通过javascript和dom访问它就是最重要的应用模式。通过javascript和dom可以动态地修改html，同样也可以在浏览器中动态地创建、修改和删除图片。用户可以任意缩放svg图像显示，而不会破坏图像的清晰度、细节等。

可视化矢量地图：利用工具，制作svg地图，通过javascript操作，达到数据可视化展示的效果，实现业务数据的区域维度的展示。另外，我们可以通过javascript，操作svg图形，甚至可以实现数据预警、数据迁移的效果。

请参照图1，在本发明实施例中，该svg地图数据可视化的实现方法，包括如下步骤：

步骤s10、根据输入的设定地图样稿在adobeillustrator应用中制作出svg格式的文件，得到svg地图；

步骤s20、识别svg地图中的区域边界，并对svg地图的区域边界进行区域坐标标识，形成标识的svg地图文件；

步骤s30、分配一数据接口，并利用javascript工具的javascript代码通过数据接口对标记的svg地图文件中的所有区域进行加载，形成数据可视化的svg地图。

本实施例中，该步骤s10之前可以设置可数据视化地图或图形的设计样稿，以广东省省级地图为例，需要广东省各地级市的区域进行划分，形成地图设计样稿。当然，地图仅为本实施例中的一种优选方案，该处理的对象还可以是模拟场所，如超市、车站、广场，道路交通等。具体的步骤s10可以包括对地图的区域进行描边以及命名，以及对区域的中心位置进行标注，最后导出svg格式的地图；通过步骤s20主要对svg地图中的区域边界的识别并标识出坐标，以及优化svg属性，删除多余不需要的属性，调整地图整体的高度和宽度，能更好地展示地图；通过步骤s30利用javascript工具的javascript代码对svg地图文件中的所有区域进行加载，就可以实现数据可视化的svg地图，实现简单且成本较低，可以实现个性化的地图展示。最后实现的地图，请参照图5，广东省的各地级市可以根据加载javascript代码实现数据可视化展示操作。

本发明的技术方案通过根据输入的设定地图样稿在adobeillustrator应用中制作出svg格式的文件，得到svg地图；识别svg地图中的区域边界，并对svg地图的区域边界进行区域坐标标识，形成标识的svg地图文件；分配一数据接口，并利用javascript工具的javascript代码通过数据接口对标记的svg地图文件中的所有区域进行加载，形成数据可视化的svg地图，相比于直接制作flash实现个性化地图的方案，能够大大缩短制图周期，以及降低维护成本，更方便地图数据可视化的实现。

在一具体的实施例中，所述对svg地图的区域边界进行区域坐标标识，形成标记的svg地图文件的步骤s20中，具体包括：

对svg地图的区域边界进行区域坐标标识；以及

根据标识的区域所有坐标计算出区域中心坐标，形成标识的svg地图文件。

本实施例中，可以根据重新对svg地图的区域边界进行标识，形成区域标识坐标集合，然后根据多个标识坐标累加求均值计算出区域中心坐标。对于svg地图中求出的区域中心坐标不在本地图内的情形，可以选择本svg地图中离区域中心坐标最近的坐标作为该区域的中心坐标。

在一具体的实施例中，所述利用javascript工具的javascript代码对标记的svg地图文件中的所有区域进行加载，形成数据可视化的svg地图的步骤s30，具体包括：

根据svg地图中的所有区域在javascript工具中预先设置javascript代码，所述javascript代码包括区域的不同亮度或色度数据；

将不同亮度或色度数据加载至svg地图文件上；以及

判断加载至svg地图文件的数据是否超过预设阈值，

当加载至svg地图文件的数据超过预设阈值时，对svg地图文件的区域进行预警处理。

本实施例中，javascript代码代表的数据可以加载至svg地图中对应的区域上，以使不同的区域具有相同或不同给的数据。为了实现对svg地图的预警，可以将加载的数据与预设阈值进行比较，在超过预设阈值时可以对该区域进行预警处理，如增加该区域的预警提醒图标等；反之，则不予处理，继续对下一区域进行数据加载。

进一步的，所述javascript工具为echars。本实施例中，该javascript工具优选为echars，可以理解的是，echars仅为一种优选方式，在此不做限定。

请参照图2，在一具体的实施例中，所述利用javascript工具的javascript代码对标记的svg地图文件中的所有区域进行加载，形成数据可视化的svg地图的步骤s30之后，还包括：

步骤s40、对加载后的数据接口进行标注。

本实施例中，对加载后的数据接口进行标注，可以实现扁平化数据接入，更方便对svg地图的维护。

请参照图3，在本发明的实施例中，该svg地图数据可视化的实现装置，包括：

预处理模块10，用于根据输入的设定地图样稿在adobeillustrator应用中制作出svg格式的文件，得到svg地图；

标识模块20，用于识别svg地图中的区域边界，并对svg地图的区域边界进行区域坐标标识，形成标识的svg地图文件；

加载模块30，用于分配一数据接口，并利用javascript工具的javascript代码通过数据接口对标记的svg地图文件中的所有区域进行加载，形成数据可视化的svg地图。

本实施例中，首先需要人工设置可数据视化地图或图形的设计样稿，以广东省省级地图为例，需要广东省各地级市的区域进行划分，形成地图设计样稿。当然，地图仅为本实施例中的一种优选方案，该处理的对象还可以是模拟场所，如超市、车站、广场，道路交通等。具体的预处理模块10，包括对地图的区域进行描边以及命名，以及对区域的中心位置进行标注，最后导出svg格式的地图；通过标识模块20，可以对svg地图中的区域边界的识别并标识出坐标，以及优化svg属性；通过标注模块，可以利用javascript工具的javascript代码对svg地图文件中的所有区域进行加载，就可以实现数据可视化的svg地图，实现简单且成本较低，可实现个性化的地图展示。

在一具体的实施例中，所述标识模块20，具体用于：

对svg地图的区域边界进行区域坐标标识；以及

根据标识的区域所有坐标计算出区域中心坐标，形成标识的svg地图文件。

本实施例中，该标识模块20，可以根据重新对svg地图的区域边界进行标识，形成区域标识坐标集合，然后根据多个标识坐标累加求均值计算出区域中心坐标。对于svg地图中求出的区域中心坐标不在本地图内的情形，可以选择本svg地图中离区域中心坐标最近的坐标作为该区域的中心坐标。

在一具体的实施例中，所述加载模块30，具体用于：

根据svg地图中的所有区域在javascript工具中预先设置javascript代码，所述javascript代码包括区域的不同亮度或色度数据；

将不同亮度或色度数据加载至svg地图文件上；以及

判断加载至svg地图文件的数据是否超过预设阈值，

当加载至svg地图文件的数据超过预设阈值时，对svg地图文件的区域进行预警处理。

本实施例中，javascript代码代表的数据可以加载至svg地图中对应的区域上，以使不同的区域具有相同或不同给的数据。为了实现对svg地图的预警，该加载模块30，可以将加载的数据与预设阈值进行比较，在超过预设阈值时可以对该区域进行预警处理，如增加该区域的预警提醒图标等；反之，则不予处理，继续对下一区域进行数据加载。

在一具体的实施例中，所述javascript工具为echars。本实施例中，该javascript工具优选为echars，可以理解的是，echars仅为一种优选方式，在此不做限定。

请参照图4，在一具体的实施例中，所述svg地图数据可视化的实现装置，还包括标注模块40，用于：

对加载后的数据接口进行标注。

本实施例中，该标注模块40，可以对加载后的数据接口进行标注，可以实现扁平化数据接入，更方便对svg地图的维护。

以上所述仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是在本发明的发明构思下，利用本发明说明书及附图内容所作的等效结构变换，或直接/间接运用在其他相关的技术领域均包括在本发明的专利保护范围内。