圖1 WebGIS功能界面設(shè)計(jì)圖

多媒體界面可由彈窗或氣泡做為容器彈出，由HTML5新增的Audio、Video兩個(gè)元素設(shè)計(jì)并實(shí)現(xiàn)。為保證界面美觀，為視頻設(shè)計(jì)播放器窗口，在窗口中使用元素定義播放、暫停、重新加載等按鈕，并為其設(shè)置預(yù)覽界面。

2 界面開(kāi)發(fā)

2.1 多級(jí)菜單

一級(jí)菜單即菜單項(xiàng)標(biāo)題，為了突出表示，將其backgroundcolor屬性定義為深色，color屬性設(shè)置為#FFF，以便區(qū)分。本文根據(jù)需要只實(shí)現(xiàn)到三級(jí)菜單項(xiàng)。運(yùn)用jQuery中的slideToggle()方法，可實(shí)現(xiàn)二級(jí)菜單的滑動(dòng)顯示、隱藏效果。三級(jí)菜單默認(rèn)為隱藏狀態(tài)，應(yīng)用CSS的hover選擇器，設(shè)置三級(jí)菜單的visibility屬性為visible，即可實(shí)現(xiàn)鼠標(biāo)懸停顯示三級(jí)菜單的效果，如圖2所示。

2.2 統(tǒng)計(jì)信息顯示界面

圖2 WebGIS多級(jí)菜單與統(tǒng)計(jì)信息顯示界面的實(shí)現(xiàn)

本文的統(tǒng)計(jì)信息顯示界面以氣泡的形式彈出，界面效果如圖2所示。首先利用SuperMap.Popup.FramedCloud()構(gòu)造函數(shù)，初始化一個(gè)帶箭頭指向和邊框的浮動(dòng)彈窗。使用getBounds類(lèi)中的getCenterLonLat()方法，返回當(dāng)前地理范圍的中心點(diǎn)，將氣泡的顯示位置固定在點(diǎn)上。定義contentHTML變量，其值為HTML5所定義的popup界面框架及查詢(xún)結(jié)果數(shù)據(jù)，因查詢(xún)結(jié)果為動(dòng)態(tài)變化的屬性值，需從數(shù)據(jù)庫(kù)中動(dòng)態(tài)獲取。利用SuperMap feature類(lèi)中的attributes屬性，可描述要素的任意可序列化屬性，由此查詢(xún)到用戶(hù)自定義的屬性表，獲取表中相應(yīng)數(shù)據(jù)顯示在popup中。之后將此變量作為參數(shù)傳入SuperMap.Popup.FramedCloud構(gòu)造函數(shù)中，即可定義popup樣式并在主界面中生成popup。若要關(guān)閉popup窗口，則調(diào)用map.removePopup()函數(shù)，將想要移除的popup對(duì)象作為參數(shù)傳入函數(shù)，即可移除指定的popup對(duì)象。

在氣泡下方添加標(biāo)簽頁(yè)，使用CSS的hover選擇器將處于選中狀態(tài)的標(biāo)簽的background屬性設(shè)為深色以突出表現(xiàn)。定義slide()函數(shù)，結(jié)合JavaScript中的hide()、append()、animate()等方法實(shí)現(xiàn)鼠標(biāo)懸停即可實(shí)現(xiàn)切換標(biāo)簽頁(yè)的效果，并將標(biāo)簽頁(yè)的切換效果設(shè)計(jì)為向左滑入滑出的效果，使用delayTime()與interTime()方法設(shè)置切換效果持續(xù)時(shí)間和切換速度，使標(biāo)簽頁(yè)的切換效果更加自然。

最后將統(tǒng)計(jì)圖添加到標(biāo)簽頁(yè)中，繪制圖形時(shí)引用基于Canvas的chart.js JavaScript圖表庫(kù)，本文以折線圖為例，使用chart類(lèi)下的line()方法，并使用getAccessDatas()方法從數(shù)據(jù)庫(kù)中獲取相關(guān)統(tǒng)計(jì)數(shù)據(jù)，設(shè)置橫縱坐標(biāo)、字體顏色、填充顏色、線條顏色等樣式參數(shù)，將以上各項(xiàng)作為參數(shù)傳入line()方法中，即可繪制出相應(yīng)的折線圖，繪制的統(tǒng)計(jì)圖界面效果如圖2所示。

2.3 查詢(xún)結(jié)果顯示界面

查詢(xún)結(jié)果顯示界面中的信息分頁(yè)顯示，利用SuperMap feature類(lèi)中的attributes屬性，查詢(xún)到用戶(hù)自定義的屬性表，獲取表中相應(yīng)數(shù)據(jù)顯示在界面中。每條信息左側(cè)的編號(hào)圖標(biāo)由CSS3中的border-radius屬性實(shí)現(xiàn)。下方的翻頁(yè)功能由基于jquery的pagination插件實(shí)現(xiàn)，將分頁(yè)符的樣式、每頁(yè)顯示的信息條數(shù)等相關(guān)信息作為參數(shù)傳到pagination()方法中，然后使用PageCallback()函數(shù)調(diào)用翻頁(yè)。

