基于JavaScript的地理事件可視分析框架設計

張　偉，邊長春，李海崗，李　峰

(1.信息工程大學，河南 鄭州 450000；2．61175部隊，山東 淄博 255000)

?

基于JavaScript的地理事件可視分析框架設計

張偉1，2，邊長春2，李海崗2，李峰1

(1.信息工程大學，河南 鄭州 450000；2．61175部隊，山東 淄博 255000)

摘要：隨著互聯(lián)網的飛速發(fā)展，網絡環(huán)境下地理信息的可視化表達成為研究的熱點。在JavaScript技術和可視分析技術研究基礎上，對互聯(lián)網中地理事件可視分析框架進行設計，目的是探索網絡環(huán)境下，地理事件可視化的表達方式和可行性分析，搭建適合互聯(lián)網的地理事件可視分析框架，為基于Web的地理信息可視分析系統(tǒng)的實現(xiàn)打下基礎。

關鍵詞：JavaScript；地理事件；可視分析；D3；框架設計

隨著科學技術的不斷進步，尤其是互聯(lián)網的飛速發(fā)展，人們越來越多的依靠網絡來獲取各類信息。如何將互聯(lián)網中各類地理事件快速、直觀的展現(xiàn)給用戶，讓用戶獲得更多的交互體驗，從而分析事件的多維屬性，發(fā)現(xiàn)事件之間的各種關聯(lián)，挖掘事件的熱點趨勢，尋找事件的發(fā)展規(guī)律等，已成為目前地理事件可視分析研究的重要內容。

可視分析最早在2004年由國家可視化和分析中心(National Visualization and Analytics Center, NVAC)組織的工作小組提出，是交互式可視化界面支持的分析推理學科[1]，其主要內容有認知科學、數(shù)據(jù)表示與轉換、可視化與交互技術、分析推理、決策支持等[2]。地理事件可視分析是在可視化的基礎上，利用可視分析技術，對地理事件進行分析。

本文利用JavaScript技術對互聯(lián)網中地理事件進行可視分析框架設計，目的是探索網絡環(huán)境下，地理事件可視化的表達方式和可行性分析，搭建適合互聯(lián)網的地理事件可視分析框架，為基于Web的地理信息可視分析系統(tǒng)提供支撐。

1概念解析

1.1JavaScript技術

JavaScript是一種基于對象的解釋型腳本語言，廣泛應用于Web應用的開發(fā)，是對HTML頁面內容進行交互行為操作的技術[3]，具有跨平臺、可交互、動態(tài)嵌入等特點。JavaScript的核心包括ECMAScript，DOM，BOM 3部分內容[4]。

本文基于JavaScript的地理事件可視分析框架設計主要從應用界面、前端開發(fā)、網絡傳輸、后端服務等4部分實現(xiàn)其整體功能，分別應用JavaScript以下4部分內容：

1)界面UI框架。JavaScript界面框架有很多，例如JUI，JqueryUI，LigerUI，Jquery easyUI等，可以輕松實現(xiàn)系統(tǒng)框架的界面布局。

2)前端可視化框架。JavaScript可視化框架有D3，echart，Kartograph，Three.js等，考慮到對地圖的支持和交互性的要求，本文采用D3(Data Driven Document)框架。

3)Ajax網絡通訊。異步JavaScript和XML技術，通過服務器端少量的數(shù)據(jù)交換，實現(xiàn)網頁內容的快速瀏覽和異步更新，對于大數(shù)據(jù)量的地理事件網絡傳輸與更新提供保障。

4)Node.js服務器端框架。其是對Google V8引擎的封裝[5]，具有單線程、非阻塞等特點，使得Node在服務器端的功能更強大，滿足輕量級系統(tǒng)框架的搭建需求。

1.2可視分析技術

可視分析技術是從科學計算可視化[6]和信息可視化[7]發(fā)展而來的，是對大規(guī)模、動態(tài)、模糊或者不一致的數(shù)據(jù)集進行分析[8]。可視分析的核心是推理，可視化表達是基礎，交互技術為支撐，充分利用人的感知認知能力彌補計算機自動分析的不足，目的是從海量、動態(tài)、異構、多層的數(shù)據(jù)中獲取更深層次的信息。

