本發(fā)明涉及數(shù)據(jù)動(dòng)態(tài)顯示效果的解決方案，具體涉及一種基于繪圖庫(kù)實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)顯示效果的方法。
背景技術(shù)：
為了方便查看通常需要在網(wǎng)頁(yè)地圖上來(lái)動(dòng)態(tài)顯示數(shù)據(jù)變化，目前網(wǎng)頁(yè)上繪制圖形主要使用兩種方式來(lái)繪制；canvas，通過(guò)javascript腳本來(lái)繪制2d圖形，會(huì)調(diào)用相應(yīng)的api來(lái)進(jìn)行圖形繪制工作；可縮放矢量圖形svg，使用xml來(lái)描述2d圖形的語(yǔ)言，通過(guò)插入xml節(jié)點(diǎn)來(lái)描繪圖形；這兩種方式都需要依賴html中的dom節(jié)點(diǎn)來(lái)創(chuàng)建畫布，然后在畫布上進(jìn)行圖形繪制；繪制地圖通常會(huì)用到對(duì)應(yīng)的地圖數(shù)據(jù)文件，如繪制中國(guó)地圖會(huì)用到中國(guó)地圖的數(shù)據(jù)文件，數(shù)據(jù)文件里面記錄著地圖邊界的經(jīng)緯度坐標(biāo)，將這些坐標(biāo)對(duì)應(yīng)的點(diǎn)連接起來(lái)就形成了整個(gè)中國(guó)地圖的外觀；地圖動(dòng)態(tài)數(shù)據(jù)指在已經(jīng)繪制好的地圖區(qū)域中根據(jù)一些經(jīng)緯度坐標(biāo)數(shù)據(jù)繪制這些坐標(biāo)對(duì)應(yīng)的點(diǎn)，這些坐標(biāo)數(shù)據(jù)又是隨著時(shí)間的變化而變化的；所以需要把老的坐標(biāo)數(shù)據(jù)繪制的點(diǎn)擦掉，再把新的坐標(biāo)數(shù)據(jù)繪制上去，這樣達(dá)到地圖上這些繪制的坐標(biāo)點(diǎn)是動(dòng)態(tài)變化的，如地圖上的風(fēng)云變化效果。
這種方法網(wǎng)頁(yè)會(huì)定時(shí)通過(guò)ajax（創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開發(fā)技術(shù)）方式向后臺(tái)請(qǐng)求后臺(tái)生成的一組坐標(biāo)數(shù)據(jù)或是前端生成一組坐標(biāo)數(shù)據(jù)，數(shù)據(jù)生成后，通過(guò)調(diào)用對(duì)應(yīng)的api（應(yīng)用程序編程接口）來(lái)進(jìn)行畫布的重繪把舊的數(shù)據(jù)擦除再把新的坐標(biāo)數(shù)據(jù)繪制出來(lái)；現(xiàn)有的方法會(huì)很頻繁的向后端發(fā)出請(qǐng)求獲取后端生成的一組坐標(biāo)數(shù)據(jù)，增加后端負(fù)載，或是前端頻繁的定時(shí)隨機(jī)生成一組坐標(biāo)數(shù)據(jù)造成前端的壓力；前端頁(yè)面會(huì)根據(jù)取得的一組坐標(biāo)數(shù)據(jù)定時(shí)的對(duì)畫布進(jìn)行重繪，如果一次生成的坐標(biāo)數(shù)量很大的話會(huì)嚴(yán)重增加前端頁(yè)面的壓力，畫布重繪時(shí)間的延長(zhǎng)，用戶體驗(yàn)會(huì)降低；并且后端生成數(shù)據(jù)可能由于網(wǎng)絡(luò)也會(huì)造成延遲，導(dǎo)致前端數(shù)據(jù)不能定時(shí)平緩的變化。
技術(shù)實(shí)現(xiàn)要素：
本發(fā)明提供一種提高地圖動(dòng)態(tài)數(shù)據(jù)顯示效率、減少前端頁(yè)面地圖繪制頻率的基于繪圖庫(kù)實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)顯示效果的方法。
本發(fā)明采用的技術(shù)方案是：一種基于繪圖庫(kù)實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)顯示效果的方法，包括以下步驟：
初始化多個(gè)位置重疊的dom，并在dom上初始化對(duì)應(yīng)數(shù)量的畫布；
向后臺(tái)發(fā)起數(shù)據(jù)請(qǐng)求讓后端或前端生成需要的坐標(biāo)數(shù)據(jù)；
取得坐標(biāo)數(shù)據(jù)后，將坐標(biāo)數(shù)據(jù)分別繪制到畫布上；
將畫布的顯示狀態(tài)設(shè)置為不可見；
定時(shí)運(yùn)行顯示函數(shù)，通過(guò)顯示函數(shù)每次將畫布中的一層顯示狀態(tài)設(shè)置為可見。
進(jìn)一步的，所述顯示函數(shù)運(yùn)行過(guò)程如下：
設(shè)置一個(gè)數(shù)組存放已經(jīng)顯示過(guò)的畫布id.；
將畫布均設(shè)置為隱藏；
隨機(jī)取出畫布中的一個(gè)，將它的id與數(shù)組中存放的id進(jìn)行比較；如果取到的畫布id在數(shù)組中存在，則重新取一畫布；否則將畫布的id加入到數(shù)組中，并將畫布設(shè)置為顯示；同時(shí)判斷數(shù)組的長(zhǎng)度是否等于畫布的數(shù)量，如果等于畫布的數(shù)量，則清空數(shù)組。
本發(fā)明的有益效果是：
（1）本發(fā)明只需在頁(yè)面初始化時(shí)進(jìn)行多個(gè)畫布的地圖數(shù)據(jù)繪制，可顯著提高動(dòng)態(tài)數(shù)據(jù)顯示的效率，大大減少前端頁(yè)面地圖繪制的頻率；
（2）本發(fā)明地圖坐標(biāo)數(shù)據(jù)只由前端生成固定的數(shù)據(jù)，不需要頻繁請(qǐng)求后端來(lái)生成數(shù)據(jù)從而降低不必要的后臺(tái)計(jì)算和網(wǎng)絡(luò)開銷；
（3）本發(fā)明中畫布和畫布的地圖及地圖動(dòng)態(tài)坐標(biāo)數(shù)據(jù)都在頁(yè)面初始化時(shí)已經(jīng)生成和繪制好，所以頁(yè)面初始化好后以后不需要在繪制地圖及繪制地圖動(dòng)態(tài)數(shù)據(jù)上再消耗資源；
（4）本發(fā)明通過(guò)顯隱/藏畫布的方式來(lái)模擬數(shù)據(jù)的動(dòng)態(tài)顯示比不斷調(diào)用繪圖api來(lái)重繪畫布的方式更加高效，節(jié)省前端消耗。
附圖說(shuō)明
圖1為本發(fā)明流程示意圖。
具體實(shí)施方式
下面結(jié)合附圖和具體實(shí)施例對(duì)本發(fā)明做進(jìn)一步說(shuō)明。
如圖1所示，一種基于繪圖庫(kù)實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)顯示效果的方法，包括以下步驟：
初始化多個(gè)位置重疊的dom，并在dom上初始化對(duì)應(yīng)數(shù)量的畫布；這樣就初始化了多層重疊的畫布；
向后臺(tái)發(fā)起數(shù)據(jù)請(qǐng)求讓后端或前端生成需要的坐標(biāo)數(shù)據(jù)；
取得坐標(biāo)數(shù)據(jù)后，將坐標(biāo)數(shù)據(jù)分別繪制到畫布上；這樣多層畫布上的不同坐標(biāo)數(shù)據(jù)就繪制好了；
將畫布的顯示狀態(tài)設(shè)置為不可見，多層畫布在任意時(shí)刻只有一層是可見的，其它都不可見，這樣在視覺效果上只能看到一層畫布的數(shù)據(jù)；
定時(shí)運(yùn)行顯示函數(shù)，通過(guò)顯示函數(shù)每次將畫布中的一層顯示狀態(tài)設(shè)置為可見；這樣不斷的運(yùn)行，不同畫布的數(shù)據(jù)會(huì)定時(shí)的隨機(jī)的顯示出來(lái)，從而在視覺上達(dá)到數(shù)據(jù)動(dòng)態(tài)變化的效果。
進(jìn)一步的，所述顯示函數(shù)運(yùn)行過(guò)程如下：
設(shè)置一個(gè)數(shù)組存放已經(jīng)顯示過(guò)的畫布id.；
將畫布均設(shè)置為隱藏；
隨機(jī)取出畫布中的一個(gè)，將它的id與數(shù)組中存放的id進(jìn)行比較；如果取到的畫布id在數(shù)組中存在，則重新取一畫布；否則將畫布的id加入到數(shù)組中，并將畫布設(shè)置為顯示；同時(shí)判斷數(shù)組的長(zhǎng)度是否等于畫布的數(shù)量，如果等于畫布的數(shù)量，則清空數(shù)組。
下面以最近10天內(nèi)四川省微博使用分布圖展現(xiàn)為例進(jìn)行說(shuō)明。
初始化10個(gè)位置重疊的dom，并在dom上初始化對(duì)應(yīng)數(shù)量的畫布；這樣就初始化了10層重疊的畫布；
向后臺(tái)發(fā)起數(shù)據(jù)請(qǐng)求一次性取出10天的微博使用地點(diǎn)的坐標(biāo)數(shù)據(jù)；
取得坐標(biāo)數(shù)據(jù)后，將坐標(biāo)數(shù)據(jù)分別繪制到10層透明并重疊的四川省地圖畫布上；
將畫布的顯示狀態(tài)設(shè)置為不可見；
定時(shí)運(yùn)行顯示函數(shù)，通過(guò)顯示函數(shù)每次將畫布中的一層顯示狀態(tài)設(shè)置為可見；此時(shí)地圖上的坐標(biāo)數(shù)據(jù)就開始定時(shí)循環(huán)隨機(jī)的顯示10層畫布中的其中一層，從視覺上呈現(xiàn)出不同時(shí)間段微博使用在地圖上的動(dòng)態(tài)分布效果。
顯示函數(shù)運(yùn)行過(guò)程如下：
運(yùn)行前設(shè)置一個(gè)數(shù)組來(lái)存放已經(jīng)顯示過(guò)的畫布id，初次運(yùn)行時(shí)數(shù)組為空；
運(yùn)行時(shí)先將10個(gè)畫布都設(shè)置為隱藏；
隨機(jī)取出10個(gè)畫布中的其中一個(gè)，然后將它的id與數(shù)組中存放的id進(jìn)行比較；如果已經(jīng)存在，就再隨機(jī)取一個(gè)畫布，直到取到的畫布id不在數(shù)組中；那么就將此畫布的id加入到數(shù)組中，并將畫布設(shè)置為顯示；判斷此時(shí)數(shù)組長(zhǎng)度是否已經(jīng)等于10，如果等于10，就清孔數(shù)組；數(shù)組等于10表示10個(gè)畫布都顯示過(guò)了，下次運(yùn)行的時(shí)候會(huì)重新來(lái)。
本發(fā)明通過(guò)初始化多層畫布的方式來(lái)預(yù)先存儲(chǔ)多組坐標(biāo)數(shù)據(jù)，減少了頻繁向后端請(qǐng)求坐標(biāo)數(shù)據(jù)；改為一次性拿到多組坐標(biāo)數(shù)據(jù)，然后一次性的把多組坐標(biāo)數(shù)據(jù)繪制到對(duì)應(yīng)的多層畫布上，減少了頻繁的前端畫布的繪制工作，改為只在初始化多層畫布的同時(shí)繪制對(duì)應(yīng)的畫布數(shù)據(jù)；多層畫布在頁(yè)面上是處于重疊狀態(tài)的，所以多層畫布初始化的狀態(tài)都為隱藏；當(dāng)數(shù)據(jù)在畫布上繪制完成后，會(huì)定時(shí)的根據(jù)相應(yīng)的算法將多層畫布中的一層狀態(tài)改為顯示，這樣在同一時(shí)間下只有一層畫布是顯示出來(lái)的；這樣會(huì)定時(shí)的讓多層畫布中的一層顯示其余的隱藏這種方式，來(lái)達(dá)到視覺上地圖上的數(shù)據(jù)是動(dòng)態(tài)變化的，定時(shí)時(shí)間設(shè)置越短，數(shù)據(jù)就變化得越快反之就越慢。
本發(fā)明可以顯著提高地圖動(dòng)態(tài)數(shù)據(jù)顯示的效率，可大大減少前端頁(yè)面地圖繪制的頻率，只需要在頁(yè)面初始化時(shí)進(jìn)行多個(gè)畫布的地圖數(shù)據(jù)繪制，之后都是通過(guò)畫布的顯示／隱藏，來(lái)顯示不同的畫布數(shù)據(jù)；地圖坐標(biāo)數(shù)據(jù)也可以只由前端生成固定的幾套數(shù)據(jù)，不需要頻繁請(qǐng)求后端來(lái)生成數(shù)據(jù)從而降低不必要后臺(tái)計(jì)算和網(wǎng)絡(luò)開銷；由于畫布及各層畫布的地圖及地圖動(dòng)態(tài)坐標(biāo)數(shù)據(jù)都在頁(yè)面初始化時(shí)已經(jīng)生成和繪制好，所以頁(yè)面初始化好以后不需要在繪制地圖及繪制地圖動(dòng)態(tài)數(shù)據(jù)上再消耗資源；通過(guò)顯隱/藏畫布的方式來(lái)模擬數(shù)據(jù)的動(dòng)態(tài)顯示比不斷調(diào)用繪圖api來(lái)重繪畫布的方式更高效，更節(jié)省前端消耗。
本文中：
html：超文本標(biāo)記語(yǔ)言。
xml：可擴(kuò)展的標(biāo)記語(yǔ)言，設(shè)計(jì)宗旨是為了傳輸數(shù)據(jù)而非顯示數(shù)據(jù)。
ajax：在不重新加載整個(gè)頁(yè)面的情況下，與服務(wù)器交換數(shù)據(jù)并更新部分頁(yè)面顯示更新數(shù)據(jù)的技術(shù)。
dom：文檔對(duì)象模型，w3c組織推薦的處理可擴(kuò)展標(biāo)記語(yǔ)言的標(biāo)準(zhǔn)編程接口。
id：編碼。
svg：可縮放矢量圖形。
api：applicationprogramminginterface應(yīng)用程序編程接口。