[发明专利]一种基于绘图库实现数据动态显示效果的方法

说明书

技术领域

本发明涉及数据动态显示效果的解决方案，具体涉及一种基于绘图库实现数据动态显示效果的方法。

背景技术

为了方便查看通常需要在网页地图上来动态显示数据变化，目前网页上绘制图形主要使用两种方式来绘制；Canvas，通过javascript脚本来绘制2d图形，会调用相应的api来进行图形绘制工作；可缩放矢量图形SVG，使用XML来描述2d图形的语言，通过插入xml节点来描绘图形；这两种方式都需要依赖HTML中的DOM节点来创建画布，然后在画布上进行图形绘制；绘制地图通常会用到对应的地图数据文件，如绘制中国地图会用到中国地图的数据文件，数据文件里面记录着地图边界的经纬度坐标，将这些坐标对应的点连接起来就形成了整个中国地图的外观；地图动态数据指在已经绘制好的地图区域中根据一些经纬度坐标数据绘制这些坐标对应的点，这些坐标数据又是随着时间的变化而变化的；所以需要把老的坐标数据绘制的点擦掉，再把新的坐标数据绘制上去，这样达到地图上这些绘制的坐标点是动态变化的，如地图上的风云变化效果。

这种方法网页会定时通过ajax（创建交互式网页应用的网页开发技术）方式向后台请求后台生成的一组坐标数据或是前端生成一组坐标数据，数据生成后，通过调用对应的api（应用程序编程接口）来进行画布的重绘把旧的数据擦除再把新的坐标数据绘制出来；现有的方法会很频繁的向后端发出请求获取后端生成的一组坐标数据，增加后端负载，或是前端频繁的定时随机生成一组坐标数据造成前端的压力；前端页面会根据取得的一组坐标数据定时的对画布进行重绘，如果一次生成的坐标数量很大的话会严重增加前端页面的压力，画布重绘时间的延长，用户体验会降低；并且后端生成数据可能由于网络也会造成延迟，导致前端数据不能定时平缓的变化。

发明内容

本发明提供一种提高地图动态数据显示效率、减少前端页面地图绘制频率的基于绘图库实现数据动态显示效果的方法。

本发明采用的技术方案是：一种基于绘图库实现数据动态显示效果的方法，包括以下步骤：

初始化多个位置重叠的DOM，并在DOM上初始化对应数量的画布；

向后台发起数据请求让后端或前端生成需要的坐标数据；

取得坐标数据后，将坐标数据分别绘制到画布上；

将画布的显示状态设置为不可见；

定时运行显示函数，通过显示函数每次将画布中的一层显示状态设置为可见。

进一步的，所述显示函数运行过程如下：

设置一个数组存放已经显示过的画布id.；

将画布均设置为隐藏；

随机取出画布中的一个，将它的id与数组中存放的id进行比较；如果取到的画布id在数组中存在，则重新取一画布；否则将画布的id加入到数组中，并将画布设置为显示；同时判断数组的长度是否等于画布的数量，如果等于画布的数量，则清空数组。

本发明的有益效果是：

（1）本发明只需在页面初始化时进行多个画布的地图数据绘制，可显著提高动态数据显示的效率，大大减少前端页面地图绘制的频率；

（2）本发明地图坐标数据只由前端生成固定的数据，不需要频繁请求后端来生成数据从而降低不必要的后台计算和网络开销；

（3）本发明中画布和画布的地图及地图动态坐标数据都在页面初始化时已经生成和绘制好，所以页面初始化好后以后不需要在绘制地图及绘制地图动态数据上再消耗资源；

（4）本发明通过显隐/藏画布的方式来模拟数据的动态显示比不断调用绘图API来重绘画布的方式更加高效，节省前端消耗。

附图说明

图1为本发明流程示意图。

具体实施方式

下面结合附图和具体实施例对本发明做进一步说明。

如图1所示，一种基于绘图库实现数据动态显示效果的方法，包括以下步骤：

初始化多个位置重叠的DOM，并在DOM上初始化对应数量的画布；这样就初始化了多层重叠的画布；

向后台发起数据请求让后端或前端生成需要的坐标数据；

取得坐标数据后，将坐标数据分别绘制到画布上；这样多层画布上的不同坐标数据就绘制好了；

将画布的显示状态设置为不可见，多层画布在任意时刻只有一层是可见的，其它都不可见，这样在视觉效果上只能看到一层画布的数据；

定时运行显示函数，通过显示函数每次将画布中的一层显示状态设置为可见；这样不断的运行，不同画布的数据会定时的随机的显示出来，从而在视觉上达到数据动态变化的效果。

进一步的，所述显示函数运行过程如下：