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

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

2 界面開發(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類中的getCenterLonLat()方法，返回當(dāng)前地理范圍的中心點(diǎn)，將氣泡的顯示位置固定在點(diǎn)上。定義contentHTML變量，其值為HTML5所定義的popup界面框架及查詢結(jié)果數(shù)據(jù)，因查詢結(jié)果為動(dòng)態(tài)變化的屬性值，需從數(shù)據(jù)庫(kù)中動(dòng)態(tài)獲取。利用SuperMap feature類中的attributes屬性，可描述要素的任意可序列化屬性，由此查詢到用戶自定義的屬性表，獲取表中相應(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類下的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 查詢結(jié)果顯示界面

查詢結(jié)果顯示界面中的信息分頁(yè)顯示，利用SuperMap feature類中的attributes屬性，查詢到用戶自定義的屬性表，獲取表中相應(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集合，將查詢結(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語句判斷排序是否在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)致安全性問題。HTML5新增了Audio、Video兩個(gè)元素，通過這兩個(gè)元素播放視頻或音頻無需在瀏覽器上安裝任何插件，大大簡(jiǎn)化了開發(fā)工作。以此為基礎(chǔ)，獲取網(wǎng)站上或本地所要播放的視頻數(shù)據(jù)或音頻數(shù)據(jù)，將其地址或路徑加入到或標(biāo)簽中，即可在網(wǎng)頁(yè)中播放該視頻或音頻[8-10]。

在JavaScript腳本中使用HTMLVideoElement對(duì)象支持的play(),pause()等方法，可控制視頻的播放、暫停等。使用preload屬性的metadata值，設(shè)置用戶開始播放之前只能載入視頻的元數(shù)據(jù)(寬度、高度、長(zhǎng)度、第一幀、長(zhǎng)度和其他此類信息)，即提供了預(yù)覽畫面，效果如圖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查詢結(jié)果與多媒體顯示界面的實(shí)現(xiàn)

3 結(jié)束語

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

、

、
• 等元素構(gòu)成多級(jí)功能菜單及查詢結(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儀表盤研究[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圖書編委會(huì).SuperMap iServer Java 從入門到精通[M].北京：清華大學(xué)出版社，2012.

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

  [7] 谷偉.基于HTML5 Canvas的客戶端圖表技術(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),胡文山,鄔靜陽，等.基于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ì)與開發(fā)[J].微型機(jī)與應(yīng)用，2016,35(7)：19-21.

    2015-12-26)

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

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

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

    猜你喜歡

    彈窗界面設(shè)計(jì)統(tǒng)計(jì)圖

    中醫(yī)養(yǎng)生APP界面設(shè)計(jì)

    大眾文藝(2022年19期)2022-10-19

    “共享員工”平臺(tái)界面設(shè)計(jì)

    包裝工程(2022年14期)2022-07-28

    五類情況解法答疑了

    工會(huì)博覽(2022年11期)2022-06-30

    中國(guó)傳統(tǒng)元素在界面設(shè)計(jì)中的應(yīng)用

    安徽商貿(mào)職業(yè)技術(shù)學(xué)院學(xué)報(bào)·社會(huì)科學(xué)版(2022年1期)2022-04-25

    “彈不走”的彈窗廣告背后有利可圖？

    在線學(xué)習(xí)(2021年4期)2021-09-10

    各式各樣的復(fù)式條形統(tǒng)計(jì)圖

    小學(xué)生學(xué)習(xí)指導(dǎo)(中年級(jí))(2021年5期)2021-05-18

    想彈就彈的彈窗廣告

    風(fēng)流一代·TOP青商(2020年12期)2020-12-23

    我本無心看黃網(wǎng)，奈何彈窗先動(dòng)手

    新傳奇(2020年29期)2020-08-19

    面向智能手機(jī)的UI界面設(shè)計(jì)

    湖北農(nóng)機(jī)化(2020年4期)2020-07-24

    如何選擇統(tǒng)計(jì)圖

    中學(xué)生數(shù)理化·七年級(jí)數(shù)學(xué)人教版(2014年6期)2014-09-18

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

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

    移動(dòng)目標(biāo)防御(MTD)關(guān)鍵技術(shù)研究

    新的同態(tài)加密方法
    ——基于Paillier和RSA密碼體制的代理重加密

    基于FNN的多Agent SCADA安全防御模型*

    基于層次分析法與差分進(jìn)化算法極限學(xué)習(xí)機(jī)的自動(dòng)扶梯故障檢測(cè)*

    六自由度機(jī)器人焊接軌跡研究

    基于FPGA的ITU-656標(biāo)準(zhǔn)視頻解碼及存儲(chǔ)系統(tǒng)設(shè)計(jì)