本發(fā)明涉及一種基于arcgisapiforjavascript的大數(shù)據(jù)渲染方法。

背景技術(shù)：

目前web-gis(網(wǎng)絡(luò)地理信息系統(tǒng))可視化技術(shù)研究已取得了一定的成果，但在提高海量數(shù)據(jù)的展示渲染方面仍有待進(jìn)一步研究。

arcgisapiforjavascript是當(dāng)前主流的web-gis應(yīng)用，arcgisapiforjavascript的地圖控件中加載的圖層為一個(gè)canvas，圖層上每個(gè)要素為一個(gè)svg(指可伸縮矢量圖形)，這樣的方式方便arcgis統(tǒng)一管理、監(jiān)控、展示，但同時(shí)帶來另一個(gè)問題就是海量數(shù)據(jù)渲染展示時(shí)將導(dǎo)致卡頓，當(dāng)數(shù)據(jù)量超過4千的時(shí)候?qū)蛻舳藥矸浅４蟮膲毫︿秩狙訒r(shí)非常嚴(yán)重，數(shù)量再增加至4萬條的時(shí)候，地圖上每次操作，都有可能引起瀏覽器的無法響應(yīng)，極大的影響了展示效果和用戶體驗(yàn)。

技術(shù)實(shí)現(xiàn)要素：

基于此，有必要針對(duì)web-gis海量數(shù)據(jù)渲染速度比較慢的問題，提供一種高效率的web-gis海量數(shù)據(jù)渲染方法。

為了實(shí)現(xiàn)上述目標(biāo)，本發(fā)明采用如下技術(shù)方案：

一種基于arcgisapiforjavascript的大數(shù)據(jù)渲染方法，包括以下步驟，

s1、創(chuàng)建html5中canvas對(duì)象作為自定義圖層；

s2、將自定義圖層插入arcgisapiforjavascript地圖控件所在的div中；

s3、獲取地圖控件顯示范圍，并范圍過濾需要展示和渲染的要素；

s4、將需要渲染要素的地理坐標(biāo)換算成屏幕像素坐標(biāo)；

s5、先清除自定義圖層上的舊數(shù)據(jù)，再將新要素渲染到自定義圖層上；

s6、監(jiān)聽地圖控件的pan和extent-change事件，地圖范圍發(fā)生變化重復(fù)s3、s4、s5、s6步驟。

進(jìn)一步地，所述步驟s2將canvas作為自定義圖層插入到地圖控件所在div中，且插入的自定義圖層不會(huì)影響地圖控件的事件觸發(fā)，包括單擊、雙擊、移動(dòng)。

進(jìn)一步地，所述步驟s2中，像素轉(zhuǎn)換是通過地圖控件的顯示范圍與地圖控件的比例尺，計(jì)算出真實(shí)坐標(biāo)點(diǎn)在對(duì)應(yīng)在自定義圖層上的像素位置。

進(jìn)一步地，所述步驟s5將需要渲染的新要素通過html5渲染在一個(gè)自定義圖層canvas內(nèi)。

本發(fā)明的有益效果是：將需要渲染的要素轉(zhuǎn)換為屏幕坐標(biāo)后一次性繪制在html5的canvas中渲染，然后將此canvas插入arcgisapiforjavascript地圖所在div中，沒有海量的svg要素渲染過程，讓渲染在瞬間完成，所以此發(fā)明徹底解決了arcgisapiforjavascript地圖中加載海量數(shù)數(shù)據(jù)的問題。經(jīng)過實(shí)測(cè)百萬級(jí)要素的渲染時(shí)間不超過1秒，并且插入的canvas不影響arcgisapiforjavascript地圖控件的事件觸發(fā)，此發(fā)明與arcgisapiforjavascript完美集成。

附圖說明

圖1是本發(fā)明實(shí)施例基于arcgisapiforjavascript的大數(shù)據(jù)渲染方法的流程示意圖。

圖2是本發(fā)明實(shí)施例對(duì)102萬條柵格數(shù)據(jù)的渲染效果示意圖。

具體實(shí)施方式

為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合附圖及實(shí)施例，對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。

名詞注釋：

html5：萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用超文本標(biāo)記語言。

canvas：是元素用于在網(wǎng)頁上繪制圖形。

div：是用來為html文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景的元素。

svg：可縮放矢量圖形是基于可擴(kuò)展標(biāo)記語言(標(biāo)準(zhǔn)通用標(biāo)記語言的子集)，用于描述二維矢量圖形的一種圖形格式。它由萬維網(wǎng)聯(lián)盟制定，是一個(gè)開放標(biāo)準(zhǔn)。

