基于HTML5/JavaScript的WebGIS功能界面設(shè)計與開發(fā)

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

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

2 界面開發(fā)

2.1 多級菜單

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

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

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

本文的統(tǒng)計信息顯示界面以氣泡的形式彈出，界面效果如圖2所示。首先利用SuperMap.Popup.FramedCloud()構(gòu)造函數(shù)，初始化一個帶箭頭指向和邊框的浮動彈窗。使用getBounds類中的getCenterLonLat()方法，返回當前地理范圍的中心點，將氣泡的顯示位置固定在點上。定義contentHTML變量，其值為HTML5所定義的popup界面框架及查詢結(jié)果數(shù)據(jù)，因查詢結(jié)果為動態(tài)變化的屬性值，需從數(shù)據(jù)庫中動態(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對象作為參數(shù)傳入函數(shù)，即可移除指定的popup對象。

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

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

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

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

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

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

2.4 多媒體顯示界面

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

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

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

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

3 結(jié)束語

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

、

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

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

  [2] 李正學,許捍衛(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圖書編委會.SuperMap iServer Java 從入門到精通[M].北京：清華大學出版社，2012.

  [6] 周玲芳,李長云,胡淑新,等.基于HTML5的WebGIS實時客戶端設(shè)計[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ù)師范學院學報,2014(11):20-25.

  [10] 雷忠誠,胡文山,鄔靜陽，等.基于Web的3D智能家居系統(tǒng)設(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è)計與開發(fā)[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è)計統(tǒng)計圖

    折線統(tǒng)計圖

    小讀者·閱世界(2025年1期)2025-01-27 00:00:00

    《京燕兒》APP界面設(shè)計

    大眾文藝(2023年22期)2023-12-10 04:27:18

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

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

    “共享員工”平臺界面設(shè)計

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

    五類情況解法答疑了

    工會博覽(2022年11期)2022-06-30 10:54:32

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

    在線學習(2021年4期)2021-09-10 07:22:44

    各式各樣的復式條形統(tǒng)計圖

    小學生學習指導(中年級)(2021年5期)2021-05-18 08:07:56

    想彈就彈的彈窗廣告

    風流一代·TOP青商(2020年12期)2020-12-23 17:17:29

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

    湖北農(nóng)機化(2020年4期)2020-07-24 09:07:46

    如何禁止電腦軟件彈窗廣告

    計算機與網(wǎng)絡(luò)(2015年13期)2015-04-16 15:33:29

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

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

    PWM轉(zhuǎn)I/O信號的電路設(shè)計、仿真與實驗

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

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

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

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

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