本發(fā)明涉及地理信息可視化領(lǐng)域，特別是一種基于B S架構(gòu)的跨終端三維數(shù)字地球交互方法。

背景技術(shù)：

隨著遙感探測手段的提高，以及計(jì)算機(jī)圖形學(xué)和虛擬仿真技術(shù)的發(fā)展，由于沉浸度高、真實(shí)性強(qiáng)等優(yōu)勢，三維地理信息系統(tǒng)成為地理信息系統(tǒng)的重要發(fā)展趨勢，是進(jìn)行全方位、多層次、多要素時(shí)空分析的基礎(chǔ)。特別是自1998年時(shí)任美國副總統(tǒng)戈?duì)柼岢觥皵?shù)字地球”的概念以來，通過三維球體形式進(jìn)行多源海量時(shí)空數(shù)據(jù)的組織和展現(xiàn)成為地理信息系統(tǒng)方向的研究熱點(diǎn)。國內(nèi)外涌現(xiàn)出了像ArcGIS Explore、Google Earth、Virtual Earth、World Wind、SkyLine、EV Globe、GeoGlobe、GeoBeans等三維地理信息系統(tǒng)和數(shù)字地球平臺(tái)。

另一方面，隨著Internet技術(shù)的不斷發(fā)展，特別是萬維網(wǎng)的出現(xiàn)和普及，在網(wǎng)絡(luò)上發(fā)布空間數(shù)據(jù)，為用戶提供空間數(shù)據(jù)瀏覽、查詢和分析等地理信息服務(wù)已成為新的客戶需要和地理信息系統(tǒng)發(fā)展的必然趨勢。地理信息系統(tǒng)通過Internet技術(shù)使功能得以擴(kuò)展，從面向個(gè)人、部門發(fā)展為面向社會(huì)和公眾，從而真正成為一種大眾化的信息服務(wù)工具。當(dāng)前，基于Internet的地理信息系統(tǒng)主要以二維為主，三維數(shù)字地球則主要通過Active X或Flash插件技術(shù)實(shí)現(xiàn)，受限于客戶端平臺(tái)和瀏覽器類型。

隨著無線通信技術(shù)的快速發(fā)展，使無線通信技術(shù)、Internet技術(shù)與地理信息技術(shù)的結(jié)合實(shí)現(xiàn)，形成一種新的技術(shù)——無線定位技術(shù)，隨之也衍生出了一種新的服務(wù)，即基于位置的服務(wù)，是目前移動(dòng)地理信息系統(tǒng)的主要應(yīng)用方向。移動(dòng)地理信息系統(tǒng)目前也仍以二維地圖服務(wù)為主流，一些三維數(shù)字地球主要通過APP的形式進(jìn)行實(shí)現(xiàn)，這種實(shí)現(xiàn)方式受限于移動(dòng)終端。

隨著WebGL技術(shù)的推出和終端渲染計(jì)算能力的提升，近兩年，基于瀏覽器原生渲染能力的三維顯示技術(shù)被提出，能夠?qū)崿F(xiàn)跨瀏覽器、跨終端的訪問應(yīng)用，減少多版本帶來的開發(fā)成本。不同于桌面瀏覽器主要通過鼠標(biāo)鍵盤的交互方式，移動(dòng)端交互方式主要體現(xiàn)為單點(diǎn)觸摸、多點(diǎn)觸摸、手勢識(shí)別、重力感應(yīng)等。另外，桌面和移動(dòng)端的顯示分辨率也往往不同。而這些差異會(huì)給系統(tǒng)開發(fā)和用戶體驗(yàn)方面帶來干擾。因此，在基于B/S架構(gòu)的跨終端三維數(shù)字地球應(yīng)用中，自適應(yīng)交互技術(shù)是非常重要的。

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

本發(fā)明要解決的技術(shù)問題是針對上述現(xiàn)有技術(shù)的不足，而提供一種基于BS架構(gòu)的跨終端三維數(shù)字地球交互方法，該基于BS架構(gòu)的跨終端三維數(shù)字地球交互方法能屏蔽桌面端和移動(dòng)端在屏幕分辨率、主要操作方式和瀏覽器支持WebGL程度等方面差異給系統(tǒng)開發(fā)和用戶體驗(yàn)方面帶來的干擾；能夠根據(jù)終端形態(tài)自適應(yīng)生成界面布局和交互方式，從而實(shí)現(xiàn)一套系統(tǒng)在桌面端和移動(dòng)端的瀏覽器上都能正常運(yùn)行。