本文利用JavaScript在交互性上有其得天獨厚的優(yōu)勢，為可視分析提供很好的技術支撐。可視分析與可視化最大的區(qū)別在于其交互分析的過程，傳統(tǒng)的可視化是被動的顯示，將結果以單一固定的形式展現(xiàn)出來，而可視分析注重用戶的交互，是對數(shù)據(jù)的多方面的動態(tài)展示，通過分析比較得到推理結果，如圖1所示。

圖1　可視分析流程[8]

1.3地理事件可視分析

地理事件的分析，概括的分為兩類方法：一種是依靠計算機或機器，以人工智能、數(shù)據(jù)挖掘、機器學習等技術為支撐，研究計算機性能、挖掘算法及智能處理等，分析客觀存在的地理事件；另一種是依靠人機交互，以人為主體，可視化、人機交互等技術為支撐，研究認知理論、協(xié)同可視化、人機交互等，分析符合人的需求和認知規(guī)律的地理事件，如圖2所示。

圖2　地理事件分析方法流程

本文地理事件可視分析以人為主體，人機交互、協(xié)同可視化等技術為支撐，充分利用人與機器的各自優(yōu)勢，對地理事件進行分析。地理事件可視分析是“分析-可視化-分析”的一個循環(huán)過程。地理事件可視分析主要研究內容包括：地理事件網絡關系可視分析、地理事件多維屬性可視分析、時空數(shù)據(jù)實時態(tài)勢可視分析、時序數(shù)據(jù)的事件過程可視分析等。

2地理事件可視分析的框架設計

地理事件可視分析框架設計的基本原則如下[9-11]：

1)以用戶為中心，提供豐富、靈活的交互體驗；

2)以事件為驅動，提供快速、準確的內容更新；

3)以技術為支撐，提供穩(wěn)定、高效的運行環(huán)境；

4)以數(shù)據(jù)為基礎，提供大規(guī)模、動態(tài)、多樣數(shù)據(jù)集。

2.1模型架構設計

基于JavaScript的地理事件可視分析框架采用B/S架構設計，客戶端采用MVC的傳統(tǒng)設計模式，可視化層負責圖形的渲染和更新，業(yè)務邏輯層負責交互事件的請求和響應，數(shù)據(jù)處理層負責數(shù)據(jù)的調度和管理，如圖3所示。

圖3　模型架構設計

本文采用傳統(tǒng)的B/S架構實現(xiàn)基于互聯(lián)網的地理事件可視分析框架設計，充分考慮到用戶的頻繁交互和實時響應的需求，通過D3.js數(shù)據(jù)驅動文檔，采用AJAX異步通信技術按需下載數(shù)據(jù)，對頁面進行局部刷新，減少服務器的負擔；客戶端通過JavaScript向服務器發(fā)出請求，用戶不必等到響應完即可進行其他操作，提高用戶體驗。

2.2邏輯流程設計

基于JavaScript的地理事件可視分析框架設計，目的是實現(xiàn)基于互聯(lián)網的地理事件的可視化及用戶交互分析，其邏輯流程可分為表現(xiàn)層、中間層、數(shù)據(jù)層3層結構，如圖4所示。

圖4　邏輯流程設計

表現(xiàn)層：包括Web瀏覽器和HTML元素插件，瀏覽器負責接收用戶的交互請求，將任務分發(fā)給中間層的數(shù)據(jù)驅動文檔模型，HTML元素插件將數(shù)據(jù)驅動文檔模型生成或者更新的元素可視化，并將結果展現(xiàn)給用戶。

中間層：主要負責數(shù)據(jù)驅動文檔，即將數(shù)據(jù)和HTML元素綁定，根據(jù)用戶任務分配向服務器端發(fā)送HTTP請求，接收到返回的數(shù)據(jù)后，在前端進行數(shù)據(jù)的繪制，驅動HTML文檔元素的可視化。

數(shù)據(jù)層：主要負責數(shù)據(jù)的管理和分發(fā)，包括數(shù)據(jù)庫管理和服務器管理。富客戶端的框架設計，減少服務器端的計算負擔，服務器端更多的任務是數(shù)據(jù)的管理，基于Ajax的數(shù)據(jù)請求可以減少服務器的頻繁訪問。

2.3功能模塊設計

地理事件可視分析的內容可分為網絡關系可視分析、多維屬性可視分析、時空數(shù)據(jù)可視分析、時序事件可視分析等4部分，其功能模塊設計也可以按照地理事件可視分析的內容劃分，如圖5所示。

