[發(fā)明專利]基于HTML5高清位圖的動(dòng)態(tài)信息融合展現(xiàn)方法

有效

• 申請?zhí)枺?/td>: 201410798772.4
• 申請日: 2014-12-22
• 公開（公告）號(hào): CN104503755B
• 公開（公告）日: 2018-02-13
• 發(fā)明（設(shè)計(jì)）人: 陳魯;符興斌;李鎖在;韓鵬;孫樹剛;劉濤;王偉;謝樂鳴;張志剛;張建波;陳景華;張躍鵬
• 申請（專利權(quán)）人: 中軟信息系統(tǒng)工程有限公司
• 主分類號(hào): G06F9/44
• 分類號(hào): G06F9/44;G06F17/30
• 代理公司: 暫無信息
• 代理人: 暫無信息

技術(shù)領(lǐng)域

本發(fā)明涉及一種位圖展現(xiàn)方法，具體地說是一種基于HTML5高清位圖的動(dòng)態(tài)信息融合展現(xiàn)方法，屬于位圖在線展現(xiàn)方法領(lǐng)域。

背景技術(shù)

目前web應(yīng)用中地圖應(yīng)用都是采用GIS，對于低投入、小成本的項(xiàng)目需要有一種可以替代GIS的在線地圖方案，而在線位圖示意地圖成為首選方案，但HTML4中將位圖展示與信息融合主要采用前端標(biāo)簽實(shí)現(xiàn)展示、Ajax技術(shù)實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)的獲取，但這種方式在獲取數(shù)據(jù)的性能上存在問題，另一種方式是通過直接Flash技術(shù)實(shí)現(xiàn)展示與數(shù)據(jù)獲取，但這種方式不能動(dòng)態(tài)擴(kuò)展展現(xiàn)組件。HTML5作為HTML標(biāo)準(zhǔn)的下一個(gè)版本，其具備在線繪圖、前后端雙向通信、應(yīng)用擴(kuò)展方便等特性。基于HTML5高清位圖的動(dòng)態(tài)信息融合展現(xiàn)方法，將高清位圖融合實(shí)時(shí)信息數(shù)據(jù)實(shí)現(xiàn)在線展示成為可能。

發(fā)明內(nèi)容

本發(fā)明的目的在于提供了一種基于HTML5高清位圖的動(dòng)態(tài)信息融合展現(xiàn)方法，能夠低成本的在線地圖示意，并在示意圖上提供相應(yīng)點(diǎn)位實(shí)時(shí)數(shù)據(jù)的展示，達(dá)到在線繪制點(diǎn)位、熱區(qū)和服務(wù)端主動(dòng)推送實(shí)時(shí)數(shù)據(jù)至前端做展示的目的。

本發(fā)明的技術(shù)方案為：

基于HTML5高清位圖的動(dòng)態(tài)信息融合展現(xiàn)方法，該方法運(yùn)行在瀏覽器Chrome30.0或Firefox31.0上，實(shí)時(shí)數(shù)據(jù)由基于.netFramework平臺(tái)的服務(wù)提供，或通過其他開發(fā)平臺(tái)提供，具體步驟如下：

(1)基于.net開發(fā)WebSocket服務(wù)，為前端提供數(shù)據(jù)支撐；

(2)創(chuàng)建HTML5頁面，前端通過Javascript實(shí)現(xiàn)與WebSocket服務(wù)實(shí)現(xiàn)通信；

(3)通過開源CraftMap腳本庫加載底圖；

(4)通過開源mapper腳本庫實(shí)現(xiàn)位圖熱區(qū)展示處理；

(5)通過開源raphael腳本庫加載點(diǎn)位；

(6)通過WebSocket回調(diào)函數(shù)，更新點(diǎn)位信息。

其中，所述步驟(1)的.net開發(fā)WebSocket服務(wù)是指，基于.netFramework開發(fā)windows服務(wù)程序，程序提供WebSocket的service服務(wù)，開啟監(jiān)聽端口后，接收客戶端的連接。

所述步驟(2)的創(chuàng)建HTML5頁面，通過腳本調(diào)用Html5的API，獲得通信對象，傳入的服務(wù)端IP、端口，實(shí)現(xiàn)與服務(wù)端的通信。

所述步驟(3)的CraftMap腳本庫是指開源腳本API，提供底圖的展示與操作，能夠修改源碼實(shí)現(xiàn)多層的底圖的擴(kuò)展。

所述步驟(4)的mapper腳本庫提供底圖上任意位置交互事件功能，提供相應(yīng)的坐標(biāo)以及該區(qū)域事件處理方法，完成該區(qū)域的交互功能。

所述步驟(5)的raphael腳本庫是作為基本工具包實(shí)現(xiàn)腳本繪制SVG點(diǎn)、線、面等矢量圖形。

本發(fā)明采用高清位圖多層展現(xiàn)方法、點(diǎn)位動(dòng)態(tài)定位展現(xiàn)方法、點(diǎn)位實(shí)時(shí)信息展現(xiàn)方法，通過位圖實(shí)現(xiàn)在線示意地圖，并在地圖上提供用戶交互事件和以圖形化方式的實(shí)時(shí)信息展示，利用websocket通信協(xié)議解決在線實(shí)時(shí)數(shù)據(jù)性能問題。

本發(fā)明采用HTML5、Javascript和SVG圖形技術(shù)實(shí)現(xiàn)用戶可在位圖任意位置繪制熱區(qū)，并可將熱區(qū)鏈接相應(yīng)到位圖，實(shí)現(xiàn)層層點(diǎn)擊展開詳細(xì)位圖的效果。

本發(fā)明通過Javascript和HTML5技術(shù)實(shí)現(xiàn)位圖上點(diǎn)位位置可任意定義，以所見及所得的方式配置點(diǎn)位位置，并可在任意層位圖定義點(diǎn)位。用戶選中點(diǎn)位后地圖自動(dòng)定位切換點(diǎn)位到屏幕中心位置。

本發(fā)明基于WebSocket通信技術(shù)實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)的融合點(diǎn)位的展示，采用服務(wù)端主動(dòng)推送數(shù)據(jù)到瀏覽器端，解決原有HTML4中通過輪循請求而導(dǎo)致服務(wù)器壓力的問題。

本發(fā)明的優(yōu)點(diǎn)在于：在不使用龐大的GIS系統(tǒng)下實(shí)現(xiàn)了在線地圖示意圖，降低了成本，減少了前端與后臺(tái)之間的通信壓力，提高了系統(tǒng)整體性能，使用戶體驗(yàn)更好。

下面結(jié)合附圖和實(shí)施例對本發(fā)明作進(jìn)一步說明。

附圖說明

圖1為本發(fā)明實(shí)施例的整體流程圖。

圖2為本發(fā)明實(shí)施例基于HTML5高清位圖的動(dòng)態(tài)信息融合展現(xiàn)效果圖。

圖3為本發(fā)明實(shí)施例在線熱區(qū)展示效果圖。

圖4為本發(fā)明實(shí)施例在線點(diǎn)位展示效果圖。

圖5為本發(fā)明實(shí)施例點(diǎn)位詳細(xì)信息展示效果圖。

具體實(shí)施方式

以下對本發(fā)明的優(yōu)選實(shí)施例進(jìn)行說明，應(yīng)當(dāng)理解，此處所描述的優(yōu)選實(shí)施例僅用于說明和解釋本發(fā)明，并不用于限定本發(fā)明。

實(shí)施例1