使用get()方法獲取列表中每次添加進(jìn)去的最后一個(gè)

元素，為其增加click事件，觸發(fā)bin()方法，可定位到地圖元素并彈出相關(guān)信息彈窗，實(shí)現(xiàn)列表中的信息與地圖中相應(yīng)地物關(guān)聯(lián)的功能。定義全局變量g_featuresOnlyMk，即僅供標(biāo)注使用的features集合，將查詢(xún)結(jié)果g_featuresHavAtt轉(zhuǎn)換為點(diǎn)要素，保持g_featuresHavAtt和g_featuresOnlyMk標(biāo)號(hào)一致。遍歷所有元素，以結(jié)果要素中心點(diǎn)為坐標(biāo)，創(chuàng)建標(biāo)注要素。使用SuperMap.Size、SuperMap.Pixel等創(chuàng)建size、pixel等實(shí)例，用于設(shè)置標(biāo)注圖標(biāo)樣式，并用if語(yǔ)句判斷排序是否在7以前(假設(shè)每頁(yè)設(shè)置顯示7條信息)，使用g_featuresOnlyMk[i].data.icon方法分別設(shè)置排序7以前和排序7以后的標(biāo)注圖標(biāo)樣式和圖標(biāo)大小，單獨(dú)設(shè)置鼠標(biāo)移入時(shí)的標(biāo)注樣式圖標(biāo)。構(gòu)造registMarker()函數(shù)，為每個(gè)標(biāo)注都添加mouseover事件和mouseout事件，并分別設(shè)置新的樣式，實(shí)現(xiàn)鼠標(biāo)移入即改變圖標(biāo)樣式，移出后恢復(fù)原標(biāo)注樣式的效果，界面效果如圖3所示。

2.4 多媒體顯示界面

在HTML5之前，在網(wǎng)頁(yè)中播放視頻、音頻等通常都需要借助第三方插件，比如Flash，不僅繁瑣，而且容易導(dǎo)致安全性問(wèn)題。HTML5新增了Audio、Video兩個(gè)元素，通過(guò)這兩個(gè)元素播放視頻或音頻無(wú)需在瀏覽器上安裝任何插件，大大簡(jiǎn)化了開(kāi)發(fā)工作。以此為基礎(chǔ)，獲取網(wǎng)站上或本地所要播放的視頻數(shù)據(jù)或音頻數(shù)據(jù)，將其地址或路徑加入到或標(biāo)簽中，即可在網(wǎng)頁(yè)中播放該視頻或音頻[8-10]。

在JavaScript腳本中使用HTMLVideoElement對(duì)象支持的play(),pause()等方法，可控制視頻的播放、暫停等。使用preload屬性的metadata值，設(shè)置用戶(hù)開(kāi)始播放之前只能載入視頻的元數(shù)據(jù)(寬度、高度、長(zhǎng)度、第一幀、長(zhǎng)度和其他此類(lèi)信息)，即提供了預(yù)覽畫(huà)面，效果如圖3所示。

本文中的多媒體窗口以彈窗的形式彈出，實(shí)現(xiàn)方法即在頁(yè)面中添加一個(gè)新的HTML窗口，將其display屬性設(shè)置為none，為實(shí)景視頻按鈕添加click事件，使用JavaScript的getElementById().style.display方法動(dòng)態(tài)更改其display屬性，即可控制彈窗的顯示與關(guān)閉。

圖3 WebGIS查詢(xún)結(jié)果與多媒體顯示界面的實(shí)現(xiàn)

3 結(jié)束語(yǔ)

本文基于HTML5和JavaScript設(shè)計(jì)開(kāi)發(fā)WebGIS系統(tǒng)界面，使用HTML5中的

、

