本發(fā)明涉及Web圖形繪制技術(shù)領(lǐng)域，特別是涉及一種支持多表現(xiàn)形式的統(tǒng)一Web圖形繪制系統(tǒng)。

背景技術(shù)：

基于Web圖形繪制技術(shù)廣泛應(yīng)用于各類監(jiān)控管理、運(yùn)維、態(tài)勢展現(xiàn)等軟件系統(tǒng)中，為實(shí)現(xiàn)電子地圖、網(wǎng)絡(luò)拓?fù)洹@區(qū)/房間、設(shè)備面板等的圖形化展示等發(fā)揮了重要的作用。然而在實(shí)際開發(fā)運(yùn)用中，Web圖形繪制的開發(fā)難度較之于典型的窗口界面更大，為了滿足Web圖形繪制展示和人機(jī)交互的需求，開發(fā)人員往往需要耗費(fèi)巨大的精力和時間。造成這種問題的主要原因在于：

一方面，軟件系統(tǒng)對Web圖形的表現(xiàn)形式要求較多，圖形表現(xiàn)形式涵蓋了2D平面圖形、3D立體圖形、電子地圖、空間場景等，但目前還沒有一款Web繪圖工具能夠廣泛覆蓋上述圖形表現(xiàn)形式，開發(fā)用戶只能根據(jù)不同的場景的需求，選用不同的繪圖工具，按照不同編程接口進(jìn)行開發(fā)。

另一方面，Web圖形繪制技術(shù)所涉及的技術(shù)流派較多，目前相關(guān)的主流技術(shù)至少包括SVG、VML、html5 canvas、WebGL等，要使用好相關(guān)繪圖工具開展開發(fā)工作，必須深入理解并熟練掌握相關(guān)的技術(shù)。這些Web前端圖形繪制技術(shù)的學(xué)習(xí)難度較高，技術(shù)發(fā)展更新速度快，不同技術(shù)體制之間差異大，即便是基于相似技術(shù)體制進(jìn)行上層封裝的不同繪圖工具，在實(shí)現(xiàn)方式和開發(fā)接口的設(shè)計上也是各異的，導(dǎo)致掌握這些技術(shù)和工具并應(yīng)用于具體項(xiàng)目的成本較高。

與此同時，如果在軟件設(shè)計開發(fā)過程中，選定某種具體的Web圖形繪制技術(shù)或工具，將不可避免地造成繪圖技術(shù)或工具與系統(tǒng)業(yè)務(wù)的緊密耦合，一旦軟件出現(xiàn)重大的需求變更或技術(shù)升級，對原有技術(shù)和工具變更將對系統(tǒng)造成嚴(yán)重的侵入式影響，導(dǎo)致軟件系統(tǒng)升級維護(hù)困難。

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

為解決上述問題，本發(fā)明提供了一種支持多表現(xiàn)形式的統(tǒng)一Web圖形繪制系統(tǒng)，包括服務(wù)器及及與服務(wù)器通信連接的各個Web前端。

所述服務(wù)器及各個Web前端設(shè)置有相同的繪圖數(shù)據(jù)模型庫、繪圖原語庫,所述服務(wù)器還設(shè)置有映射管理模塊。

繪圖數(shù)據(jù)模型庫包括畫板數(shù)據(jù)模型、點(diǎn)數(shù)據(jù)模型、線數(shù)據(jù)模型、樣式數(shù)據(jù)模型。

繪圖原語庫內(nèi)的繪圖原語包括建立畫板、重繪畫板、點(diǎn)繪制、點(diǎn)重繪、點(diǎn)擦除、線繪制、線重繪、線擦除。

所述映射管理模塊預(yù)先植入有所述服務(wù)端的畫板和Web前端的畫板實(shí)例的映射關(guān)系表，所述映射關(guān)系表中具有相同標(biāo)識信息的服務(wù)端和Web前端畫板實(shí)例具有映射關(guān)系，當(dāng)服務(wù)器端畫板的繪圖信息變化時，映射管理模塊可將變化后的繪圖信息根據(jù)需要實(shí)時反映到全部或者部分具有映射關(guān)系的Web前端。

進(jìn)一步的，所述服務(wù)器還設(shè)置有聯(lián)動控制模塊，所述聯(lián)動控制模塊用于實(shí)時感知與服務(wù)器具有映射關(guān)系的Web前端畫板的繪圖信息的變化，并將感應(yīng)到的變化信息實(shí)時反映到與具有映射關(guān)系的其余Web前端畫板實(shí)例。

