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

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

?

基于JavaScript的地理事件可視分析框架設(shè)計(jì)

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

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

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

關(guān)鍵詞：JavaScript；地理事件；可視分析；D3；框架設(shè)計(jì)

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

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

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

1概念解析

1.1JavaScript技術(shù)

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

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

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

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

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

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

1.2可視分析技術(shù)

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

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

圖1　可視分析流程[8]

1.3地理事件可視分析

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

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

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

2地理事件可視分析的框架設(shè)計(jì)

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

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

2)以事件為驅(qū)動(dòng)，提供快速、準(zhǔn)確的內(nèi)容更新；

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

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

2.1模型架構(gòu)設(shè)計(jì)

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

圖3　模型架構(gòu)設(shè)計(jì)

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

2.2邏輯流程設(shè)計(jì)

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

圖4　邏輯流程設(shè)計(jì)

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

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

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

2.3功能模塊設(shè)計(jì)

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

圖5　功能模塊設(shè)計(jì)

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

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

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

3.1環(huán)境搭建

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

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

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

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

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

3.1.2運(yùn)行環(huán)境

1)客戶端?；贘avaScript的地理事件可視分析是基于B/S架構(gòu)設(shè)計(jì)，因此客戶端不需要安裝插件，只需要支持IE8以上的瀏覽器，例如Chrome、Firefox等。

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

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

3.2框架實(shí)現(xiàn)

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

JavaScript支持的數(shù)據(jù)格式很多，其中適合地理事件表達(dá)的有JSON，CSV，GeoJSON等。JSON(JavaScript Object Notation)是一種輕量級數(shù)據(jù)交換格式，具有可擴(kuò)展、互操作、面向?qū)ο蟮奶攸c(diǎn)，是JavaScript的標(biāo)準(zhǔn)格式。GeoJSON是基于JSON的一種專門為地理坐標(biāo)存儲(chǔ)設(shè)計(jì)的數(shù)據(jù)交互格式，是Web網(wǎng)絡(luò)中對地理數(shù)據(jù)結(jié)構(gòu)進(jìn)行編碼的格式。CSV(Comma Separated Value)是以字符分隔符劃分的純文本數(shù)據(jù)格式，以行為單位，每行記錄具有相同的字段序列。本文支持以上3種數(shù)據(jù)格式，GeoJSON存儲(chǔ)基礎(chǔ)地理信息數(shù)據(jù)，CSV存儲(chǔ)事件的多維屬性數(shù)據(jù)，JSON存儲(chǔ)地理事件描述數(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ù)格式示例(機(jī)場信息)：

Airport,longitude,latitude,Heading,Tilt,Range

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

……

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

{

"nodes":[

{"name":"10.59.223.31"},

……]

"links":[

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

……]

}

3.2.2框架成果

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

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

(b) 地理事件可視分析力導(dǎo)向人機(jī)交互

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

4結(jié)束語

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

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

參考文獻(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].測繪科學(xué)技術(shù)學(xué)報(bào),2012,29(4):235-239.

[3]龍?jiān)?基于HTML5的WebGIS研究[D].贛州：江西理工大學(xué),2013.

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

[5]張辰.B_S模式下的數(shù)據(jù)可視化技術(shù)研究及其應(yīng)用[D].北京：北京郵電大學(xué),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]張運(yùn)良,張兆鋒,張曉丹，等.使用D3_js的知識組織系統(tǒng)Web動(dòng)態(tài)交互可視化功能實(shí)現(xiàn)[J]. 現(xiàn)代圖書情報(bào)技術(shù),2013(2):127-131.

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

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

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

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

[責(zé)任編輯：路曉鴿]

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

文獻(xiàn)標(biāo)識碼：A

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

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

基金項(xiàng)目：國家自然科學(xué)基金資助項(xiàng)目(41301428)

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