基于HTML5/JavaScript的WebGIS功能界面設計與開發

圖1 WebGIS功能界面設計圖

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

2 界面開發

2.1 多級菜單

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

2.2 統計信息顯示界面

圖2 WebGIS多級菜單與統計信息顯示界面的實現

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

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

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

2.3 查詢結果顯示界面

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

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

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

2.4 多媒體顯示界面

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

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

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

圖3 WebGIS查詢結果與多媒體顯示界面的實現

3 結束語

本文基于HTML5和JavaScript設計開發WebGIS系統界面，使用HTML5中的

、

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

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

  [2] 李正學,許捍衛.基于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基礎教程(第8版)[M].陳劍歐，柳濤，譯.北京:人民郵電出版社,2012.

  [5] SuperMap圖書編委會.SuperMap iServer Java 從入門到精通[M].北京：清華大學出版社，2012.

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

  [7] 谷偉.基于HTML5 Canvas的客戶端圖表技術研究[J].信息技術,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的視頻傳輸技術研究[J].廣東技術師范學院學報,2014(11):20-25.

  [10] 雷忠誠,胡文山,鄔靜陽，等.基于Web的3D智能家居系統設計與實現[J].電子技術應用,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功能界面設計與開發[J].微型機與應用，2016,35(7)：19-21.

    2015-12-26)

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

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

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

    猜你喜歡

    定義界面效果

    按摩效果確有理論依據

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

    國企黨委前置研究的“四個界面”

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

    迅速制造慢門虛化效果

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

    抓住“瞬間性”效果

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

    基于FANUC PICTURE的虛擬軸坐標顯示界面開發方法研究

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

    人機交互界面發展趨勢研究

    濰坊學院學報(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

    手機界面中圖形符號的發展趨向

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

    修辭學的重大定義

    當代修辭學(2014年3期)2014-01-21 02:30:44

    網絡安全與數據管理2016年7期

    網絡安全與數據管理的其它文章

    PWM轉I/O信號的電路設計、仿真與實驗

    并網模式微電網雙層分布式優化調度算法

    基于聲卡和LabVIEW的聲音信號EMD時頻分析系統

    基于變量分組貝葉斯網絡的安全態勢評估方法

    一種基于YUV顏色空間自適應陰影消除算法

    基于MSP430的溫室環境數據采集和控制系統設計