為解決上述技術(shù)問題，本發(fā)明采用的技術(shù)方案是：

一種基于BS架構(gòu)的跨終端三維數(shù)字地球交互方法，包括如下步驟。

步驟1，瀏覽器版本驗(yàn)證：在系統(tǒng)構(gòu)建時(shí)，需先進(jìn)行瀏覽器版本驗(yàn)證，瀏覽器版本驗(yàn)證包括如下步驟。

步驟1a，獲得瀏覽器的UA標(biāo)識(shí)：通過瀏覽器接口獲得UA標(biāo)識(shí)，UA標(biāo)識(shí)是指User Agent，也即用戶代理。

步驟1b，終端型號(hào)判斷：根據(jù)步驟1a獲得的UA標(biāo)識(shí)，判斷并獲得終端型號(hào)。

步驟1c，瀏覽器版本判斷：根據(jù)步驟1a獲得的UA標(biāo)識(shí)，判斷并獲得瀏覽器版本。

步驟1d，WebGL兼容程度判斷：將步驟1b獲得的終端型號(hào)和步驟1c獲得的瀏覽器版本，與WebGL中內(nèi)置的終端型號(hào)及瀏覽器版本對照表，進(jìn)行比對與判斷其與WebGL的兼容程度；

1)當(dāng)判定結(jié)果為完全兼容時(shí)，對三維數(shù)字地球平臺(tái)進(jìn)行完全加載；完全加載的內(nèi)容主要包括當(dāng)前顯示配置下三維數(shù)字地球中全部圖層、特效，界面框架中全部界面控件元素。

2)當(dāng)判定結(jié)果為部分兼容時(shí)，則加載三維數(shù)字地球平臺(tái)中能夠被支持的顯示要素，并彈出可能不兼容方面的提示。

3)當(dāng)判定結(jié)果為完全不兼容時(shí)，彈出瀏覽器版本不兼容提示，禁止三維數(shù)字地球平臺(tái)的創(chuàng)建，并給出推薦瀏覽器版本下載地址。

步驟2，響應(yīng)式布局：根據(jù)屏幕分別率進(jìn)行響應(yīng)式布局，自適應(yīng)生成各類界面控件；響應(yīng)式布局方法，具體包括如下步驟。

步驟2a，獲取終端屏幕分辨率，終端屏幕分辨率包括屏幕寬度信息，當(dāng)屏幕寬高比大于等于3/4時(shí)，視為橫屏模式，否則視為豎屏模式。

步驟2b，計(jì)算布局位置：根據(jù)步驟2a獲取的終端屏幕分辨率，計(jì)算三維數(shù)字地球平臺(tái)的視圖和操作界面控件的布局位置；橫屏模式下，采用側(cè)邊欄導(dǎo)航布局，豎屏模式下，采用底部導(dǎo)航布局。

步驟2c，計(jì)算控件尺寸：根據(jù)步驟2a獲取的屏幕分辨率，計(jì)算三維數(shù)字地球憑條的視圖和操作界面控件的尺寸大??；橫屏模式下，導(dǎo)航條高度為100％，導(dǎo)航條寬度范圍為60-160px；豎屏模式下，導(dǎo)航條寬度為100％，導(dǎo)航條高度不超過100px。

步驟2d，計(jì)算字體大?。焊鶕?jù)步驟2a獲取的屏幕分辨率，計(jì)算視圖內(nèi)和操作界面控件內(nèi)的字體大小，字體大小范圍在10-24px。

步驟2e，圖片/視頻優(yōu)化：根據(jù)步驟2a獲取的屏幕分辨率，對要顯示的圖片資源或視頻資源進(jìn)行尺寸和分辨率優(yōu)化；圖片及視頻均采用自適應(yīng)模式，保留原始寬高比的同時(shí)，最大寬度及高度均不超過80％。

步驟2f，自適應(yīng)界面控件生成：根據(jù)步驟2b至步驟2e得到的布局位置、控件尺寸、字體大小和優(yōu)化后的圖片/視頻，自適應(yīng)生成各類界面控件。

步驟3，自適應(yīng)交互：自適應(yīng)交互的方法，具體包括如下步驟。