圖5　功能模塊設計

關系分析圖，是指地理事件的主體之間的實體關系表達，是地理事件分析中主體分析的重要組成部分；屬性分析圖，是指地理事件的客體的多維屬性表達，是地理事件分析中客體屬性分析的重要內容；時空數(shù)據(jù)分析圖，重點分析地理事件的態(tài)勢分布和熱點分布，是地理事件依托基礎地理信息框架進行分析的重要內容；時序事件分析，是對地理事件的過程進行分析，按照時間序列回顧事件的發(fā)展過程和探索事件的發(fā)展規(guī)律。

地理事件的功能模塊的實現(xiàn)，首先，需要有基本組件的支撐，例如基礎地理信息平臺、數(shù)據(jù)查詢組件、數(shù)據(jù)分析組件、人機交互組件等。其次，也需要JavaScript技術的支持，例如Ajax異步通信技術、D3.js數(shù)據(jù)驅動文檔、Node.js的服務器端管理以及LigerUI的界面框架等。最后，是基礎數(shù)據(jù)的管理，包括矢量數(shù)據(jù)、柵格數(shù)據(jù)、屬性數(shù)據(jù)、管理數(shù)據(jù)等，為可視分析提供數(shù)據(jù)服務。

3基于JavaScript的地理事件可視分析框架搭建

3.1環(huán)境搭建

3.1.1開發(fā)環(huán)境

1)操作系統(tǒng)：Windows XP；

2)Web服務器：WAMP搭建的本地服務器；

3)開發(fā)語言：JavaScript；

4)開發(fā)工具：Sublime腳本編輯器、Chrome瀏覽器；

3.1.2運行環(huán)境

1)客戶端。基于JavaScript的地理事件可視分析是基于B/S架構設計，因此客戶端不需要安裝插件，只需要支持IE8以上的瀏覽器，例如Chrome、Firefox等。

操作系統(tǒng)：支持跨平臺運行，例如Window、Linux、OSX等操作系統(tǒng)。

2)服務器端。操作系統(tǒng)：Linux；數(shù)據(jù)庫：MongoDB；服務器管理：Express.js(基于Node.js)；數(shù)據(jù)庫管理：Mongoose.js(基于Node.js)。

3.2框架實現(xiàn)

3.2.1數(shù)據(jù)格式

JavaScript支持的數(shù)據(jù)格式很多，其中適合地理事件表達的有JSON，CSV，GeoJSON等。JSON(JavaScript Object Notation)是一種輕量級數(shù)據(jù)交換格式，具有可擴展、互操作、面向對象的特點，是JavaScript的標準格式。GeoJSON是基于JSON的一種專門為地理坐標存儲設計的數(shù)據(jù)交互格式，是Web網絡中對地理數(shù)據(jù)結構進行編碼的格式。CSV(Comma Separated Value)是以字符分隔符劃分的純文本數(shù)據(jù)格式，以行為單位，每行記錄具有相同的字段序列。本文支持以上3種數(shù)據(jù)格式，GeoJSON存儲基礎地理信息數(shù)據(jù)，CSV存儲事件的多維屬性數(shù)據(jù)，JSON存儲地理事件描述數(shù)據(jù)集。

GeoJSON數(shù)據(jù)格式示例(中國地圖)：