、
• 等元素構(gòu)成多級(jí)功能菜單及查詢(xún)結(jié)果顯示界面，利用HTML5新增的Canvas元素及Audio與Video元素優(yōu)化了在Web瀏覽器中進(jìn)行矢量統(tǒng)計(jì)圖繪制及多媒體播放的一般方法，結(jié)合JavaScript及SuperMap iClient for JavaScript API對(duì)頁(yè)面元素進(jìn)行控制，生成彈窗及氣泡等動(dòng)態(tài)界面效果，使得WebGIS界面更加美觀生動(dòng)、使用流暢，可跨平臺(tái)并易于維護(hù)。

  [1] 徐卓揆．基于HTML5、Ajax和WebService的WebGIS研究[J].測(cè)繪科學(xué)，2012(1):42-47.

  [2] 李正學(xué),許捍衛(wèi).基于HTML5的WebGIS儀表盤(pán)研究[J].地理空間信息,2015(2):123-125.

  [3] CROWTHER R, LENNON J, BLUE A, et al. HTML5 inAction[M]. Manning, 2014.

  [4] SMITH D， NEGRINO T. JavaScript基礎(chǔ)教程(第8版)[M].陳劍歐，柳濤，譯.北京:人民郵電出版社,2012.

  [5] SuperMap圖書(shū)編委會(huì).SuperMap iServer Java 從入門(mén)到精通[M].北京：清華大學(xué)出版社，2012.

  [6] 周玲芳,李長(zhǎng)云,胡淑新,等.基于HTML5的WebGIS實(shí)時(shí)客戶(hù)端設(shè)計(jì)[J].微型機(jī)與應(yīng)用,2015,34(16):66-69.

  [7] 谷偉.基于HTML5 Canvas的客戶(hù)端圖表技術(shù)研究[J].信息技術(shù),2013(9):107-110.

  [8] ZHU G, ZHANG F, ZHU W, et al. HTML5 based media player for real-time video surveillance[C].Image and Signal Processing (CISP), 2012 5th International Congress on. IEEE, 2012: 245-248.

  [9] 黃雄.基于HTML5的視頻傳輸技術(shù)研究[J].廣東技術(shù)師范學(xué)院學(xué)報(bào),2014(11):20-25.

  [10] 雷忠誠(chéng),胡文山,鄔靜陽(yáng)，等.基于Web的3D智能家居系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].電子技術(shù)應(yīng)用,2014,40(9):114-117.

  Interface design and development of WebGIS based on HTML5/JavaScript

  Li Jingying1,2,Wang Fangxiong1,2,Hou Yingzi1,2,Zhang Chuang3

  (1. Liaoning Key Laboratory of Physical Geography and Geomatics, Liaoning Normal University, Dalian 116029, China；2. School of Urban and Environmental Sciences, Liaoning Normal University, Dalian 116029, China;3. Hangzhou JiAo Geographical Information Technology Co. Ltd., Hangzhou 310012, China)

  We designed and developed a function interface of WebGIS based on HTML5 and JavaScript. Using the elements of HTML5 such as

  ,

  and
  • , we designed and implemented the multi-level function menu and the query result display window, and optimized the method of vector plotting and video playing in the Web browser by the elements like Canvas, Audio and Video. Combined with JavaScript and JavaScript API of SuperMap iClient, a rich dynamic interface, like the popup window, popping bubble, and so on were implemented. The interface is natural and beautiful ,shorten response time, smooth operation, and it can improve user experience.

    HTML5; JavaScript; WebGIS; interface design

    TP23

    A

    1674-7720(2016)07- 0019- 03

    李晶瑩，王方雄，侯英姿，等. 基于HTML5/JavaScript的WebGIS功能界面設(shè)計(jì)與開(kāi)發(fā)[J].微型機(jī)與應(yīng)用，2016,35(7)：19-21.

    2015-12-26)

    李晶瑩(1992-)，女，碩士研究生，主要研究方向：WebGIS研究與開(kāi)發(fā)。

    王方雄(1973-)，通訊作者，男，博士，副教授，主要研究方向：WebGIS、GIS建模與集成研究。E-mail:wfxwhu@163.com。

    侯英姿(1974-)，女，博士，講師，主要研究方向：GIS建模與技術(shù)應(yīng)用研究。

    猜你喜歡

    定義界面效果

    按摩效果確有理論依據(jù)

    中老年保健(2021年12期)2021-11-30 02:58:01

    國(guó)企黨委前置研究的“四個(gè)界面”

    當(dāng)代陜西(2020年13期)2020-08-24 08:22:02

    迅速制造慢門(mén)虛化效果

    攝影之友(影像視覺(jué))(2019年2期)2019-03-05 08:27:14

    抓住“瞬間性”效果

    中華詩(shī)詞(2018年11期)2018-03-26 06:41:34

    基于FANUC PICTURE的虛擬軸坐標(biāo)顯示界面開(kāi)發(fā)方法研究

    制造技術(shù)與機(jī)床(2017年5期)2018-01-19 02:49:17

    人機(jī)交互界面發(fā)展趨勢(shì)研究

    濰坊學(xué)院學(xué)報(bào)(2016年2期)2016-12-01 13:00:11

    模擬百種唇妝效果

    Coco薇(2016年8期)2016-10-09 02:11:50

    成功的定義

    山東青年(2016年1期)2016-02-28 14:25:25

    手機(jī)界面中圖形符號(hào)的發(fā)展趨向

    新聞傳播(2015年11期)2015-07-18 11:15:04

    修辭學(xué)的重大定義

    當(dāng)代修辭學(xué)(2014年3期)2014-01-21 02:30:44

    網(wǎng)絡(luò)安全與數(shù)據(jù)管理2016年7期

    網(wǎng)絡(luò)安全與數(shù)據(jù)管理的其它文章

    PWM轉(zhuǎn)I/O信號(hào)的電路設(shè)計(jì)、仿真與實(shí)驗(yàn)

    并網(wǎng)模式微電網(wǎng)雙層分布式優(yōu)化調(diào)度算法

    基于聲卡和LabVIEW的聲音信號(hào)EMD時(shí)頻分析系統(tǒng)

    基于變量分組貝葉斯網(wǎng)絡(luò)的安全態(tài)勢(shì)評(píng)估方法

    一種基于YUV顏色空間自適應(yīng)陰影消除算法

    基于MSP430的溫室環(huán)境數(shù)據(jù)采集和控制系統(tǒng)設(shè)計(jì)