步驟3a，終端交互能力判斷：根據(jù)步驟1b獲取的終端型號(hào)，對終端支持的交互能力進(jìn)行判斷。交互能力判斷的主要內(nèi)容是其是否支持觸屏操作。

步驟3b，生成鼠標(biāo)鍵盤事件機(jī)制：步驟3a中，當(dāng)終端支持的交互能力判斷為不支持觸屏的終端時(shí)，則生成鼠標(biāo)鍵盤事件機(jī)制。

步驟3c，生成觸屏事件機(jī)制：步驟3a中，當(dāng)終端支持的交互能力判斷為支持觸屏的終端時(shí)，則生成觸屏事件機(jī)制。

所述步驟3b中，鼠標(biāo)鍵盤事件機(jī)制的生產(chǎn)方法，包括如下步驟：

1)生成界面控件事件機(jī)制，與鼠標(biāo)左鍵單擊事件綁定。

2)生成三維漫游事件，三維漫游事件包括拖動(dòng)事件、俯仰事件和縮放事件。

其中：拖動(dòng)事件機(jī)制與鼠標(biāo)左鍵拖拽事件綁定；俯仰事件機(jī)制與鼠標(biāo)右鍵拖拽事件綁定；縮放事件機(jī)制與滾軸事件綁定。

所述步驟3c中，觸屏事件機(jī)制的生成方法包括如下步驟：

1)生成界面控件事件機(jī)制，與單點(diǎn)單擊事件綁定。

2)生成三維漫游事件，三維漫游事件包括拖動(dòng)事件、俯仰事件和縮放事件。

其中：拖動(dòng)事件機(jī)制與單點(diǎn)移動(dòng)事件綁定；俯仰事件機(jī)制與雙點(diǎn)同時(shí)上下滑動(dòng)事件綁定；縮放事件機(jī)制與雙點(diǎn)同時(shí)反向滑動(dòng)事件綁定。

所述步驟1a中，UA標(biāo)識(shí)指的是一個(gè)特殊字符串頭，能使得服務(wù)器能夠識(shí)別客戶使用的操作系統(tǒng)及版本、CPU類型、瀏覽器及版本、瀏覽器渲染引擎、瀏覽器語言和瀏覽器插件信息。

所述步驟1b中，終端型號(hào)包括桌面端/移動(dòng)端類型、移動(dòng)端的CPU、移動(dòng)端的操作系統(tǒng)類型以及移動(dòng)端的操作系統(tǒng)版本。

所述步驟1c中，瀏覽器版本包括瀏覽器類型、版本、渲染引擎、語言和插件信息。

所述步驟2e中，圖片/視頻優(yōu)化包括將圖片/視頻分為大、中、小三種尺寸情況進(jìn)行處理，處理方法包括對圖片/視頻尺寸進(jìn)行縮放和對分辨率進(jìn)行壓縮。

本發(fā)明采用上述方法后，具有如下有益效果：

1.通過本發(fā)明提出的瀏覽器版本驗(yàn)證操作，能夠自動(dòng)檢測終端形態(tài)和瀏覽器版本，從而根據(jù)其對WebGL的兼容程度進(jìn)行選擇性加載和友好用戶提示。

2.通過本發(fā)明中提出的響應(yīng)式布局和自適應(yīng)界面控件生成操作，能夠根據(jù)屏幕分別率自動(dòng)選擇合適的布局位置、控件大小、字體大小、圖片和視頻資源大小等，實(shí)現(xiàn)不同屏幕分辨率下都能正常顯示。

3.通過本發(fā)明中提出的自適應(yīng)交互操作，能夠根據(jù)終端支持的交互方式對界面控件操作和三維數(shù)字地球漫游操作自動(dòng)綁定合適的交互事件，實(shí)現(xiàn)桌面端和移動(dòng)端均能便捷交互。

4.通過本發(fā)明提出的一種基于B/S架構(gòu)的跨終端三維數(shù)字地球交互方法，能夠?qū)崿F(xiàn)一套系統(tǒng)在桌面端和移動(dòng)端瀏覽器均能正常顯示，無縫交互，從而實(shí)現(xiàn)跨終端平臺(tái)訪問，減少系統(tǒng)開發(fā)成本，提高用戶體驗(yàn)。

附圖說明

圖1顯示了本發(fā)明一種基于BS架構(gòu)的跨終端三維數(shù)字地球交互方法的結(jié)構(gòu)示意圖。