進(jìn)一步的，所述服務(wù)器還包括訪問控制模塊，用于控制與Web前端對服務(wù)器端的繪圖數(shù)據(jù)模型資源獲取范圍及操作權(quán)限。

進(jìn)一步的，與服務(wù)器具有相同映射關(guān)系的Web前端畫板分別獲取對應(yīng)服務(wù)端畫板中所具有的繪圖數(shù)據(jù)模型的相應(yīng)子集。

進(jìn)一步的，所述畫板數(shù)據(jù)模型用以描述一副獨(dú)立圖形的基本信息，其屬性數(shù)據(jù)包括點(diǎn)集合，線集合、樣式集合等，并提供標(biāo)準(zhǔn)的繪圖接口。

進(jìn)一步的，點(diǎn)數(shù)據(jù)模型用以描述圖形中實(shí)體元素的結(jié)構(gòu)模型，其主要屬性數(shù)據(jù)包括唯一標(biāo)識、關(guān)聯(lián)樣式、位置信息、描述信息。

進(jìn)一步的，線數(shù)據(jù)模型用以描述一副圖形中實(shí)體元素間連接關(guān)系的結(jié)構(gòu)模型，其主要屬性數(shù)據(jù)包括唯一標(biāo)識、關(guān)聯(lián)樣式、起始點(diǎn)、結(jié)束點(diǎn)、描述信息等、

進(jìn)一步的，樣式數(shù)據(jù)模型對圖形中具體繪圖元素的表現(xiàn)進(jìn)行描述，主要屬性包括：唯一標(biāo)識、關(guān)聯(lián)圖標(biāo)、顏色、所屬父節(jié)點(diǎn)等。

進(jìn)一步的，服務(wù)器端通過類聲明的方式定義畫板數(shù)據(jù)模型、點(diǎn)數(shù)據(jù)模型、線數(shù)據(jù)模型、樣式數(shù)據(jù)模型，Web前端通過Javascript腳本語言，利用JSON結(jié)構(gòu)加以定義。

進(jìn)一步的，在映射關(guān)系表中，服務(wù)器畫板與Web前端畫板具有一對多的映射關(guān)系。

本發(fā)明的有益效果為：

本發(fā)明可以有效屏蔽各類Web繪圖工具異構(gòu)的數(shù)據(jù)模型、接口以及復(fù)雜的底層實(shí)現(xiàn)細(xì)節(jié)，將應(yīng)用系統(tǒng)的開發(fā)與若干差異巨大的繪圖技術(shù)/工具解耦，開發(fā)人員只需掌握一套統(tǒng)一的繪圖模型和接口，即可同時滿足不同形式Web圖形繪制的需求；同時，通過該方法，開發(fā)人員無需掌握瀏覽器端開發(fā)語言和各種復(fù)雜的前端繪圖技術(shù)，無需維護(hù)Web環(huán)境下多個客戶端圖形數(shù)據(jù)同步更新及時重繪等技術(shù)細(xì)節(jié)，方便的實(shí)現(xiàn)不同表現(xiàn)形式的圖形繪制，顯著降低Web繪圖學(xué)習(xí)和掌握難度，節(jié)省開發(fā)成本，易于系統(tǒng)維護(hù)和升級。

附圖說明

圖1為本發(fā)明所述系統(tǒng)的結(jié)構(gòu)示意圖。

圖2為映射管理模塊工作原理圖。

圖3為聯(lián)動控制模塊工作原理圖。

圖4為訪問控制模塊工作原理圖。

具體實(shí)施方式

本發(fā)明的設(shè)計構(gòu)思為：本發(fā)明建立一個統(tǒng)一Web圖形繪制系統(tǒng),在該系統(tǒng)中中建立一套統(tǒng)一的、可擴(kuò)展的、前后端同構(gòu)的，用以描述Web圖形結(jié)構(gòu)的基礎(chǔ)數(shù)據(jù)模型。再基于統(tǒng)一的Web圖形數(shù)據(jù)模型，定義一組統(tǒng)一的圖形繪制原語，并實(shí)現(xiàn)相應(yīng)的接口API，二次開發(fā)人員可通過該接口實(shí)現(xiàn)各類圖形繪制功能，無需關(guān)心底層技術(shù)實(shí)現(xiàn)細(xì)節(jié)。最后，基于統(tǒng)一的Web圖形數(shù)據(jù)模型及繪圖接口，設(shè)計實(shí)現(xiàn)一種針對Web應(yīng)用場景下，面向多客戶端的Web圖形自動繪制機(jī)制，解決圖形數(shù)據(jù)更新后，不同客戶端圖形及時重繪的問題。

