CN107193970A - 一种基于绘图库实现数据动态显示效果的方法 - Google Patents
一种基于绘图库实现数据动态显示效果的方法 Download PDFInfo
- Publication number
- CN107193970A CN107193970A CN201710377652.0A CN201710377652A CN107193970A CN 107193970 A CN107193970 A CN 107193970A CN 201710377652 A CN201710377652 A CN 201710377652A CN 107193970 A CN107193970 A CN 107193970A
- Authority
- CN
- China
- Prior art keywords
- painting canvas
- data
- array
- coordinate data
- dom
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/14—Tree-structured documents
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明公开了一种基于绘图库实现数据动态显示效果的方法,包括以下步骤:初始化多个位置重叠的DOM,并在DOM上初始化对应数量的画布;向后台发起数据请求让后端或前端生成需要的坐标数据;取得坐标数据后,将坐标数据分别绘制到画布上;将画布的显示状态设置为不可见;定时运行显示函数,通过显示函数每次将画布中的一层显示状态设置为可见;本发明可提高动态数据显示效率、降低不必要的后台计算和网络开销,更加高效,并可节省前端消耗。
Description
技术领域
本发明涉及数据动态显示效果的解决方案,具体涉及一种基于绘图库实现数据动态显示效果的方法。
背景技术
为了方便查看通常需要在网页地图上来动态显示数据变化,目前网页上绘制图形主要使用两种方式来绘制;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上初始化对应数量的画布;这样就初始化了多层重叠的画布;
向后台发起数据请求让后端或前端生成需要的坐标数据;
取得坐标数据后,将坐标数据分别绘制到画布上;这样多层画布上的不同坐标数据就绘制好了;
将画布的显示状态设置为不可见,多层画布在任意时刻只有一层是可见的,其它都不可见,这样在视觉效果上只能看到一层画布的数据;
定时运行显示函数,通过显示函数每次将画布中的一层显示状态设置为可见;这样不断的运行,不同画布的数据会定时的随机的显示出来,从而在视觉上达到数据动态变化的效果。
进一步的,所述显示函数运行过程如下:
设置一个数组存放已经显示过的画布id.;
将画布均设置为隐藏;
随机取出画布中的一个,将它的id与数组中存放的id进行比较;如果取到的画布id在数组中存在,则重新取一画布;否则将画布的id加入到数组中,并将画布设置为显示;同时判断数组的长度是否等于画布的数量,如果等于画布的数量,则清空数组。
下面以最近10天内四川省微博使用分布图展现为例进行说明。
初始化10个位置重叠的DOM,并在DOM上初始化对应数量的画布;这样就初始化了10层重叠的画布;
向后台发起数据请求一次性取出10天的微博使用地点的坐标数据;
取得坐标数据后,将坐标数据分别绘制到10层透明并重叠的四川省地图画布上;
将画布的显示状态设置为不可见;
定时运行显示函数,通过显示函数每次将画布中的一层显示状态设置为可见;此时地图上的坐标数据就开始定时循环随机的显示10层画布中的其中一层,从视觉上呈现出不同时间段微博使用在地图上的动态分布效果。
显示函数运行过程如下:
运行前设置一个数组来存放已经显示过的画布id,初次运行时数组为空;
运行时先将10个画布都设置为隐藏;
随机取出10个画布中的其中一个,然后将它的id与数组中存放的id进行比较;如果已经存在,就再随机取一个画布,直到取到的画布id不在数组中;那么就将此画布的id加入到数组中,并将画布设置为显示;判断此时数组长度是否已经等于10,如果等于10,就清孔数组;数组等于10表示10个画布都显示过了,下次运行的时候会重新来。
本发明通过初始化多层画布的方式来预先存储多组坐标数据,减少了频繁向后端请求坐标数据;改为一次性拿到多组坐标数据,然后一次性的把多组坐标数据绘制到对应的多层画布上,减少了频繁的前端画布的绘制工作,改为只在初始化多层画布的同时绘制对应的画布数据;多层画布在页面上是处于重叠状态的,所以多层画布初始化的状态都为隐藏;当数据在画布上绘制完成后,会定时的根据相应的算法将多层画布中的一层状态改为显示,这样在同一时间下只有一层画布是显示出来的;这样会定时的让多层画布中的一层显示其余的隐藏这种方式,来达到视觉上地图上的数据是动态变化的,定时时间设置越短,数据就变化得越快反之就越慢。
本发明可以显著提高地图动态数据显示的效率,可大大减少前端页面地图绘制的频率,只需要在页面初始化时进行多个画布的地图数据绘制,之后都是通过画布的显示/隐藏,来显示不同的画布数据;地图坐标数据也可以只由前端生成固定的几套数据,不需要频繁请求后端来生成数据从而降低不必要后台计算和网络开销;由于画布及各层画布的地图及地图动态坐标数据都在页面初始化时已经生成和绘制好,所以页面初始化好以后不需要在绘制地图及绘制地图动态数据上再消耗资源;通过显隐/藏画布的方式来模拟数据的动态显示比不断调用绘图API来重绘画布的方式更高效,更节省前端消耗。
本文中:
HTML:超文本标记语言。
XML:可扩展的标记语言,设计宗旨是为了传输数据而非显示数据。
AJAX:在不重新加载整个页面的情况下,与服务器交换数据并更新部分页面显示更新数据的技术。
DOM:文档对象模型,W3C组织推荐的处理可扩展标记语言的标准编程接口。
id:编码。
SVG:可缩放矢量图形。
api:Application Programming Interface 应用程序编程接口。
Claims (2)
1.一种基于绘图库实现数据动态显示效果的方法,其特征在于,包括以下步骤:
初始化多个位置重叠的DOM,并在DOM上初始化对应数量的画布;
向后台发起数据请求让后端或前端生成需要的坐标数据;
取得坐标数据后,将坐标数据分别绘制到画布上;
将画布的显示状态设置为不可见;
定时运行显示函数,通过显示函数每次将画布中的一层显示状态设置为可见。
2.根据权利要求1所述的一种基于绘图库实现数据动态显示效果的方法,其特征在于,所述显示函数运行过程如下:
设置一个数组存放已经显示过的画布id.;
将画布均设置为隐藏;
随机取出画布中的一个,将它的id与数组中存放的id进行比较;如果取到的画布id在数组中存在,则重新取一画布;否则将画布的id加入到数组中,并将画布设置为显示;同时判断数组的长度是否等于画布的数量,如果等于画布的数量,则清空数组。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710377652.0A CN107193970A (zh) | 2017-05-25 | 2017-05-25 | 一种基于绘图库实现数据动态显示效果的方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710377652.0A CN107193970A (zh) | 2017-05-25 | 2017-05-25 | 一种基于绘图库实现数据动态显示效果的方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN107193970A true CN107193970A (zh) | 2017-09-22 |
Family
ID=59874422
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201710377652.0A Pending CN107193970A (zh) | 2017-05-25 | 2017-05-25 | 一种基于绘图库实现数据动态显示效果的方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN107193970A (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2024183438A1 (zh) * | 2023-03-07 | 2024-09-12 | 华为云计算技术有限公司 | 连接器和操作(action)的推荐方法、装置及计算设备 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104063404A (zh) * | 2013-03-22 | 2014-09-24 | 腾讯科技(深圳)有限公司 | 在wap页面显示信息的方法及装置 |
CN104462567A (zh) * | 2014-12-26 | 2015-03-25 | 北京奇虎科技有限公司 | web页面的切换方法和装置及综合页面提供装置 |
CN105224167A (zh) * | 2015-08-31 | 2016-01-06 | 深圳市茁壮网络股份有限公司 | 一种窗口切换方法及装置 |
CN105630478A (zh) * | 2014-12-01 | 2016-06-01 | 阿里巴巴集团控股有限公司 | 一种实现页面切换的方法和装置 |
-
2017
- 2017-05-25 CN CN201710377652.0A patent/CN107193970A/zh active Pending
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104063404A (zh) * | 2013-03-22 | 2014-09-24 | 腾讯科技(深圳)有限公司 | 在wap页面显示信息的方法及装置 |
CN105630478A (zh) * | 2014-12-01 | 2016-06-01 | 阿里巴巴集团控股有限公司 | 一种实现页面切换的方法和装置 |
CN104462567A (zh) * | 2014-12-26 | 2015-03-25 | 北京奇虎科技有限公司 | web页面的切换方法和装置及综合页面提供装置 |
CN105224167A (zh) * | 2015-08-31 | 2016-01-06 | 深圳市茁壮网络股份有限公司 | 一种窗口切换方法及装置 |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2024183438A1 (zh) * | 2023-03-07 | 2024-09-12 | 华为云计算技术有限公司 | 连接器和操作(action)的推荐方法、装置及计算设备 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
AU2019204746B2 (en) | Managing map elements using aggregate feature identifiers | |
CN102136946B (zh) | 一种光网络拓扑图的绘制方法及其拓扑子系统 | |
US8937627B1 (en) | Seamless vector map tiles across multiple zoom levels | |
CN106020967B (zh) | 一种混合式云资源自动扩容方法 | |
CN110689283B (zh) | 基于地下水模型的河系与渠系交错供水模拟方法及装置 | |
CN104077134B (zh) | 获取数据中心机房平面温度云图的方法和系统 | |
CN102968542B (zh) | 应用ansys软件进行输电铁塔结构分析的方法 | |
KR101281157B1 (ko) | 레이 트레이싱 코어 및 레이 트레이싱 처리 방법 | |
CN101976534A (zh) | 电子地图生成的方法及装置 | |
CN104346170A (zh) | 一种基于画布Canvas的拓扑图生成方法及装置 | |
CN110008366A (zh) | 一种施工图纸预览方法及其系统 | |
CN109237999A (zh) | 一种批量三维态势目标尾迹实时绘制方法和系统 | |
CN109542987A (zh) | 一种基于Canvas的在线地图保存方法 | |
CN107193970A (zh) | 一种基于绘图库实现数据动态显示效果的方法 | |
CN103383556A (zh) | 综合管线数据内外业一体化实时更新质量控制方法 | |
CN101800768B (zh) | 一种基于存储联盟子集划分的网格数据副本生成方法 | |
CN103916262B (zh) | 一种基于三维空间的网络拓扑布局方法及系统 | |
CN106777352A (zh) | 数据访问方法及系统 | |
CN103870645B (zh) | 带有冰纹效果的蜡染印花图案仿真方法 | |
CN105306503B (zh) | 区域分析图实现方法及其系统 | |
CN102799427A (zh) | 一种基于gpu生成甘特图的方法 | |
CN101436204A (zh) | 一种基于并行元胞自动机的城市演变模拟实现方法 | |
CN103164225B (zh) | 一种基于超图的网构软件体系结构在线演化方法 | |
CN103903289A (zh) | 一种基于分形发生器的随机型沼泽地花纹图案生成方法 | |
Liu et al. | Tile-based map service GeoWebCache middleware |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20170922 |
|
RJ01 | Rejection of invention patent application after publication |