javascript：一種直譯式腳本語言

arcgisapiforjavascript：esri根據(jù)javascript技術(shù)實(shí)現(xiàn)的調(diào)用arcgisserverrestapi接口的一組腳本。

pan：地圖控件移動(dòng)事件，當(dāng)?shù)貓D移動(dòng)的時(shí)候觸發(fā)該事件。

extent-change：地圖控件范圍變化事件，當(dāng)?shù)貓D范圍發(fā)生變化的時(shí)候觸發(fā)該事件。

參見圖1所示，一種基于arcgisapiforjavascript的大數(shù)據(jù)渲染方法，包括以下步驟：

步驟s1，創(chuàng)建html5中canvas對(duì)象作為自定義圖層，然后進(jìn)入步驟s2。

步驟s2，將步驟s1自定義圖層插入arcgisapiforjavascript地圖控件所在的div中，可以用html中div添加子元素的辦法進(jìn)行添加，注意的是不能通過arcgisapiforjavascript地圖控件map添加圖層的辦法。

步驟s3，獲取地圖控件范圍，并通過地圖控件范圍過濾需要展示和渲染的要素。地圖控件范圍是地圖控件的自帶函數(shù)。

步驟s4，將步驟s3中獲取的要素的地理坐標(biāo)轉(zhuǎn)換為屏幕的像素坐標(biāo)，此步驟像素轉(zhuǎn)換，是通過地圖控件的顯示范圍與地圖控件的比例尺，計(jì)算出真實(shí)坐標(biāo)點(diǎn)在對(duì)應(yīng)在自定義圖層上的像素位置。

步驟s5，先清除自定義圖層上的舊數(shù)據(jù)，再將新要素渲染到自定義圖層上。渲染的是將矢量數(shù)據(jù)，通過符號(hào)可視化展示出來，因?yàn)殇秩痉绞讲皇潜景l(fā)明的重點(diǎn)，所以不做詳細(xì)闡述。值得注意的是，將海量要素一次性渲染在一個(gè)canvas上，而arcgisapiforjavascript地圖控件的渲染原理則是每個(gè)要素為一個(gè)svg，可以理解成每個(gè)要素為一個(gè)canvas，在系統(tǒng)中就會(huì)有海量的canvas導(dǎo)致渲染效率低，延時(shí)嚴(yán)重。

步驟s6，監(jiān)聽地圖控件的pan和extent-change事件，地圖范圍或等級(jí)發(fā)生變化進(jìn)入步驟s3，為了保證自定義圖層中渲染的數(shù)據(jù)與地圖控件的范圍保持一致，所以當(dāng)?shù)貓D范圍變化是需要重新篩選數(shù)據(jù)并在自定義圖層上進(jìn)行渲染。

步驟s6中，監(jiān)聽pan和extent-change事件這兩個(gè)事件是為了在地圖范圍或等級(jí)發(fā)生變化時(shí)重新繪制需要展示的要素，達(dá)到展示的要素與地圖范圍一致的目的。

圖2是運(yùn)用本發(fā)明將102萬個(gè)柵格數(shù)據(jù)在地圖控件中的渲染效果示意圖，如果采用傳統(tǒng)的數(shù)據(jù)渲染方式102萬個(gè)柵格很可能直接導(dǎo)致瀏覽器無響應(yīng)，正因?yàn)椴捎昧吮景l(fā)明102萬條數(shù)據(jù)渲染在1秒內(nèi)完成，極大地提高了海量數(shù)據(jù)的渲染速度和效率。

通過以上方案可以看出，實(shí)施例的該種基于arcgisapiforjavascript的大數(shù)據(jù)渲染方法，通過對(duì)海量數(shù)據(jù)放在一個(gè)canvas上渲染，避免了傳統(tǒng)方法中每個(gè)要素對(duì)應(yīng)一個(gè)svg(類似canvas)，渲染所帶來的消耗時(shí)間長(zhǎng)、渲染速度慢的問題，能夠?qū)崟r(shí)渲染出海量數(shù)據(jù)，極大地提高了海量數(shù)據(jù)的渲染速度和效率。

以上所述實(shí)施例僅表達(dá)了本發(fā)明的幾種實(shí)施方式，其描述較為具體和詳細(xì)，但并不能因此而理解為對(duì)本發(fā)明專利范圍的限制。應(yīng)當(dāng)指出的是，對(duì)于本領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明構(gòu)思的前提下，還可以做出若干變形和改進(jìn)，這些都屬于本發(fā)明的保護(hù)范圍。因此，本發(fā)明專利的保護(hù)范圍應(yīng)以所附權(quán)利要求為準(zhǔn)。