下面對本系統(tǒng)進(jìn)行詳細(xì)說明。

如圖1所示，本系統(tǒng)包括服務(wù)器及與服務(wù)器通信連接的各個Web前端；

所述服務(wù)器及Web前端設(shè)置有相同的繪圖數(shù)據(jù)模型庫、繪圖原語庫,所述服務(wù)器還是設(shè)置有映射管理模塊。下面分別予以介紹。

一.繪圖數(shù)據(jù)模型庫

該模型庫以統(tǒng)一數(shù)據(jù)模型為基礎(chǔ)，實(shí)現(xiàn)結(jié)構(gòu)模型和表現(xiàn)模型的分離；所有的Web圖形數(shù)據(jù)模型均以幾個簡單的圖形數(shù)據(jù)模型為基礎(chǔ)進(jìn)行擴(kuò)展定義；服務(wù)器端與客戶端均設(shè)計了同構(gòu)的數(shù)據(jù)模型?；A(chǔ)數(shù)據(jù)模型包括但不限于以下幾類：

1.畫板(Palette)：用以描述一副獨(dú)立圖形的基本信息，其主要屬性數(shù)據(jù)包括點(diǎn)集合，線集合、樣式集合等，并提供標(biāo)準(zhǔn)的繪圖接口。

2.點(diǎn)(Node)：用以描述圖形中實(shí)體元素的結(jié)構(gòu)模型，其主要屬性數(shù)據(jù)包括唯一標(biāo)識、關(guān)聯(lián)樣式、位置信息、描述信息等。

3.線(Line):用以描述一副圖形中實(shí)體元素間連接關(guān)系的結(jié)構(gòu)模型，其主要屬性數(shù)據(jù)包括唯一標(biāo)識、關(guān)聯(lián)樣式、起始點(diǎn)、結(jié)束點(diǎn)、描述信息等。

4.樣式(Style):對圖形中具體繪圖元素的表現(xiàn)進(jìn)行描述，針對不同的數(shù)據(jù)模型，具有不同的樣式。點(diǎn)模型樣式的主要屬性包括：唯一標(biāo)識、關(guān)聯(lián)圖標(biāo)、顏色、所屬父節(jié)點(diǎn)等；線模型樣式的主要屬性包括：唯一標(biāo)識、顏色、線的粗細(xì)、線型等。

針對上述數(shù)據(jù)模型，在服務(wù)器端可利用面向?qū)ο蟮母呒壋绦蛟O(shè)計語言，通過類聲明的方式加以定義，在Web前端可通過Javascript腳本語言，利用JSON結(jié)構(gòu)加以定義。兩端數(shù)據(jù)結(jié)構(gòu)的屬性及其意義均相同。

二次開發(fā)人員可以實(shí)現(xiàn)上述數(shù)據(jù)模型的類為父類，根據(jù)需求對圖形數(shù)據(jù)模型進(jìn)行擴(kuò)展定制。

二.繪圖原語庫

基于上述圖形數(shù)據(jù)模型，本發(fā)明提出了一套統(tǒng)一的繪圖原語，并在服務(wù)器和客戶端分別加以實(shí)現(xiàn)。繪圖原語的前端實(shí)現(xiàn)部分，其實(shí)質(zhì)就是對各種不同種類Web圖形繪制技術(shù)或工具的上層封裝。

本發(fā)明所述繪圖原語的特征在于，其繪圖原語包括但不限于以下幾個方面：

1.建立畫板：用于建立畫板實(shí)例。

2.重繪畫板：用于對畫版中已有的圖形元素進(jìn)行重新繪制。

3.點(diǎn)繪制：用于將點(diǎn)結(jié)構(gòu)模型和樣式模型關(guān)聯(lián)后進(jìn)行圖形繪制。

4.點(diǎn)重繪：用于更改點(diǎn)結(jié)構(gòu)模型關(guān)聯(lián)的樣式模型后進(jìn)行圖形繪制。