圖2顯示了本發(fā)明步驟1瀏覽器版本驗(yàn)證操作流程圖。

圖3顯示了本發(fā)明步驟2響應(yīng)式布局操作流程圖。

圖4顯示了本發(fā)明步驟3自適應(yīng)交互操作圖。

具體實(shí)施方式

下面結(jié)合附圖和具體較佳實(shí)施方式對本發(fā)明作進(jìn)一步詳細(xì)的說明。

如圖1所示，一種基于BS架構(gòu)的跨終端三維數(shù)字地球交互方法，包括如下步驟。

步驟1，瀏覽器版本驗(yàn)證：在系統(tǒng)構(gòu)建時(shí)，需先進(jìn)行瀏覽器版本驗(yàn)證。

如圖2所示，瀏覽器版本驗(yàn)證包括如下步驟。

步驟1a，獲得瀏覽器的UA標(biāo)識(shí)：通過瀏覽器接口獲得UA標(biāo)識(shí)，UA標(biāo)識(shí)是指User Agent，也即用戶代理。UA標(biāo)識(shí)指的是一個(gè)特殊字符串頭，能使得服務(wù)器能夠識(shí)別客戶使用的操作系統(tǒng)及版本、CPU類型、瀏覽器及版本、瀏覽器渲染引擎、瀏覽器語言和瀏覽器插件等信息。

步驟1b，終端型號(hào)判斷：根據(jù)步驟1a獲得的UA標(biāo)識(shí)，判斷并獲得終端型號(hào)。

上述終端型號(hào)主要包括桌面端/移動(dòng)端類型、移動(dòng)端的CPU、移動(dòng)端的操作系統(tǒng)類型以及移動(dòng)端的操作系統(tǒng)版本等。

步驟1c，瀏覽器版本判斷：根據(jù)步驟1a獲得的UA標(biāo)識(shí)，判斷并獲得瀏覽器版本。

上述瀏覽器版本主要包括瀏覽器類型、版本、渲染引擎、語言和插件信息等。

步驟1d，WebGL兼容程度判斷：將步驟1b獲得的終端型號(hào)和步驟1c獲得的瀏覽器版本，與WebGL中內(nèi)置的終端型號(hào)及瀏覽器版本對照表，進(jìn)行比對與判斷其與WebGL的兼容程度。其中，終端型號(hào)及瀏覽器版本對照表需定期更新，但舊版本的終端型號(hào)及瀏覽器版本對照表依然適用。

1)當(dāng)判定結(jié)果為完全兼容時(shí)，對三維數(shù)字地球平臺(tái)進(jìn)行完全加載；完全加載的內(nèi)容主要包括當(dāng)前顯示配置下三維數(shù)字地球中全部圖層、特效，界面框架中全部界面控件元素。

2)當(dāng)判定結(jié)果為部分兼容時(shí)，則加載三維數(shù)字地球平臺(tái)中能夠被支持的顯示要素，并彈出可能不兼容方面的提示。

3)當(dāng)判定結(jié)果為完全不兼容時(shí)，彈出瀏覽器版本不兼容提示，禁止三維數(shù)字地球平臺(tái)的創(chuàng)建，并給出推薦瀏覽器版本下載地址。

不同終端類型和瀏覽器版本對WebGL的兼容度情況如下表所示：

步驟2，響應(yīng)式布局：根據(jù)屏幕分別率進(jìn)行響應(yīng)式布局，自適應(yīng)生成各類界面控件。

如圖3所示，響應(yīng)式布局方法，具體包括如下步驟。

步驟2a，獲取終端屏幕分辨率，終端屏幕分辨率包括屏幕寬度信息，當(dāng)屏幕寬高比大于等于3/4時(shí)，視為橫屏模式，否則視為豎屏模式。

步驟2b，計(jì)算布局位置：根據(jù)步驟2a獲取的終端屏幕分辨率，計(jì)算三維數(shù)字地球平臺(tái)的視圖和操作界面控件的布局位置。

上述布局位置主要由各控件相對于屏幕邊界的絕對位置、彼此之間的相對位置等因素決定，通常，橫屏模式下，采用側(cè)邊欄導(dǎo)航布局，豎屏模式下，采用底部導(dǎo)航布局。

步驟2c，計(jì)算控件尺寸：根據(jù)步驟2a獲取的屏幕分辨率，計(jì)算三維數(shù)字地球憑條的視圖和操作界面控件的尺寸大小。

