[发明专利]一种地图制作方法、装置及电子设备

说明书

本发明属于地图制作技术领域，具体涉及一种地图制作方法、装置及电子设备，该方法通过获取初始SVG地图内容以及页面元素ID，并向服务端发送http请求，以使所述服务端返回待展示页面内容的动态数据，根据预设的正则表达式，将所述点位ID与所述动态数据中名称字段数据进行匹配，若匹配成功，则建立所述点位ID与匹配到的所述动态数据之间的映射关系，并根据匹配到的所述动态数据制作最终SVG地图，采用SVG的方式，通过通用的数据匹配方式，直接修改SVG内容，实现高特效的网页地图的制作，解决了传统的以Canvas实现的可视化的高特效地图，开发周期长，开发效率低的问题。

技术领域

本发明属于地图制作技术领域，具体涉及一种地图制作方法、装置及电子设备。

背景技术

随着信息技术的发展，数据可视化也越来越重要，基于 Web 的可视化技术发展迅猛。在基于 Web 的可视化地图制作过程中，传统的可视化的高特效地图以Canvas实现。Canvas即Canvas API（画布），它是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。因此，要从同一图形的一个canvas标记中移除元素，往往需要擦掉绘图重新绘制它。如果要开发一个新的高特效地图，需要大量的定制代码来实现高特效的地图，开发周期长，效率比较低，而且往往有些比较复杂的效果实现不出来。

发明内容

有鉴于此，本发明的目的在于提供一种地图制作方法、装置及电子设备，以解决传统的以Canvas实现的可视化的高特效地图，开发周期长，开发效率低的问题。

根据本发明实施例的第一方面，提供一种地图制作方法，包括：

获取初始SVG地图内容以及页面元素ID，并向服务端发送http请求，以使所述服务端返回待展示页面内容的动态数据，其中，所述地图内容包括：页面元素显示的内容、页面元素的显示颜色以及页面元素的动画效果，所述页面元素ID至少包括：点位ID，所述动态数据至少包括：名称字段数据；

根据预设的正则表达式，将所述点位ID与所述动态数据中名称字段数据进行匹配；

若匹配成功，则建立所述点位ID与匹配到的所述动态数据之间的映射关系，并根据匹配到的所述动态数据制作最终SVG地图。

优选地，所述根据匹配到的所述动态数据制作最终SVG地图，包括：

根据匹配到的所述动态数据中与显示的页面元素对应的字段数据更新所述页面元素显示的内容；

根据匹配到的所述动态数据中点位颜色字段数据设置所述页面元素的显示颜色；

根据匹配到的所述动态数据设置所述页面元素的动画效果。

优选地，所述根据匹配到的所述动态数据中与显示的页面元素对应的字段数据更新所述页面元素显示的内容，包括：

根据所述点位ID与匹配到的所述动态数据的映射关系，获取与所述点位ID对应的所述动态数据；

根据所述动态数据中与显示的页面元素对应的字段数据设置页面元素显示的内容。

优选地，所述根据匹配到的所述动态数据中点位颜色字段数据设置所述页面元素的显示颜色，包括：

根据所述点位ID与匹配到的所述动态数据的映射关系，获取与所述点位ID对应的所述动态数据；

根据所述动态数据中点位颜色字段数据，设置页面的元素的fill属性。

优选地，所述根据匹配到的所述动态数据设置所述页面元素的动画效果，包括：

根据所述点位ID与匹配到的所述动态数据的映射关系，获取与所述点位ID对应的所述动态数据；

将与浮窗ID对应的页面元素设置为显示状态，并根据所述动态数据设置浮窗标题以及浮窗显示内容；