5.點(diǎn)擦除：用于在畫板中刪除已有的點(diǎn)結(jié)構(gòu)模型。

6.線繪制：用于將線結(jié)構(gòu)模型和樣式模型關(guān)聯(lián)后進(jìn)行圖形繪制。

7.線重繪：用于更改線結(jié)構(gòu)模型關(guān)聯(lián)的樣式模型后進(jìn)行圖形繪制。

8.線擦除：用于在畫板中刪除已有的線結(jié)構(gòu)模型。

三.映射管理模塊

所述映射管理模塊預(yù)先植入有所述服務(wù)端的畫板和Web前端的畫板實(shí)例的映射關(guān)系表，所述映射關(guān)系表中具有相同標(biāo)識信息的服務(wù)端和Web前端畫板實(shí)例具有映射關(guān)系，當(dāng)服務(wù)器端畫板的繪圖信息變化時，映射管理模塊可將變化后的繪圖信息根據(jù)需要實(shí)時反映到全部或者部分具有映射關(guān)系的Web前端。

本模塊的設(shè)置是為了解決Web圖形多客戶端實(shí)時刷新機(jī)制，用以解決圖形數(shù)據(jù)更新后，多客戶端圖形及時重繪的問題。

如圖2所示，本模塊的主要原理在于：

a.服務(wù)端和Web前端的畫板實(shí)例可通過其標(biāo)識信息進(jìn)行映射，具有相同標(biāo)識信息的服務(wù)端和Web前端畫板實(shí)例具有映射關(guān)系。

b.服務(wù)端畫板描述的繪圖信息及其變化，可實(shí)時反映到與其具有映射關(guān)系的Web前端畫板實(shí)例進(jìn)行展示。

c.服務(wù)端畫板和Web前端畫板具有一對多的映射關(guān)系，同一個服務(wù)端畫板的繪圖信息可分別映射到不同類別的Web前端畫板，從而實(shí)現(xiàn)同一繪圖數(shù)據(jù)模型的多元展示，如服務(wù)端繪圖畫板分別映射到類別為2D GIS和3D GIS的前端畫板實(shí)例，則其前端展現(xiàn)分別為2D GIS圖形和3D GIS圖形。

優(yōu)選的，服務(wù)器還設(shè)置有聯(lián)動控制模塊。

所述聯(lián)動控制模塊用于實(shí)時感知與服務(wù)器具有映射關(guān)系的Web前端畫板的繪圖信息的變化，并將感應(yīng)到的變化信息實(shí)時反映到與具有映射關(guān)系的其余Web前端畫板實(shí)例。

如圖3所示，聯(lián)動控制模塊的主要工作原理在于：

a.服務(wù)端畫板和Web前端畫板的映射關(guān)系是可管理的，在服務(wù)端畫板實(shí)例所具有的一對多的映射關(guān)系集合中，可選擇其中部分子集合進(jìn)行繪圖信息的映射；

b.服務(wù)端畫板可實(shí)時感知與其具有映射關(guān)系的Web前端畫板的繪圖信息的變化，并將感應(yīng)到的變化信息實(shí)時反映到與其具有映射關(guān)系的其余Web前端畫板實(shí)例。

更有選的，服務(wù)器還是設(shè)置有訪問控制模塊。

所述訪問控制模塊用于控制與Web前端對服務(wù)器端的繪圖數(shù)據(jù)模型資源獲取范圍及操作權(quán)限。

如圖4所示，訪問控制模塊的主要工作原理在于：

a.通過訪問控制，一方面，實(shí)現(xiàn)對繪圖數(shù)據(jù)模型資源獲取范圍的控制；另一方面，實(shí)現(xiàn)對繪圖模型資源操作(讀取、增加、刪除、更改)的控制；控制的最小粒度為：點(diǎn)和線。

b.具有相同映射關(guān)系的客戶端畫板，通過訪問控制后，僅能分別獲取對應(yīng)服務(wù)端畫板中所具有的繪圖數(shù)據(jù)模型的相應(yīng)子集。

c.具有相同映射關(guān)系的客戶端畫板，通過訪問控制后，客戶端畫板對數(shù)據(jù)模型資源的操作權(quán)限各有不同，有的客戶端畫板僅能讀取資源，有的客戶端畫板可增加、刪除、更改資源等。