上述視圖和操作界面控件大小主要由屏幕尺寸和各控件相對比例等因素決定。橫屏模式下，導(dǎo)航條高度為100％，導(dǎo)航條寬度范圍為60-160px，導(dǎo)航條最優(yōu)寬度為120px；豎屏模式下，導(dǎo)航條寬度為100％，導(dǎo)航條高度不超過100px；導(dǎo)航條最優(yōu)高度為60px。

步驟2d，計(jì)算字體大?。焊鶕?jù)步驟2a獲取的屏幕分辨率，計(jì)算視圖內(nèi)和操作界面控件內(nèi)的字體大小。

字體大小主要由控件大小和屏幕分辨率本身決定，字體大小范圍在10-24px，最優(yōu)字體大小為16px。

步驟2e，圖片/視頻優(yōu)化：根據(jù)步驟2a獲取的屏幕分辨率，對要顯示的圖片資源或視頻資源進(jìn)行尺寸和分辨率優(yōu)化。

圖片及視頻均采用自適應(yīng)模式，優(yōu)化包括將圖片/視頻分為大、中、小三種尺寸情況進(jìn)行處理，處理方法主要包括對圖片/視頻尺寸進(jìn)行縮放和對分辨率進(jìn)行壓縮等。在保留原始寬高比的同時(shí)，最大寬度及高度均不超過80％，寬度及高度均優(yōu)選為原始寬度及高度的60％。

步驟2f，自適應(yīng)界面控件生成：根據(jù)步驟2b至步驟2e得到的布局位置、控件尺寸、字體大小和優(yōu)化后的圖片/視頻等，自適應(yīng)生成各類界面控件。

步驟3，自適應(yīng)交互。

如圖4所示，自適應(yīng)交互的方法，具體包括如下步驟。

步驟3a，終端交互能力判斷：根據(jù)步驟1b獲取的終端型號(hào)，對終端支持的交互能力進(jìn)行判斷。

步驟3b，生成鼠標(biāo)鍵盤事件機(jī)制：步驟3a中，當(dāng)終端支持的交互能力判斷為不支持觸屏的終端時(shí)，則生成鼠標(biāo)鍵盤事件機(jī)制。

上述鼠標(biāo)鍵盤事件機(jī)制的生產(chǎn)方法，包括如下步驟：

1)生成界面控件事件機(jī)制，與鼠標(biāo)左鍵單擊事件綁定。

2)生成三維漫游事件，三維漫游事件包括拖動(dòng)事件、俯仰事件和縮放事件。

其中：拖動(dòng)事件機(jī)制與鼠標(biāo)左鍵拖拽事件綁定；俯仰事件機(jī)制與鼠標(biāo)右鍵拖拽事件綁定；縮放事件機(jī)制與滾軸事件綁定。

對不支持觸屏的終端，生成鼠標(biāo)鍵盤事件機(jī)制，并實(shí)現(xiàn)平臺(tái)操作與交互事件的綁定，具體如下表所示：

步驟3c，生成觸屏事件機(jī)制：步驟3a中，當(dāng)終端支持的交互能力判斷為支持觸屏的終端時(shí)，則生成觸屏事件機(jī)制。

上述觸屏事件機(jī)制的生成方法包括如下步驟：

1)生成界面控件事件機(jī)制，與單點(diǎn)單擊事件綁定。

2)生成三維漫游事件，三維漫游事件包括拖動(dòng)事件、俯仰事件和縮放事件。

其中：拖動(dòng)事件機(jī)制與單點(diǎn)移動(dòng)事件綁定；俯仰事件機(jī)制與雙點(diǎn)同時(shí)上下滑動(dòng)事件綁定；縮放事件機(jī)制與雙點(diǎn)同時(shí)反向滑動(dòng)事件綁定。

對支持觸屏的終端，生成觸屏事件機(jī)制，并實(shí)現(xiàn)平臺(tái)操作與交互事件的綁定，具體如下表所示：

以上詳細(xì)描述了本發(fā)明的優(yōu)選實(shí)施方式，但是，本發(fā)明并不限于上述實(shí)施方式中的具體細(xì)節(jié)，在本發(fā)明的技術(shù)構(gòu)思范圍內(nèi)，可以對本發(fā)明的技術(shù)方案進(jìn)行多種等同變換，這些等同變換均屬于本發(fā)明的保護(hù)范圍。