{

"type": "FeatureCollection",

"features": [

{ "type": "Feature",

"properties": { "id": 1 , "name": "甘肅" },

"geometry": { "type": "Polygon", "coordinates": [ [ [ 104.358, 37.401 ],……]]},

……]

}

CSV數(shù)據(jù)格式示例(機場信息)：

Airport,longitude,latitude,Heading,Tilt,Range

Yantai,121.369,37.386,2.8278,4.00E-11,27522.85603

……

JSON數(shù)據(jù)格式示例(IP關系描述)：

{

"nodes":[

{"name":"10.59.223.31"},

……]

"links":[

{"source":1,"target":246,"uplen":32216660,"downlen":28069527,"visitNum":89890},

……]

}

3.2.2框架成果

基于JavaScript的地理事件可視分析基礎平臺，是對地理事件可視分析框架設計的具體實現(xiàn)，驗證基于JavaScript技術搭建地理事件可視分析平臺的可行性和可靠性。該平臺可以在跨操作系統(tǒng)的客戶端瀏覽器中運行，客戶端不需要安裝任何插件，支持Http訪問協(xié)議，通過Ajax異步網絡通信技術獲取服務器端基礎數(shù)據(jù)，確保用戶的良好體驗，減少服務器的訪問次數(shù)，在客戶端實現(xiàn)流暢的基礎地理信息可視化、良好的人機交互和跟蹤查詢等功能，如圖6所示。

(a) 地理事件可視分析基礎地理信息可視化

(b) 地理事件可視分析力導向人機交互

(c) 地理事件可視分析屬性信息查詢圖6

4結束語

隨著互聯(lián)網與人們的生活工作結合越來越緊密，人們通過互聯(lián)網獲取信息的需求也與日俱增，尤其是靈活交互、簡單直觀的用戶體驗已成為人們不斷追求的目標。本文從JavaScript技術和可視分析技術入手，研究互聯(lián)網環(huán)境下地理事件可視分析

的框架設計；以D3.js和Node.js等類庫為基礎，分別從客戶端和服務器端進行環(huán)境的搭建，實現(xiàn)基于JavaScript的地理事件可視分析基礎平臺。結果表明，基于JavaScript技術進行地理事件可視分析框架設計是可行的，為地理信息可視分析系統(tǒng)的實現(xiàn)和功能完善打下基礎。

參考文獻：

[1]THOMAS J J, COOK C A. Illuminating the Path: The Research and Development Agenda for Visual Analytics[J]. Los Alamitos: IEEE Computer Society, 2005. 1-180.

[2]華一新，曹亞妮，李響.地理空間可視分析及其研究方向綜述[J].測繪科學技術學報,2012,29(4):235-239.

[3]龍云.基于HTML5的WebGIS研究[D].贛州：江西理工大學,2013.

[4]李松峰，曹力.JavaScript高級程序設計[M].北京：人民郵電出版社，2012.

[5]張辰.B_S模式下的數(shù)據(jù)可視化技術研究及其應用[D].北京：北京郵電大學,2013.

[6]CHEN M, EBERT D, HAGEN H, et al. Data, information, and knowledge in visualization [J]. IEEE Computer Graphics and Applications, 2009,29(1):12-19.

[7]CHEN C M. CiteSpace II: Detecting and visualizing emerging trends and transient patterns in scientific literature [J]. Journal of the American Society for Information Science and Technology,2006,57(3):359-377.

[8]KEIM D, KONLHAMMER J, ELLIS G, et al. Mastering the Information Age: Solving Problems with Visual Analytics. Goslar:Eruographics Association, 2010：1-168.

[9]張運良,張兆鋒,張曉丹，等.使用D3_js的知識組織系統(tǒng)Web動態(tài)交互可視化功能實現(xiàn)[J]. 現(xiàn)代圖書情報技術,2013(2):127-131.

[10] 徐良燕.基于SVG的電力系統(tǒng)WEBGIS方案的研究[D].保定：華北電力大學,2005.

[11] 周炤，肖強，趙國成，等.基礎地理空間數(shù)據(jù)持續(xù)更新模式分析[J].測繪工程,2014，23(1):12-16.

[12] 李小琦.三維場景可視化中的模型匹配方法研究[J].測繪科學，2015，40(8)：144-146.

[13] 赫春曉，呂志慧，陳超.露采礦山三維可視化分析應用[J].測繪科學，2015，40(7)：131-135.

[責任編輯：路曉鴿]

Visual analysis framework design of geographical event based on JavaScript

ZHANG Wei1,2,BIAN Changchun2,LI Haigang2, LI Feng1

(1.Information Engineering University，Zhengzhou 450000，China；2.Troops 61175，Zibo 255000,China)

Abstract：With the rapid development of the Internet, the visualization of geographic information in the network environment has become a hot study. Based on the study of the JavaScript and visual analysis technology, this paper designs the geographical event visual analysis framework on the Internet. The purpose is to explore the expression and feasibility of the geographical event visualization in the network environment, to set up a suitable Internet geographical event visual analysis framework, and to lay the foundation the realization of Web geographic information visual analysis system.

Key words：JavaScript; geographical event; visual analysis; Data-Driven Document; Framework Design

中圖分類號：P208

文獻標識碼：A

文章編號：1006-7949(2016)03-0041-05

作者簡介：張偉(1982-), 男,工程師,博士研究生.

基金項目：國家自然科學基金資助項目(41301428)

收稿日期：2015-08-01；修回日期：2015-08-31